Until now you have been working with static data. Let’s switch up the gears and bring some “real” data from the internet. In this tutorial you will learn how to make network calls in a flutter application. I assume you have basic understanding of http. You will make GET and POST requests in this tutorial.

The code in this tutorial can be found here.

Adding http dependency

Before anything you need to add the http library in your flutter project. Go to the link to grab the latest version (recommended) or just use the version I am using (not recommended, only if you are super lazy).

Open pubspec.yaml and paste the http dependency.

After this, open up a terminal and from the root of your project run the following command.

This will make sure all the packages mentioned in the pubspec.yaml are fetched and ready to be used by the project.

Making a GET request

We are going to use the JSON placeholder api for purpose of this tutorial. JSON Placeholder is a service that provides you with endpoints that emit fake JSON data, which is all we need for this tutorial.

For GET request we will hit the /posts api that returns a list of posts (format below). First you will display just the raw text from the response. After that you will parse the response as json and display the posts in a list.

Set up a basic hello world app in flutter.

For this you will need a StatefulWidget, you will see why in just a moment. You will be writing code in HttpExampleWidget. Let’s display the response from the api in a Text widget (you already have that in place, with the text ‘HttpExample’). For this you need to store the response from api somewhere inside the widget’s state, lets store that in a variables named _text.

The actual http call will be made in a method named _fetchPosts. This will be an async function. (If you don’t know how asynchronous methods work, read this tutorial).

Import the http package.

The actually GET request is just one line! Await for the response from api, the returned object is of type Response which contains a property named body that has the data returned from the api. Once response is received, update the _text variable and call setState to make the UI re-render with updated data.

Now that you have written the _fetchPosts function, you need to call it somewhere. One option is calling it inside build method (wrong, never do something like this), the reason it is a bad practice is because you want the network request to be made once, build method doesn’t get called only once, the framework can call it at multiple occasions that are not under your control, for example when keyboard pops up, build method is triggered. Remember that we made this widget Stateful, we can use the initState method which is only called once when the state is created initially, it is a good place to call the _fetchPosts method.

Run the app, once the response from api is received it would look something like this:

flutter get networking http

Never miss a post from TheTechnoCafe

JSON parsing in Flutter

Right now you are just displaying the response from api as is, it is not very appealing. Lets parse this response and display it inside a ListView. Parsing JSON in flutter is very easy, just use the jsonDecode function from dart:convert package (in-built dart package).

The returned response from api is a list of JSON objects(with type Map<String, dynamic>), so jsonDecode returns a List, if response is not a List, it would return a Map<String, dynamic>.

Create a model class to hold a single Post.

Every single JSON object inside the parsed list has a type of Map<String, dynamic> and contains the relevant Post data. You need a way to convert this Map<String, dynamic> into a Post object. A good practice is to write a factory constructor name fromJSON (the name clearly suggest that a Post object will be created from JSON data).

Convert the parsed response to List<Post> rather than List<dynamic>.

Display List<Post> using a ListView rather than displaying just plain old text. This would require a bit of refactoring and the resulting code is shown below. Go on and try it on your own, don’t just look at the code, practice it!

Replace the String _text with a List<Post> _posts. Use a ListView.builder to display the content in _posts, finally when response is received, update contents of _posts and call setState.

flutter http get list networking

There you have it, this is how you fetch real data from network!

Making a POST request

I am not going to show you the entire application code for making a POST request, just the method that would make the actual request.

All you have to do is use the post method from http library instead of the get method (Line 2). post lets you specify body and headers. Headers are of types Map<String, dynamic>, but in case you want to send a body with content-type as application/json, the body needs to be encoded, this is where jsonEncode comes into play, its opposite to jsonDecode, while jsonDecode converts a JSON string response into Map<String, dynamic>, jsonEncode does the opposite, it converts a Map<String, dynamic> to encoded JSON String.

All the code show in this tutorial can be found here.

<< Previous Tutorial – Flutter Crash Course – 5 – Building Lists and Pages

Gurleen Sethi

How can I tell you about myself in just a few lines, to get to know me you can reach out to me, email, text, call, or any other method of communication you like. I am always there for you!

1 Comment

Flutter Crash Course - 5 - Building Lists and Pages - TheTechnoCafe · September 2, 2019 at 7:08 pm

[…] Next Tutorial – Flutter Crash Course – 6 – Networking Basics >> […]

Leave a Reply

Your email address will not be published. Required fields are marked *

14 + 11 =