Skip to content
Related Articles
Open in App
Not now

Related Articles

HTTP GET Response in Flutter

Improve Article
Save Article
  • Difficulty Level : Expert
  • Last Updated : 17 Jan, 2023
Improve Article
Save Article

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),

My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!