Open In App
Related Articles

HTTP GET Response in Flutter

Like Article
Save Article
Report issue

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. To perform a GET request in Flutter we need to follow 3 steps –

  1. Get the latest dart Http package.
  2. Enter the package in pubspec.yaml file in your dependencies section.
  3. Import the package in your main.dart file.

In the URL part, you can enter your backend Rest API link.


  • You can also divide the main.dart file in various sections but for simplicity, it is being performed only in one file.
  • A random JSON GET request URL from the Internet has been used here, which can be replaced with any backend Restful API.


import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
//Creating a class user to store the data;
class User {
  final int id;
  final int userId;
  final String title;
  final String body;
class HomePage extends StatefulWidget {
  _HomePageState createState() => _HomePageState();
class _HomePageState extends State<HomePage> {
//Applying get request.
  Future<List<User>> getRequest() async {
    //replace your restFull API here.
    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.
    return users;
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        appBar: AppBar(
          title: Text("Http Get Request."),
          leading: Icon(
        body: Container(
          padding: EdgeInsets.all(16.0),
          child: FutureBuilder(
            future: getRequest(),
            builder: (BuildContext ctx, AsyncSnapshot snapshot) {
              if ( == null) {
                return Container(
                  child: Center(
                    child: CircularProgressIndicator(),
              } else {
                return ListView.builder(
                  itemBuilder: (ctx, index) => ListTile(
                    title: Text([index].title),
                    subtitle: Text([index].body),
                    contentPadding: EdgeInsets.only(bottom: 20.0),


Last Updated : 17 Jan, 2023
Like Article
Save Article
Share your thoughts in the comments
Similar Reads