Open In App

HTTP GET Request in Flutter

Last Updated : 15 Jul, 2025
Comments
Improve
Suggest changes
16 Likes
Like
Report

There is no use of building a UI in Flutter until you integrate it with your backend. A GET request is used to extract useful data from your backend to use it in your application.

Steps to implement HTTP GET Request

Step 1 : Create a new Flutter Application

Create a new Flutter application using the command Prompt. To create a new app, write the below command and run it.

flutter create app_name

To know more about it refer this article: Creating a Simple Application in Flutter

Step 2 : Adding the Dependency

To add the dependency to the pubspec.yaml file, add http as a dependency in the dependencies part of the pubspec.yaml file, as shown below:

Dart 
dependencies:
      flutter:
        sdk: flutter
      http: ^1.3.0

Now run the below command in the terminal.

flutter pub get

Step 3 : Importing the Dependency

Use the below line of code in the main.dart file to import the http dependency.

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

Step 4 : Create user class

Create a User class to store the data fetched from the API.

Dart 
class User {
  final int id;
  final int userId;
  final String title;
  final String body;

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


Step 5 : Create HTTP GET Request method

Define a function to perform an HTTP GET request to fetch a list of Users.

Dart 
Future<List<User>> getRequest() async {
    //replace your restFull API here.
    String url = "https://jsonplaceholder.typicode.com/posts";
    final response = await http.get(Uri.parse(url));

    var responseData = json.decode(response.body);

    //Creating a list to store input data;
    List<User> users = [];
    for (var singleUser in responseData) {
      User user = User(
          id: singleUser["id"],
          userId: singleUser["userId"],
          title: singleUser["title"],
          body: singleUser["body"]);

      //Adding user to the list.
      users.add(user);
    }
    return users;
  }

Note: A random JSON GET request URL from the Internet has been used here, which can be replaced with any backend Restful API.


Step 6 : Build UI

Build UI for asynchronous operation.

Dart 
 FutureBuilder(
    future: getRequest(),
    builder: (BuildContext ctx, AsyncSnapshot snapshot) {
          if (snapshot.data == null) {
            return Container(
                  child: Center(
                        child: CircularProgressIndicator(),
                  ),
            );
          } else {
                return ListView.builder(
                      itemCount: snapshot.data.length,
                      itemBuilder: (ctx, index) => ListTile(
                            title: Text(snapshot.data[index].title),
                            subtitle: Text(snapshot.data[index].body),
                            contentPadding: EdgeInsets.only(bottom: 20.0),
                      ),
                    );
              }
        },
  ),

To know more about FutureBuilder in Flutter refer this article: Flutter – FutureBuilder Widget.

Complete source code

main.dart:

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    );
  }
}

//Creating a class user to store the data;
class User {
  final int id;
  final int userId;
  final String title;
  final String body;

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

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
//Applying get request.

  Future<List<User>> getRequest() async {
    //replace your restFull API here.
    String url = "https://jsonplaceholder.typicode.com/posts";
    final response = await http.get(Uri.parse(url));

    var responseData = json.decode(response.body);

    //Creating a list to store input data;
    List<User> users = [];
    for (var singleUser in responseData) {
      User user = User(
          id: singleUser["id"],
          userId: singleUser["userId"],
          title: singleUser["title"],
          body: singleUser["body"]);

      //Adding user to the list.
      users.add(user);
    }
    return users;
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        appBar: AppBar(
          title: Text("Http Get Request."),
          backgroundColor: Colors.green,
          foregroundColor: Colors.white,
        ),
        body: Container(
          padding: EdgeInsets.all(16.0),
          child: FutureBuilder(
            future: getRequest(),
            builder: (BuildContext ctx, AsyncSnapshot snapshot) {
              if (snapshot.data == null) {
                return Container(
                  child: Center(
                    child: CircularProgressIndicator(),
                  ),
                );
              } else {
                return ListView.builder(
                  itemCount: snapshot.data.length,
                  itemBuilder: (ctx, index) => ListTile(
                    title: Text(snapshot.data[index].title),
                    subtitle: Text(snapshot.data[index].body),
                    contentPadding: EdgeInsets.only(bottom: 20.0),
                  ),
                );
              }
            },
          ),
        ),
      ),
    );
  }
}

Output:



A

AkashDubey3
Improve
Article Tags :

Explore

Lightbox