Search⌘ K
AI Features

Challenge: Serializing JSON Using json_serializable

Explore how to apply the json_serializable library to your Flutter app for automatic JSON serialization. Understand setting up dependencies, annotating model classes, generating code, and integrating the serialized data into your app's UI.

Goal

This challenge aims to help you understand how code generation works using the json_serializable library to generate JSON serialization boilerplate. You will learn to use the official documentation of the packages.

Specs

When you run your app and navigate to “Realtime Transactions,” a list of transactions streams in, except this time, you are fetching serialized data:

Serialization challenge app specs
Serialization challenge app specs

Starter code

Before you begin the challenge, look at the starter code below and run it. Once done, you can dive into the challenges below.

import 'package:flutter/material.dart';
import 'presentation/my_app.dart';
void main() async{
  runApp(const MyApp());
}


Serialization app challenge starter

Challenges

Challenge 1: Set up json_serializable

To make use of json_serializable, you’ll need to include one dependency, ...