Parsing JSON in Flutter

Building the Cat Detail Page

Your next step is to set up the onTap listener so that tapping a row shows the breed image.

Replace the code in the onTap() property of GestureDetector with the following:

Navigator.push<void>(context,
    MaterialPageRoute(builder: (context) {
      return CatInfo(
          catId: breedList.breeds[index].id, 
          catBreed: breedList.breeds[index].name,
      );
}));

This adds the actual id and name of the tapped row into the constructor call for CatInfo.

Now, open cat_info.dart in lib/screens. In _CatInfoState, add the following code above the initState override:

CatList catList = CatList(breeds: List.empty());

void getCatData() async {
  final catJson = await CatAPI().getCatBreed(widget.catId);

  final dynamic catMap = json.decode(catJson);

  setState(() {
    catList = CatList.fromJson(catMap);
  });
}

Next, call the getCatData() you just added within initState:

@override
void initState() {
  super.initState();
  getCatData();
}

Be sure to import all the class files you need at the top:

import 'dart:convert';
import '../api/cat_api.dart';
import '../models/cats.dart';

Now, modify the getCat() method as follows:

Widget getCat() {
  final mediaSize = MediaQuery.of(context).size;
  if (catList.breeds.isEmpty) {
    return Container();
  } else {
    return Center(
      child: Container(
        width: mediaSize.width,
        height: mediaSize.height,
      ),
    );
  }
}  

This will return an empty Container if the list of cat breeds is empty.

In the non-empty Container(else block), after the height argument, add the following:

// 1
decoration: BoxDecoration(
    image: DecorationImage(
// 2
    image: NetworkImage(catList.breeds[0].url), fit: BoxFit.contain,
)),

Here, you have:

1. BoxDecoration to let you draw an image in a box area.
2. NetworkImage to load an image from the network.

Notice how you’re using a decoration to display a network image. You don’t have to do a thing — just wrap the cat URL in a NetworkImage widget. Awesome, right? :]

Build and run your app, and tap any breed. You’ll now see cat images for each breed. Congratulations!

Where to Go From Here?

You can download the final completed project by clicking Download materials at the top or bottom of this tutorial.

Wow, that was a lot of work, but you learned how to:

• Use the HTTP library to issue network API requests.
• Make API calls to return data.
• Parse returned JSON into model classes.
• Display lists of items in a ListView.
• Display a network image.

You can learn more about Flutter JSON parsing by visiting JSON and serialization in the Flutter docs and the docs for the JSON Serializable package.

Feel free to share your feedback and findings or ask any questions in the comments below or in the forums. I hope you enjoyed learning about JSON parsing in Flutter!