Fetching Data from REST APIs in Flutter with http Package Basics

Introduction

Building Flutter apps that interact with remote servers is a common requirement. Whether you need to display user profiles, fetch posts, or integrate with third-party services, understanding how to work with REST APIs via the http package is essential. In this tutorial, you’ll learn how to add the http api library to your project, model JSON data in Dart, perform http requests, and render results in a simple Flutter UI.

Adding the http Package

First, include the http package in your pubspec.yaml dependencies:

dependencies:
  flutter:
    sdk: flutter
  http

Then run:

flutter pub get

This installs a robust http client library for making GET, POST, and other HTTP requests against RESTful endpoints.

Creating a Data Model

When the server returns JSON, Dart’s strong typing helps avoid runtime errors. Suppose you’re fetching a list of posts from JSONPlaceholder (https://jsonplaceholder.typicode.com/posts). Define a Post class and a factory constructor for JSON deserialization:

class Post {
  final int id;
  final String title;
  final String body;

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

  factory Post.fromJson(Map<String, dynamic> json) {
    return Post(
      id: json['id'] as int,
      title: json['title'] as String,
      body: json['body'] as String,
    );
  }
}

This model will map each JSON object to a Dart instance, making it easy to work with structured data.

Fetching Data from the REST API

With your model in place, create a function that performs an http GET call. The example below demonstrates how to fetch posts asynchronously and parse the JSON array into a List:

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

Future<List<Post>> fetchPosts() async {
  final uri = Uri.parse('https://jsonplaceholder.typicode.com/posts');
  final response = await http.get(uri);
  if (response.statusCode == 200) {
    final List<dynamic> jsonList = json.decode(response.body);
    return jsonList.map((json) => Post.fromJson(json)).toList();
  } else {
    throw Exception('Failed to load posts: HTTP ${response.statusCode}');
  }
}

Key points:

• We parse the response body with json.decode.

• We transform each JSON object into a Post via fromJson().

• Errors trigger an exception, which you can catch and handle in your UI.

Displaying Data in Flutter

Next, hook the fetch function to your widget tree using FutureBuilder. This widget handles the loading, success, and error states for any future, including http api calls:

class PostListPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Posts')),
      body: FutureBuilder<List<Post>>(
        future: fetchPosts(),
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.waiting) {
            return Center(child: CircularProgressIndicator());
          } else if (snapshot.hasError) {
            return Center(child: Text('Error: ${snapshot.error}'));
          }
          final posts = snapshot.data ?? [];
          return ListView.builder(
            itemCount: posts.length,
            itemBuilder: (ctx, i) => ListTile(
              title: Text(posts[i].title),
              subtitle: Text(posts[i].body),
            ),
          );
        },
      ),
    );
  }
}

This snippet demonstrates:

• Using FutureBuilder to await the HTTP call.

• Displaying a loading spinner while the request is in flight.

• Handling errors with a simple message.

• Rendering a ListView of posts when data arrives.

Vibe Studio

Ready to accelerate your Flutter development? Vibe Studio, powered by Steve’s advanced AI agents, is a revolutionary no-code, conversational platform that empowers users to quickly and efficiently create full-stack Flutter applications integrated seamlessly with Firebase backend services. Ideal for solo founders, startups, and agile engineering teams, Vibe Studio allows users to visually manage and deploy Flutter apps, greatly accelerating the development process. The intuitive conversational interface simplifies complex development tasks, making app creation accessible even for non-coders.

Conclusion

You’ve now covered the fundamentals of fetching data in Flutter using the http package: adding the dependency, defining a data model, making async GET requests, and presenting the results in a responsive UI. This pattern applies to any REST API or http web service you need to integrate. As you progress, you can extend this by handling POST, PUT, DELETE operations, adding headers, authentication tokens, and advanced error recovery.