Flutter Tutorial: http request and rest api

In this tutorial, I will show you how to make an HTTP request with a REST API using flutter and how you can display the data into a ListView so let's begin.

for this tutorial, we will not use a large Restful API, but we will use JSONPlaceholder, a fake API for testing and prototyping.

this is the link of JSONPlaceholder: https://jsonplaceholder.typicode.com/

now lets' start coding our app.

Create a new Project

first of all, create a new flutter project. and let's start by importing some library

import 'package:http/http.dart' as http;

import 'dart:convert';

import 'dart:async';

right after the material package, add these lines. it's possible that you can face a problem while adding the http package so to fix that open your pubspec.yaml file and add the Http dependence

   http: ^0.12.0

okay now that we have added our libraries, let's create the function that will fetch the data from the API

inside the State Class add a this function

 List data; //Declare a data variable of type List

//This function will alow us to connect to the server and fetch the data

  Future<String> getData() async{

    http.Response response = await http.get(

        Uri.encodeFull("https://jsonplaceholder.typicode.com/posts/"),

      headers:{

           //this line will only allow us to get json data

          "Accept": "application/json"

      }

    );

    

    //this part will refrech the layout for us and    

    setState(() {

      //this line will convert a json string into a list

      data = json.decode(response.body);

    });

  }

Now that we have created the function that will fetch the data for us, we need now to call this function before the app render the layout, for this, we will use initState function

  //this function allow us to fetch date before rendering the layout

  //if there is a network problem of course it will take some time

  @override

  void initState() {

    // TODO: implement initState

    this.getData();

  }

Okay now we have done 80% of the project, now we need to implement the layout and display the result.

  @override

  Widget build(BuildContext context) {

    return SafeArea(

      child: Scaffold(

        appBar: AppBar(

          title: Text("Rest Api"),

        ),

        body: Column(

          children: <Widget>[

            Expanded(

              child: ListView.builder(

                itemCount: (data == null) ? 0 : 30,

                itemBuilder: (BuildContext context, int index){

                  return Card(

                    child: Padding(

                      padding: const EdgeInsets.all(18.0),

                      child: Text(data[index]["title"]),

                    ),

                  );

                },

              ),

            )

          ],

        ),

      ),

    );

  }

and that's it, you can run the app and see the result, of course, you can use any other API that you want, but make sure to read the whole documentation because it may be different of this example.

this is the whole code of the app

import 'package:flutter/material.dart';

import 'package:http/http.dart' as http;

import 'dart:convert';

import 'dart:async';

void main() => runApp(MaterialApp(

  

  home: HttpApp(),

));

class HttpApp extends StatefulWidget {

  @override

  _HttpAppState createState() => _HttpAppState();

}

class _HttpAppState extends State<HttpApp> {

  List data;

  static String API_KEY = "DEMO_KEY";

  String Url = "https://api.nasa.gov/insight_weather/?api_key=${API_KEY}&feedtype=json&ver=1.0";

  //This function will alow us to connect to the server and fetch the data

  Future<String> getData() async{

    http.Response response = await http.get(

        Uri.encodeFull("https://jsonplaceholder.typicode.com/posts/"),

      headers:{

           //this line will only allow us to get json data

          "Accept": "application/json"

      }

    );

    

    //this part will refrech the layout for us and    

    setState(() {

      //this line will convert a json string into a list

      List data = json.decode(response.body);

    });

  }

  //this function allow us to fetch date before rendering the layout

  //if there is a network problem of course it will take some time

  @override

  void initState() {

    // TODO: implement initState

    this.getData();

  }

  @override

  Widget build(BuildContext context) {

    return SafeArea(

      child: Scaffold(

        appBar: AppBar(

          title: Text("Rest Api"),

        ),

        body: Column(

          children: <Widget>[

            Expanded(

              child: ListView.builder(

                itemCount: (data == null) ? 0 : 30,

                itemBuilder: (BuildContext context, int index){

                  return Card(

                    child: Padding(

                      padding: const EdgeInsets.all(18.0),

                      child: Text(data[index]["title"]),

                    ),

                  );

                },

              ),

            )

          ],

        ),

      ),

    );

  }

}

if you had any problem while coding the app you can put the problem in a comment and we will help you.