Fetch and Parse Data from the Internet in Flutter

In this tutorial, we are going to Fetch and Parse Data from the Internet in Flutter using a flutter package called `http`.

Working with APIs and sending and fetching data from the internet is very necessary for apps nowadays. Most of the apps nowadays are connected through an API to a backend server.

Add the http package:

Before using the http package we have to add it to the dependencies section of the pubspec.yaml.

dependencies:
  http:

Now we have to run flutter packages get in our terminal. This command will install this package.

Making our first HTTP call:

Now we are ready to fetch data from the internet. In our code, we will create a new method called getData() which will get the data from the JSON Placeholder API by using the http.get() method.

Remember thehttp.Responseclass contains the data received from the http call.

Future<http.Response> getData() {
  return http.get('https://jsonplaceholder.typicode.com/posts');
}

Parse the Response into Dart Objects:

Now after the successful http call, now we should have a post in the JSON format. The next thing is to convert this JSON object into custom dart objects. We can also work with raw http.response but making their own objects in much more convenient and easy.

So now we’ve to create aPostclass that contains the data that came from the successful http request.

class Post {
  final int id;
  final int userId;
  final String title;
  final String body;

  Post({this.id, this.userId, this.title, this.body});

  factory Post.fromJson(Map<String, dynamic> json) {
    return Post(
      userId: json['userId'],
      id: json['id'],
      title: json['title'],
      body: json['body'],
    );
  }
}

And now we’ve to update the getData()function so it returns aFuture<Post>:

import 'dart:convert'
List<Post> posts;
Future<Post> getData() async {
  final response =
      await http.get('https://jsonplaceholder.typicode.com/posts');

  if (response.statusCode == 200) {
    posts = Post.fromJson(json.decode(response.body));
    return true;
 } else {
    throw Exception('Failed to load post');
  }
}

Now we have got a function that fetches a post from the internet.

With that now, we have a function that will fetch the data from the internet and then it will convert the response into custom dart objects. Now you can show that data anywhere in your app.

This below code can be used to show the `posts` we fetched from the API. Here until `posts` list empty we are showing a progress indicator. Once we have data in posts list we will show it in a `ListView` using a `ListTile` widget.

@override  
Widget build(BuildContext context) 
{   
 
return Scaffold(     
appBar: AppBar(title: Text("Data from the Internet"),),      
body: posts == null ? LinearProgressIndicator() : 
ListView.builder(itemCount: posts == null ? 0 : posts.length,        
itemBuilder: (BuildContext context, int index) 
{          
return Container(margin: EdgeInsets.all(8.0),            
child: Card(color: Colors.blue[50],                
child: Container(padding: EdgeInsets.all(8.0),                  
child: Column(crossAxisAlignment: CrossAxisAlignment.start,                    
children: <Widget>[                      
SizedBox(height: 8.0),                      
ListTile(title: Text(posts[index].title,                          
textAlign: TextAlign.justify,),                        
subtitle: Text(posts[index].body,                        
textAlign: TextAlign.justify,),),
],),),),);        
},      
),);}