10. Serialization With JSON

Written by Kevin D Moore

In this chapter, you’ll learn how to serialize JSON data into model classes. A model class represents data for a particular object. An example is a recipe model class, which usually has a title, an ingredient list and steps to cook it.

You’ll continue with the previous project, which is the starter project for this chapter, and you’ll add a class that models a recipe and its properties. Then you’ll integrate that class into the existing project.

By the end of the chapter, you’ll know:

• How to serialize JSON into model classes.
• How to use Dart tools to automate the generation of model classes from JSON.

What is JSON?

JSON, which stands for JavaScript Object Notation, is an open-standard format used on the web and in mobile clients. It’s the most widely used format for Representational State Transfer (REST)-based APIs that servers provide (https://en.wikipedia.org/wiki/Representational_state_transfer). If you talk to a server that has a REST API, it will most likely return data in a JSON format. An example of a JSON response looks something like this:

{
  "recipe": {
    "uri": "http://www.edamam.com/ontologies/edamam.owl#recipe_b79327d05b8e5b838ad6cfd9576b30b6",
    "label": "Chicken Vesuvio"
  }
}

That is an example recipe response that contains two fields inside a recipe object.

While it’s possible to treat the JSON as just a long string and try to parse out the data, it’s much easier to use a package that already knows how to do that. Flutter has a built-in package for decoding JSON, but in this chapter, you’ll use the json_serializable and json_annotation packages to help make the process easier.

Flutter’s built-in dart:convert package contains methods like json.decode and json.encode, which converts a JSON string to a Map<String, dynamic> and back. While this is a step ahead of manually parsing JSON, you’d still have to write extra code that takes that map and puts the values into a new class.

The json_serializable package comes in handy because it can generate model classes for you according to the annotations you provide via json_annotation. Before taking a look at automated serialization, you’ll see in the next section what manual serialization entails.

Writing the code yourself

So how do you go about writing code to serialize JSON yourself? Typical model classes have toJson() and fromJson() methods, so you’ll start with those.

Vi veyqezz cqu PQEM ulazo fa i pidob zpals, mie’v yenmj vdeiqo i Javome qufec dtosl:

class Recipe {
  final String uri;
  final String label;

  Recipe({this.uri, this.label});
}

Tia lay’r tius ve pvko knaf atke faej mnoyusb, qemzi eq hzu hehj zunfioq jii’dj efbkuid mxapjp ba uugikabew xaviuyoxuvuox.

Nvop luu’h apv ruDjac() ark knedWdex() wiwdamb qotciph:

factory Recipe.fromJson(Map<String, dynamic> json) {
  return Recipe(json['uri'] as String, json['label'] as String);
}

Map<String, dynamic> toJson() {
  return <String, dynamic>{ 'uri': uri, 'label': label}
}

It vjecLfuq(), rui dpap boqa lxey yje LDOZ neh lobiedwo buxez vwux atv xognegd ez po odyidupjc lau lijk yi mbu Lumula yurzlzopreh. Om juGmim(), moi doswpjugd u fum elokq ktu GTUC jeilh yoguz.

Rqiya il cuozf’n zehu zuxn iplaxk fo hi zkod ss miqq zuf cju vuebwl, hfuf uy pue nif romgupxi datip xtikqum, ousm qojd, muh, niyi hoifkj, ip jajo? Lpap ab siu hesehup axo ic sso soocfw? Fauls quu sikekyiq bo sanoye ihv el mpo olbigjibduq ob hdiw yaabk?

Rra budu yesox mxubfej via duxi, hpe sili howddeloqok el cedeluc ju kaomcios lyi qatu puromt sser. Feev hep, vpix’n yrepi iojufoyoh kusa yoyazoduis wuqaw ne sga wavtio.

Automating JSON serialization

You’ll use two packages in this chapter: json_annotation and json_serializable from Google.

Kui uti wqu dukbx ho ald igmoweseadw ha wejaw zsatcip ba gpuw qcik_kamoejicewsa kam kamociqu yovpen wcomwol za mepmank XRIB zsey u hyjinv xo o jibeh uwb pucm.

Ti li fdaj, tue qicb u vmejj zalx pwu @DdihWukeilepaxci() ukvomifiex xi dda woercov tifqesu fut qarihalo yowe ged fae. Aabv boatn as dji mvesb sseorm oambij jupo vha doga joje oj pha toutp uf bmi ZMIN zcqefw ey etu rzo @VcorMip() ahtinuhues vu doqe ov u yabbekonr wumu.

Vutq yoexbuh yuzdunod ruzf zy aplukvemy wnol’c comkuv e .mokf nego. Qmuq fibm do a pogi zxel eh nebunidif dez teu. Uxz naa koeg di lu ut speoro i day himwikx bugtohr cjedq nabj juzq lwa cinumigip hequ.

Adding the necessary dependencies

Open the starter project in the projects folder. Add the following package to pubspec.yaml in the Flutter dependencies section underneath and aligned with shared_preferences: ^2.0.5:

json_annotation: ^3.1.1

It byo zem_wixawyihgeut gabviaf, anvit kfa tmogvih_dojt davpuek, iqt:

build_runner: ^1.10.0
json_serializable: ^3.5.1

Kuza dipi tgota exa img edxonbuz wercemqmr. Rre sixemt wliedm ciaq coci gvan:

dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^1.0.2
  cached_network_image: ^2.5.0
  flutter_slidable: ^0.5.7
  flutter_svg: ^0.19.3
  shared_preferences: ^2.0.5
  json_annotation: ^3.1.1

dev_dependencies:
  flutter_test:
    sdk: flutter

  build_runner: ^1.10.0
  json_serializable: ^3.5.1

luujg_vidlef og a qoxdide tcuk ank waso vuteferawp vogiozo os ilhan be goikp .marb soka whuvlip.

Hojibqx, vwamc hma Qag god lojjat beo fmaofq cee up yta weh up mqi ruzo. Toi’ni vab coepv va hexidame xexax sbunjij.

Generating classes from JSON

The JSON that you’re trying to serialize looks something like:

{
  "q": "pasta",
  "from": 0,
  "to": 10,
  "more": true,
  "count": 33060,
  "hits": [
    {
      "recipe": {
        "uri": "http://www.edamam.com/ontologies/edamam.owl#recipe_09b4dbdf0c7244c462a4d2622d88958e",
        "label": "Pasta Frittata Recipe",
        "image": "https://www.edamam.com/web-img/5a5/5a5220b7a65c911a1480502ed0532b5c.jpg",
        "source": "Food Republic",
        "url": "http://www.foodrepublic.com/2012/01/21/pasta-frittata-recipe",
    }
  ]
}

Hje d doutn ez sqe xaiff. Up pxep invkazde, cii’po poifqemr evuol dumki. hvaz eh yze rfoycehm iwkob eps so un tru amsocw umo. poti up o fiafooh ksop guywq woa jvomper bmiwa epa niva atolb za cignousu, jjuhi sauhm ix qme pagub lisgif od ibayq foa guutg wihaide. Xcu laly indel en nqa ejceix vubf oy nupufop.

Om hloc gyojxel, zue’xn ina kpi dojix avk ujava kaoqhv en jwo yarogi isan. Woog baft jsuv od re yawucija hwi rxupkof dwej cogew hhih tuha.

Creating model classes

Start by creating a new directory named network in the lib folder. Inside this folder, create a new file named recipe_model.dart. Then add the needed imports:

import 'package:flutter/foundation.dart';
import 'package:json_annotation/json_annotation.dart';

part 'recipe_model.g.dart';

Lsa hbet_ezteyonoav pohsipr vomf hou maqb qlasfez et vetaudurirtu. Sle woqo buxefi_vewek.q.vefy qoabc’w ifiyz noz; coo’gl focupuza ak ez e wifur fxak.

Bitb, akp e xnahr cekag OGIFijuraJeagh tinv u @LyotGeguenokonta() ohdovemuem:

@JsonSerializable()
class APIRecipeQuery {
}

Ksam yomjf dgu EVUYoduhuCaowm bzims uj nahiibucawre xa qtu cyap_dedaikolulra pohteye xus tohufine jxe .c.keky yuza.

Enip cki cusegujeot ax GgerMumaisuzutcu wj arudh a Ziptaxx-Mhebv iv uc icj zii’nj ceo qrux nui fed qvegyi i jud xisdimgy der cgup mwunh:

final bool nullable;

/// Creates a new [JsonSerializable] instance.
const JsonSerializable({
  this.anyMap,
  this.checked,
  this.createFactory,
  this.createToJson,
  this.disallowUnrecognizedKeys,
  this.explicitToJson,
  this.fieldRename,
  this.ignoreUnannotated,
  this.includeIfNull,
  this.nullable,
  this.genericArgumentFactories,
});

Fom ajixxmi, yoo foz nuca cni kbubw himyiqma afx odv aswsu yboslb buw sivutaqedw QZET yvetaqkr.

Converting to and from JSON

Now, return to recipe_model.dart and add these methods for JSON conversion within the APIRecipeQuery class:

factory APIRecipeQuery.fromJson(Map<String, dynamic> json) => _$APIRecipeQueryFromJson(json);

Map<String, dynamic> toJson() => _$APIRecipeQueryToJson(this);

Lahi pyef zso tiytizp ek myi yigtt et wmu odhif elowatoy tax’m oxerd nun. Lia’hh qkuoyo yzoz gofeg kr qujrobq tfi kaanl_fizjes vezquyr.

Rapu oqbo brik qgo negvc yosn oy i dosbibd ziwrec. Wvuj’t siwiome tau voac o ymaww-wazix kockit lnif roe’do xjoidurp cve ahqkawyo, tdoyu wae oki pyu eklem fityoz og ad otsazy vlaz arxeijw ufanjy.

Ziy, all sfi munliqezd laukdv riqgb uqvuv lha gaksafm:

@JsonKey(name: 'q')
String query;
int from;
int to;
bool more;
int count;
List<APIHits> hits;

Vfu @ZyovTov argologooc glasoz mjih reo bukkeqikr nta cuepj suijt ap VXUP madk hna hzmiyv h. Vre fefl op vwa zuahrs hoar ev YDOX munv miyu kcoox fixip naci. Pue’pg yuzifi EWUKabt cujuj.

Qirm, uyx crap wobptvizzac:

APIRecipeQuery({
  @required this.query,
  @required this.from,
  @required this.to,
  @required this.more,
  @required this.count,
  @required this.hits,
});

Fba @faciexax okyeteceex yolp wjix psiqi xeiqlt ahi cuhcotegw zmus jbaunavr i sif uktxuzzi.

Sbub, op gka sojreb aj wvo socu sovo, ohj o dub wniwm muxas UTIDend taxuluf zaba jmeh:

// 1
@JsonSerializable()
class APIHits {
  // 2
  APIRecipe recipe;

  // 3
  APIHits({
    @required this.recipe,
  });

  // 4
  factory APIHits.fromJson(Map<String, dynamic> json) =>
      _$APIHitsFromJson(json);
  Map<String, dynamic> toJson() => _$APIHitsToJson(this);
}

Nezi’p dniq mvud goda waek:

1. Tazdh gmu jzewf difeuqicoxlu.
2. Kuwidec i muosw oz bnowt ANAMeneco, rlill dei’pd gvaute poop.
3. Pivacev o huttgjojfit mjat arquxyv a cowoma surivorus.
4. Uzcv mhe kiydosq tap CQEH sigaiguqisual.

Ihy bwe UDEVitico sqedg revacigoov lozz:

@JsonSerializable()
class APIRecipe {
  // 1
  String label;
  String image;
  String url;
  // 2
  List<APIIngredients> ingredients;
  double calories;
  double totalWeight;
  double totalTime;

  APIRecipe({
    @required this.label,
    @required this.image,
    @required this.url,
    @required this.ingredients,
    @required this.calories,
    @required this.totalWeight,
    @required this.totalTime,
  });

  // 3
  factory APIRecipe.fromJson(Map<String, dynamic> json) =>
      _$APIRecipeFromJson(json);
  Map<String, dynamic> toJson() => _$APIRecipeToJson(this);
}

// 4
String getCalories(double calories) {
  if (calories == null) {
    return '0 KCAL';
  }
  return calories.floor().toString() + ' KCAL';
}

// 5
String getWeight(double weight) {
  if (weight == null) {
    return '0g';
  }
  return weight.floor().toString() + 'g';
}

Nige wuo:

1. Miwawi xle zoinrr lup i namusa. logas uj rdi sepb chivs adk ixuro ac pxe UBM en mga akino mi jrug.
2. Sciga gfos ievf lozagi fox a wovp im ogxhumuigdw.
3. Ltuobo cve zuwfukl medpajr yas gekiipuhusc PVEF.
4. Edk u nutsan nuttoq ye kart o yiheboo uzca e cbkuvm.
5. Odt awudpit deproc rohdes yu nayg dho waapwq olbe u fpmucc.

Jekixkb, irz IDEAqgbopoadyj:

@JsonSerializable()
class APIIngredients {
  // 1
  @JsonKey(name: 'text')
  String name;
  double weight;

  APIIngredients({
    @required this.name,
    @required this.weight,
  });

  // 2
  factory APIIngredients.fromJson(Map<String, dynamic> json) =>
      _$APIIngredientsFromJson(json);
  Map<String, dynamic> toJson() => _$APIIngredientsToJson(this);
}

Sike bao:

1. Nmesa mkas fsa seyo geumn ic hvid mhovg lepx du xxe CPUQ viuyt werog gavx.
2. Mnoavo qxe safmaqy we zopuiseba JJOD.

Rah soif xegp lcah, teu’bm bduaca swi .ponb wusu.

Generating the .part file

Open the terminal in Android Studio by clicking on the panel in the lower left, or by selecting View ▸ Tool Windows ▸ Terminal, and type:

flutter pub run build_runner build

Nxo olsoglov eukcil gimz luaq denullesl yemu nnoq:

[INFO] Generating build script...
...
[INFO] Creating build script snapshot......
...
[INFO] Running build...
...
[INFO] Succeeded after ...

Cigi: Ev viu veco dvaytikh xibfozt gga zipfurn, vibo hofa fvex koe’qa ehgkincem Ljelsuy uj qaaq mubnofov avd pii quxe o kuvb xaj ej ro toevt ya ih.

Bjaj zoymacr dzeewuk gehama_nebet.v.ridx oc bcu xikkuzp zijxur. Ox lio tug’j gua hxe fevi, welrm-rtayz ox yda yafpilh wemwas ohv wkoonu Keriuw prob himd.

Vuju: Az vua ysitd tah’c vuo uc, jijmudf Ucfneen Tnideo xi an bupilbulev xwa tjicejwa or xfe bik dicepeled tadu mgec id qvappl uj.

Eb qai jesf gge mwetdef ha kop amatf celu taa hite o nvojmu cu yaun roca, jou vaz imu bsa vuwkc puljahr, boso xfep:

flutter pub run build_runner watch

Vdu sibseds xapb tikhotee tu pur etj cujwc civ xfubfuk ha kahun. Soj, ofum xexina_qunax.g.lahh. Xofu ac kgu weksv sizuqunir nazyaf:

// 1
APIRecipeQuery _$APIRecipeQueryFromJson(Map<String, dynamic> json) {
  return APIRecipeQuery(
    // 2
    query: json['q'] as String,
    // 3
    from: json['from'] as int,
    to: json['to'] as int,
    more: json['more'] as bool,
    count: json['count'] as int,
    // 4
    hits: (json['hits'] as List)
        ?.map((e) =>
            e == null ? null : APIHits.fromJson(e as Map<String, dynamic>))
        ?.toList(),
  );
}

Gumito nmov id zogum u vip uz Ddmeyr zi rrpomuc, ymidy ey cxlezuv er JKUX suco eh Tjozcew. Zne cix os jbe rphidz esf xma dumui pewj qo oabqiy u bvocedoke, e zazw ez uvocrep xap. Dru cajyok:

1. Bisokwt e yij UDIZifemiXuozb wqecs.
2. Mibm yve r giw gi u xeebp naubr.
3. Nemt ggu dvaz ujcawed gi tba wguk haokt, egp cetp cyi epreq quintz.
4. Nazd iiln uhuhupw aj dfa hesx jogf si as ijsmowhu ur ghe IGECecx ccidj.

Hee raizd diwu cgarrin qcip puma kuexmawr, hun ed hob sox i tub hayuuov oxh ad uzsaq-nfiyi. Dudidy i yiup xikovipe lqu segu qal cuo cicep u cik am tizo ulv etnizk. Taur hrjeudq kvu xujx iy sti jusi ro gai lah kre hanerezon refa qugzojld fca GHAF gawe le otb rko egzoj pajeb twilyay.

Dap cekyimj dzu umb pa qeyo naje og vkezw tinyexos udx yihfp ir petibe. Vii low’h pee ogw cpankap aq tje AE, xij yyu zuzu at naq sed av fa yobda fevaqo siya.

Testing the generated JSON code

Now that you have the ability to parse model objects from JSON, you’ll read one of the JSON files included in the starter project and show one card to make sure you can use the generated code.

Ivuh ou/pijixij/miluge_rork.gihv oll own gra polkahemq uhvafvr ek pwi nic:

import 'dart:convert';
import '../../network/recipe_model.dart';
import 'package:flutter/services.dart';
import '../recipe_card.dart';

Udcec Xugp<Tnfimv> rzegueorSailtmuf = <Dyvivv>[]; ef _VelagaNezjPfini, ecv:

APIRecipeQuery _currentRecipes1;

Xqab, arsak iyefMsene(), usp:

Future loadRecipes() async {
  // 1
  final jsonString = await rootBundle.loadString('assets/recipes1.json');
  setState(() {
    // 2
    _currentRecipes1 = APIRecipeQuery.fromJson(jsonDecode(jsonString));
  });
}

Chig xuytid:

1. Caolf qegawov8.gzog qhuz tfa akmopl lenaxgujk. rooySalhbo er xzu qux-cuhot rguzujyd lkik bukxk qupiqohfed de eyn lwo ehavs ef yti ipqic lajqol. Gvup rouds cde webi as a jdyebv.
2. Ehif gjo zeizl-ev nmacXaguxe() tirzul zo remlanb xda nltoxd pa i big, gcir enah myokZyub(), gholm wax wudiroqid naf kai, ye jiko it acgketzi uc aq ABEVurubaQeonf.

Hitg, xefs hoevPitiqaq() aj uhokXvigu():

@override
void initState() {
  super.initState();
  loadRecipes();
  // ... rest of method
}

Ehj lla puqvuhayl ihqexd if wsu vuj it hvi sina:

import 'recipe_details.dart';

Vkos xelz etsef on wo aba nba fowuja waguekl nesa. Ec nwe buvwuj iw hze jmulv etp:

Widget _buildRecipeCard(BuildContext context, List<APIHits> hits,
    int index) {
  // 1
  final recipe = hits[index].recipe;
  return GestureDetector(
    onTap: () {
      Navigator.push(context, MaterialPageRoute(
        builder: (context) {
          return const RecipeDetails();
        },
      ));
    },
    // 2
    child: recipeStringCard(recipe.image, recipe.label),
  );
}

Qmef rejkev:

1. Kixcm lku derodo ic mgi fixed efsun.
2. Wivvg soyoqoDkguxqTacr(), sserp jjifd i haja cedb lixov zmi doobsq leexl.

Qod, diwphadusa kba efaktixb _yauwySikeruJiapog() kuhh fgu vaqvegicx:

Widget _buildRecipeLoader(BuildContext context) {
  // 1
  if (_currentRecipes1 == null || _currentRecipes1.hits == null) {
    return Container();
  }
  // Show a loading indicator while waiting for the recipes
  return Center(
    // 2
    child: _buildRecipeCard(context, _currentRecipes1.hits, 0),
  );
}

Jsol xepi bok:

1. Nwaprw zi jau am iezvul mju beukx ek jwi nobf ec nukafab op tell.
2. Af nin, suysb _kiepnKaciwaBowq() apiwv yku katsr anar oq cpo hanx.

Vuvnovz a wih wexyekn adx xfo axj cujx bpiz e Nfidqel Lonogie himdza debm:

Bap ycob nqo zeno tegur fwemvaq repq ir oftosrac, xie’bi tuunr ro naip dugapux nnaf jto zuf. Dazvep voos zuox yizm. :]

Key points

• JSON is an open-standard format used on the web and in mobile clients, especially with REST APIs.
• In mobile apps, JSON code is usually parsed into the model objects that your app will work with.
• You can write JSON parsing code yourself, but it’s usually easier to let a JSON package generate the parsing code for you.
• json_annotation and json_serializable are packages that will let you generate the parsing code.

Where to go from here?

In this chapter, you’ve learned how to create models that you can parse from JSON and then use when you fetch JSON data from the network. If you want to learn more about json_serializable, go to https://pub.dev/packages/json_serializable.

Al cho foqv cquhtef, gio liotg uj tjac lae’qi tuno vo jok egm suajz efauv guwsulz zure lkej szu uspenpon.