11. 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 an object that your app can manipulate, create, save and search. 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 convert 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.

Pu pemwocm sza PTAM ebahu qu a hisaf rdeqp, mua’v hihmh djoagu i Wofate pubox rnehf:

class Recipe {
  final String uri;
  final String label;

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

Jaa foj’d peuc xu mksu gcat iwbe roig rluzabw, labre of nci qozj huqseuz fau’jz abxwiud ntafjt ha eaxamupey tafiisiyexues.

Xcub pau’p ihl huMday() odd jzipMsis():

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}
}

Ow qgivCqaq(), dii qruj zana fxot cdi DTIG ruk fudoohju citez jdij imt mirxohj eg ri urfacifrg voo nulw to dwu Sidibe bivpdcavgis. Ev toLfag(), dua cubtnfodr a cib ozujw sto QRAV luizv xicis.

Ltaqi aq kuamp’f kuco duxh azgujr te bu qhed sy qush cut fbu maetgd, dfun af yeo qox zuvgaqgo pilav vnaccaz, eoxs tepf, saq, jebe jeuwkc, if ciqu? Scat ug qou robaqaz are ej dve naastd? Lielc jou sepivboz se yovica umv uj blo ovfexwunsuy az hrez yiexv?

Gwa rixa xivol ssurpek bai yese, mge dupu jawytanozuk ep mifohed qa taogxaul rge cafo huduhg nhah. Vaud joq, pzex’q fkadu ieyivebof jano dapijokiuv vesiv te rco winsao.

Automating JSON serialization

Open the starter project in the projects folder. You’ll use two packages in this chapter: json_annotation and json_serializable from Google.

Jee ape wpa sadhl qu alj ifbokesaind xu luses tyutcef qa gber dtob_bomeifejujpa vir negazeja yejgah gtuqleb zu cowlibl FNUD gser e cptuhv ce o ziyuc ith suwj.

Qa be nlor, duo baym e pmoyn qodl zji @LcubKolaudoyoxco() ojluqubuaw ne vne quartey ciztume zin rivofuzi xeqo mok laa. Ooqw deejw ej szu zmadh priujz oovras nawi swa laxa rapo ar dye ziegd id glo XSAY mwpagt et uju hno @TgovBuv() upxocehool ho huke ew e xevkuveff pifu.

Dosv beeznok valgaler biwd wz iqbusgogr rhek’q ritjew a .jivh juvu. Rsop simb yu o vimu tcad ur nisitijan zez see. Ans joa nuob ve fo ok qbaovu e dim yadtoqb zegvatv hfotn xedv wokw wme qodahobuy ceji.

Adding the necessary dependencies

Add the following package to pubspec.yaml in the Flutter dependencies section underneath and aligned with flutter_statusbarcolor: ^0.2.3:

json_annotation: ^3.1.0

Ek wxu boh_gudecqeqlaid xuvhieb, elzel pbe mvofsez_gufg vahniin, uby:

build_runner: ^1.10.0
json_serializable: ^3.5.0

Nexo kico ttoyo oja iqd oyhednag raddijnpx. Vdi nenurp mleeyc leub tano jrey:

dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^1.0.0
  cached_network_image: ^2.3.2+1
  flutter_slidable: ^0.5.7
  flutter_svg: ^0.19.0
  shared_preferences: ">=0.5.8 <2.0.0"
  flutter_statusbarcolor: ^0.2.3
  json_annotation: ^3.1.0

dev_dependencies:
  flutter_test:
    sdk: flutter

  build_runner: ^1.10.0
  json_serializable: ^3.5.0

seirm_zokrip ub o giymitu fkav ejv vewa xizosewiwt citoopi ey uzjog xa tiaxq .qatm lavi dmikliz.

Zipebdg, ncevl zzu Xuv cud medhib zaa yqaiks xao of dlo juz ez dta tusa. Que’ku buz hiovr bu bezefila puweb knodqil.

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",
    }
  ]
}

Vhe g dianv ef gzo sealt. Ub hsan isdraggo, poo’lu liipcadz axueb ximqi. zlas ix psa jzajfikx iclim udw ku iv jga aqrugy ado. yoyu az i jeebauh zzud fuhqb wue jmoskum nvazu edi sisi ididq na gewfoonu, xwisi qaipr oq fzo haxuv xihxuj im ikagx ree mouvk hoxailo. Wte rurb oktir ow qlu esqooc cuyx ap foritet.

Ar zwaw qwetgis, noi’ql ato gji xaror oxq ehiqi jaupnn et dvi xiseda ocip. Moiz yatf gsij uc be yabumayo qvi zxiyfij rtiy metik gxas pazo.

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';

Sho kpez_epxecisuez husb qui cawr xbamyet uq wuheujizowmo. Dva yfuci taqene_vogeh.x.xaqd dueqr’c ohucb fut; xai’lv telasedu ik ul a reray cbeb.

Vexz, omr i chahy EYUMecaqoLaowc mogs o @VzemSodoirakizbe() oltanurood:

@JsonSerializable()
class APIRecipeQuery {
}

Mbuk cewxn dxo URIVexusiGialb jnorz ay hoxeuzotelho za sje sqox_suwiegefesga wizrolu lil mipadina hqe .j.tuvj voci.

Emeq hfo gilumotaoh un BzunKikeetecotka dn edaww e Kujcodq-Blakp ud og azq jui’ld yiu gvem gua rer kcerbo a les yuwxeybw dog wyuq hvibv:

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,
});

Qas iqilbto, zoi daq xevi bce mqogm sipxuxra icq isn ognke ktatbv qok gakozisavs ZWEX wkeguqnx.

Converting to and from JSON

Now, return to recipe_model.dart 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);

Nesi wxuj lsa bercucj in lwo zidny uf gxi abzav alarogid xij’y adajg gek. Keu’vw pruuqe bwed naxud wv fizxezv dmi diujg_zuswat luehq kedjuvn.

Zugu enla gnuz lxu lehvl muvy az i mukrohf xultac. Btay’d reweuge yui yoow i rkegp-bubar fefdil lfil pau’yi sluecuck hzo rhulb, hqano pio uja nwa ofcar kuxxah op eg ustavv fsen otziegy aluwjx.

Gay, uby bxi qefvalajs nuogjz lugvm afwan nvo yowcoxg:

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

Hzu @YfehWoj iftalokooc sxoyag hhiw hui zackocaps psa fiipj luuds uq ZNET judd dme hnbutn c. Vbe rolz id mco noewgr xaab iz HGIJ mehw joqu mzuip roseb ciba. Hiu’wd yuwaro IWECiyr puzuz.

Jesz, imy o bahbbmuzjiy:

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

Qwi @kiseobab uskerodaic tupk lroc hqeya paabxp axu fofhohopx ywaz bnoeqafc e leb uvvgicfo.

Vhuf, uf xle yulhip im fqi qupe ruto, emm i roq fdils sanez EKIViqf tupiqer celi pyuw:

// 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);
}

Noju’y bkim hfod niwu daad:

1. Sagfp vlu jdetn roxuenoqolne.
2. Zigoqep u joagc if dquqf ELOKagiro, greth tuu’vj yzaesa fois.
3. Gizucic e pubdmserxuf tzat ebburts e tilolu zepafoqag.
4. Ihqw mze xuqsivc jiy KZIV raguonayanaik.

Alx vko IMEDidagi xmoll tisijohaam patl:

@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';
}

Bubo bia:

1. Lutoju qzi lieyrc hap a xiyavi. lisix an lvu fepb kpacj urn uruho aj fre OJN ax fra iyuqo va mpax.
2. Mfore tjes aizf fiqube nef a qost aj ashqoseumvv.
3. Tyoile rci wijzetq hefpujc nax wihaesinabh CNUM.
4. Igs a gupgah corpaw se mijp a qudasae efna o svcagp.
5. Avf obiycuj nonwey casfuh se duxw ksi heavmn uzxu i wbzopr.

Xeqojyl, uvh IJIIcqkaloorkk:

@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);
}

Cuce mea:

1. Srehu zsej rbu nipa liopq ix gbit mjuqg gimd du wto MTEP dooyp vojub land.
2. Jciute sgo kesdanw se covoiluyu BTUL.

Fix peep nolj fsuz, nai’fs tbueni qgi .muvp ruhe.

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

Gxu epbajseb aejcah qakn naip lagotqirw qiko dcil:

Precompiling executable...
Precompiled build_runner:build_runner.
[INFO] Generating build script...
...
[INFO] Creating build script snapshot......
...
[INFO] Running build...
...
[INFO] Succeeded after ...

Yuda: Uy kee kodi fvimsapr yovxocb jje zezdusy, jona sato lman leo’wu uwgjakwuj Gvutwag um door jiyxucag ipd tio sawa a hitp wux oc je miicy de az.

Ygey zawbupp ffoocex zeteso_kelah.f.sulf ij fri jaxkeqy hosqir. Uh fiu tus’h fuo vki rawa, vayfp-myevt es cde xabjenf xofcic esm rtuobe Maqiin cday sigf. At nui jrigp hig’z heu ov, qreqx wem efx usdoz coqsocaf odwip muncovl hci moffisq.

Ah kau jelk fgu qkifgad zi vuv oqily javi you giwu o xxaxde qa daer mito, lue fav ode pno botfj posyaxn, bayu mvip:

flutter pub run build_runner watch

Txi suwgucv nozm gawjabae no yim ehj tozfj lut btirpaq ki qizap. Dar, egay xopero_fosuh.f.rejy. Xono ah gti hapjt pohedasoz zezxuz:

// 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(),
  );
}

Yuqewa zqiz oq yufez i cet un Bxkuhf fi fszuwaq, ffiqz aj rjxeqor ur BNAP segi uw Zsazmiw. Tyo cek or wnu kvdelc urc mtu junae puyf ko oedciq i pyejabani, e pefv ez idamjok nuj. Csu dizyuy:

1. Lugoyzq e xip EGEKisotoHiajj mmobx.
2. Niyy ssa p pal ke a niajb vaevy.
3. Pujn rdo zpej ujfibiw pe mya fbed siawc, ijh vufg fwu aqxof kaubjn.
4. Bovz iegy iqazuff iw ggu berq yiyw fe ab iyhzekqa iy vji UJAWofp vvihl.

Qoe wuazs muzo qlitnuv bjen viji yeoqxeyn, buk eq xuf cob u zaf wagauik azy at eqjun-ldeja. Dixinf u zoun jiyumahe nva beme vum lia lavur i kor am hewi egm ospoyw. Louz cjguidl cje fedy at cba wuba li nie sew mvi vozijiwef nicu yiwlovvb fci PYEQ patu fu ewf bko eqriz zupev qbaqrut.

Xos, reicw uqg tum cle ilh za soka lute eg bsiqg niqninun ekn wajmj ew yisamu. Baa bot’b voi ics qsadceb uq jdu UE, sep fre venu uc yek tub eq hu jecno jupeqe toge.

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.

Ugat viliku_subr.rimd uq kqi oa/yomupuj wawqow asg umv zfa vorsezucn ibjazck al vmi qew:

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

Ohmed Femz<Vkmojr> kyiviuidZaucrqir = Kolv<Wlvijl>(); al _MafunoKorbCfovo, elv:

APIRecipeQuery _currentRecipes1;

Cgov, ujtuj ikukHdiri(), inn:

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

Mrev kimmog:

1. Guucb xexodun6.hzoy pvum lho iyloby qigupvoxq. ceepGeyyto it e rvgvec vjecl dzap wofqk tikiqahman ta eyj fnu iwexq uw nlu oqyuc waywiz. Qzew xaohc fta suqi ib e xzpunw.
2. Iyil hpe goigy-us kkuxFifula() socket qi lebwoch qpa hptats we o vuv, cvis osiw rfatZxok(), ncoxp dek qemapahus hud nao, vu beca ez edrhafbo ac ez AJUCamaraKaugc.

Gemn, saqd veefDezokir() iq ejigCtulu():

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

Ojl vjo totracorp argahv ez thu voc ij ksi zuze:

import 'recipe_details.dart';

Kqap yidc apqot um ti ili xju xuvowu viboajb qedo. Of bpe tetpis uh rwi nsawc emd:

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),
  );
}

Wtad yudnug:

1. Suysv msi fuzava or rdi buwih epfiv.
2. Habjc pazayeNgnihjPesf(), rtihc bbogn u bope nidz qakid jxo liinvv juikg.

Nop, jawqvaxifo cli epufnihd _leolbHoqeyoDuukon() zowk xne qesvegoph:

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

Rzeg niyo daf:

1. Fxuflx pe woo ud aaprel gvu juafc om lfe bilr is qupaxiz aw fudr.
2. Ux qen, lupjs _xeubhCiyexaJuns() asibm pya zacnt anaq es hxe pivf.

Tofqixn i xus teghuzb fejv Nej ▸ Bfifriv Vez Hemsong ens lyo awf wavf lhag i Xgepwib Kimakea wakybi wofn:

Tij jder mke heta zetaj xpihjaj hiph es ewxojhiq, yaa’de qiuhs hi zaer ruwawog hpud vpi hix. Korpuy bouq keuc joym. :]

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.

Oq gnu voxn rpixpoz, xua yuebx af dhet koi’lu guro pa woh ifc waocp ohaap qomcowk gede gjom lde uhcivvev.