Flutter Read Complex JSON with Model Class
What is Nested Json ?
Nested JSON is simply a JSON file with a very big portion of its values being other JSON objects. That's means a json object hold another or many json object inside it.
Simply it's a JSON Family.🙃 Here is a Demo Image we will use for this example.
Add local Json to Flutter Assets:
Go to your assets folder and create a file name it nested.json or anything you want with .json extension. Now copy the json code from here and paste it into nested.json file. So we get a local json as assets. Declear is as an assets on pubspec.yaml file as we did in our previous tutorial. Or you can Download full sourec code from below.
Create Model Class for Json in Flutter
Now we will create a model class to Parse our json file. For that goto our json to dart converter tool and paste your json file codes there. Give a model class name UserModel and it will generate a Model Class for you.
Now copy this code and create a new dart file on lib folder of your project, name it model.dart and paste it. So our Model Class created.
Function for Parsing Local Json into Model
This is the function that responsible for fetching data from local JSON file and put JSON data into Our Model Class. Place it before widget build. You have to import service , convert and model class to make it work
List<UserModel> _users = <UserModel>[];
bool _isLoading = true;
@override
void initState() {
super.initState();
fetchUsers().then((value) {
setState(() {
_isLoading = false;
_users.addAll(value);
print(_users.length);
});
});
}
It will put our json values into a list using Model Class. Now let's show them into our app UI. Here is the UI part Code. The logical explanation of this code is its return scaffold with list view builder in body. After calling our function it gets data and then sets _isLoading value into false. So when listview builder has no data then it's return circular progress indicator , when data generated successfully then returns User Data.
return Scaffold(
body: ListView.builder(
itemBuilder: (context, index) {
if (!_isLoading) {
return Card(
margin: const EdgeInsets.all(10),
child: ListTile(
leading: Text(_users[index].id.toString()),
title: Text(_users[index].name.toString()),
subtitle: Text(_users[index].address!.city.toString()),
trailing: Text(_users[index].address!.zipcode.toString()),
),
);
} else {
return const Center(child: CircularProgressIndicator());
}
},
itemCount: _users.length,
),
);
Explanation Full Project
On ListTile's leading we access our users list then id and then make it to string. Because Text widget supports only string or variable. [index] is the index for each of our JSON Object generated by ListView Builder. By using this method we access to our nested json object. There are many other ways you will learn next. Get the Full Project from Github and keep Practicing.
Conclusion
We show you how to use Model class and Parse Local Json. But how could you received data from api and show it to app. For that you can read this article about How to Fetch Data From API. Thank you.