Retrieving Json Data in Flutter

Emine İNAN
Oct 20, 2020 · 2 min read
Image Source

In this tutorial we will retrieve json data in Flutter using HTTP package.

The HTTP package is used to retrieve data from the internet.

In this example, we will list the Breaking Bad characters on the screen.

Create a Flutter project.

Go to pubspec.yaml file and add http package under dependencies. (You can find the package here.)

pubspec.yaml

Create a model folder under the lib folder to keep data. Then open a file named character.dart under the model folder.

First, open a Character class in this file and add the required properties: id, name, img and nickname.

Then, use the constructor named Character.fromJson to convert the Json data to character object.

Finally, create a Map type function named toJson to convert the character object to json format.

lib/model/character.dart

Create a data folder under the lib folder. Then, under the data folder, open a file named characterr_api.dart to keep api.

Open a class named CharacterApi and import Http into that class.

To use a function that returns Future, import the async library.

Async means that this function is asynchronous and you need to wait to get its result. Future is a type that comes from the future and returns value from your asynchronous function.

Create a Future type function called getCharacters and fetch the data from the Internet with the help of Http get method. (You can find the API here.)

lib/data/character_api.dart

Create a screens folder under the lib folder. Then, under the screens folder, open a file named character_list.dart to list characters.

Create a StatefulWidget.

lib/screens/character_list.dart

Define a list called CharacterList to hold the characters.

characterList

When we send a request, we call the incoming response, the data, “response”.

then method is used to capture results once the operation is completed.

Use the setState function to update the state variable.

An Iterable is a collection of elements that can be accessed sequentially.

json.decode is used to decode the JSON data into the Dart Map object. Once JSON data is decoded, it will be converted into List<Character>.

getCharactersfromApi

Call the getCharactersfromApi() method in the initState() method. The initState() method is called exactly once and then never again.

initState()

Use ListView widget to show list items and ListTile to show each element.

ListView.builder()

The complete code of the character_list.dart is as follows.

lib/screens/character_list.dart

Program output.

ProgramOutput

Thank you for reading.

To access the finished project on GitHub:

HardwareAndro

It’s a software social hubs.

Emine İNAN

Written by

Computer engineering student, interested in Android Development.

HardwareAndro

It’s a software social hubs. We will create content: development lifecycle and DevOps feature and test engineering.

Emine İNAN

Written by

Computer engineering student, interested in Android Development.

HardwareAndro

It’s a software social hubs. We will create content: development lifecycle and DevOps feature and test engineering.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store