How to Fetch Data from Internet? Flutter Tutorial

Hey Guys, In this article I will teach you how to fetch data from the internet in Flutter. We will be using the HTTP package to get the data from the API and then get the required data by decoding the response in JSON format.

I have also made a Speed coding video showing the process. You can also follow that.

Table of Contents:

1. Setting up the Flutter Project
2. Fetching the Data from API
3. Building the UI

Now let’s get started.

Setting up the Flutter Project

First of all, we need to create a new Flutter project. I will be using Vscode in this tutorial.

Go to View -> Command Palette -> Flutter: New Application Project

Next, Removing all the default codes from the main.dart.

And adding all the necessary codes, we remain with the following codes in main.dart

main.dart

import 'package:flutter/material.dart';
import 'MyHomePage.dart';
void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

We will be creating a new file MyHomePage.dart in the same location as main.dart

Make a stateful widget MyHomePage in MyHomePage.dart

MyHomePage.dart

import 'package:flutter/material.dart';
class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Container(
      
    );
  }
}

and Import MyHomePage.dart file and Add MyHomePage() in main.dart

The next step will be to find the API from where we will be fetching the data. For that purpose, I will be using JSONPlaceholder – Free Fake REST API (typicode.com) It’s an open-source REST API that contains useful fake resources like blog posts, comments, photos, users, etc.

From here we will be getting all the data. Make sure you have installed the JSON Viewer Pro extension on your browser. This extension will be very helpful to understand the structure of the data and to get the path to reach the individual elements in the JSON data.

Fetching the Data from API

To get the data from the API, we will be using the HTTP package from http | Dart Package (pub.dev)

We will add the HTTP package to pubspec.yaml file as specified in Readme in the site.

After adding the name of the package, we will do flutter pub get in the terminal or simply CTRL + S.

Now we will create an asynchronous function getData() inside MyHomePage() class then we will get the data from the API and store those data into the variable response.

getData() async {
    var url = Uri.parse('https://jsonplaceholder.typicode.com/todos/1');
    http.Response response = await http.get(url);
    

print(response.statusCode);

We will print response.StatusCode first to see if we are getting the data from the URL. 200 means we are getting the data but if we get anything but 200, that means we are not receiving the data or there are other errors. That’s why it is important to check first.

We will run the function getData() inside initState. InitState is built first in the runtime before any widgets. So getData() will be called at the very start when the program runs.

@override
  void initState() {
    super.initState();
    getData();
  }

If we are getting 200, then we will go ahead and use jsonDecode to decode the data from the API which we fetch from response.body

For that purpose, we will import the file which will let us use the decoder.

import 'dart:convert';

We will be storing the decoded data from response.body to results.

Next, we will be declaring different variables to store the values which we will get from the API

var userId;  

var title;  

var completed;

For example, we will store the decoded value of userId to the declared userId variable.

After that we will store the value by initializing those variables by using “this.”

All those values will be initialized inside setState(){}. The reason behind this is that the values of those variables will be changing accordingly to the values we will get from the internet.

class _MyHomePageState extends State<MyHomePage> {
  
  var userId;
  var title;
  var completed;
  getData() async {
    var url = Uri.parse('https://jsonplaceholder.typicode.com/todos/1');
    http.Response response = await http.get(url);
    //print(response.statusCode);
    if (response.statusCode == 200) {
      var results = jsonDecode(response.body);
      setState(() {
        this.userId = results['userId'];
        this.title = results['title'];
        this.completed = results['completed'];
      });
    } else {
      print('error fetching the data');
    }
  }

Be sure that we are getting the data by simply printing a variable as shown in the example.

Building the UI of the App

Next step will be Building the UI of the Application.

I have a rough UI in mind which I will be building. You can find the UI making in the video from time 5:33

Final thoughts:

I will summarize the whole process of fetching the data from the internet in the points below.

• Add the HTTP package from Pub.dev
• Make a request to API using HTTP package
• Store the response into a custom variable response.
• Fetch and decode the data in JSON format
• Display the data

With this, We have successfully fetch the data from the internet.

You can find the whole code on Github.

If you have any questions, feel free to ask in the comments below.

Thanks for reading. Have a good day.

---

FAQ

---