Making HTTP Calls in Flutter: A Guide to Calling REST APIs

I am going to expect you have a new flutter and from that we will start modifying the code. To make it simple, I will divide the complete article into multiple small steps which will help you in following.

Step 1

First of all we need to use the package called http. In order to use that you have to add the package name to the file pubspec.yaml file

https://pub.dev/packages/http

pubspec.yaml

name: http_call_demo
description: A new Flutter project.
version: 1.0.0+1

environment:
  sdk: ">=2.7.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.0
  http: ^0.13.4   # Added

dev_dependencies:
  flutter_test:
    sdk: flutter

flutter:
  uses-material-design: true

Step 2

Let’s clear the main.dart file and write some code.

main.dart

import 'package:flutter/material.dart';

// This file will be created in next step
import 'home.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Flutter Demo',
      home: HomePage(), 
    );
  }
}

Step 3

Let’s make the home screen where we will be doing most of the thing.

home.dart

import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  List users = [];
  bool isRemoteCallCompleted = false;

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Http Call'),
      ),
      body: Visibility(
        visible: isRemoteCallCompleted,
        replacement: const CircularProgressIndicator(),
        child: const Text('Show Remote Data'),
      ),
    );
  }

  Future<void> fetchRemoteData() async {
    setState(() {
      isRemoteCallCompleted = false;
    });
    // Make Api Call Here
    setState(() {
      isRemoteCallCompleted = true;
    });
  }
}

Step 4

Let’s write the code for making api call and store it’s response in the users variable.

home.dart

import 'package:http/http.dart' as http; 
// Add this line to the top

Future<void> fetchRemoteData() async {
  setState(() {
    isRemoteCallCompleted = false;
  });
  // Make Api Call Starts
  const uri = 'https://randomuser.me/api/?results=50';
  final url = Uri.parse(uri);
  final response = await http.get(url);
  if (response.statusCode == 200) {
    final stringResponse = response.body;
    final jsonResponse = jsonDecode(stringResponse);
    final data = jsonResponse['data'];
    if (data is List) {
      users = data;
    } else {
      print('Invalid Response');
    }
  } else {
    print('Invalid Status Code');
  }
  // Make Api Call Ends
  setState(() {
    isRemoteCallCompleted = true;
  });
}

Step 5

Full code

home.dart

import 'dart:convert';

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

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  List users = [];
  bool isRemoteCallCompleted = false;
  @override
  void initState() {
    super.initState();
    fetchRemoteData();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Http Call'),
      ),
      body: Visibility(
        visible: isRemoteCallCompleted,
        replacement: const CircularProgressIndicator(),
        child: const Text('Show Remote Data'),
      ),
    );
  }

  Future<void> fetchRemoteData() async {
    setState(() {
      isRemoteCallCompleted = false;
    });
    // Make Api Call Starts
    const uri = 'https://randomuser.me/api/?results=50';
    final url = Uri.parse(uri);
    final response = await http.get(url);
    if (response.statusCode == 200) {
      final stringResponse = response.body;
      final jsonResponse = jsonDecode(stringResponse);
      final data = jsonResponse['data'];
      if (data is List) {
        users = data;
      } else {
        print('Invalid Response');
      }
    } else {
      print('Invalid Status Code');
    }
    // Make Api Call Ends
    setState(() {
      isRemoteCallCompleted = true;
    });
  }
}