Fetching Data from APIs in Flutter

Fetching data from an API is a fundamental skill in Flutter development, enabling apps to display dynamic content from external data sources. This article explains the step-by-step process of fetching data in Flutter, with practical code snippets and a focus on best practices.

Understanding the Basics of Fetching Data

When working with APIs, data is usually fetched using the HTTP protocol. In Flutter, the http package simplifies this process by providing methods to make GET requests, handle responses, and process JSON data.

Steps to Fetch Data from an API in Flutter

1. Add the HTTP Package to Your Project

To make API requests, include the http package in your pubspec.yaml file:

dependencies:
  http: ^0.15.0

Run flutter pub get to install the package.

2. Import the HTTP Package

Add the following import statement at the top of your Dart file:

dart

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

3. Make a GET Request

Use the http.get method to fetch data from the API.

Example:

Future<void> fetchData() async {
  final url = Uri.parse('https://jsonplaceholder.typicode.com/posts');
  try {
    final response = await http.get(url);

    if (response.statusCode == 200) {
      // Parse the JSON data
      List<dynamic> data = jsonDecode(response.body);
      print(data); // Output the data
    } else {
      print('Failed to load data: ${response.statusCode}');
    }
  } catch (e) {
    print('Error occurred: $e');
  }
}

4. Display Fetched Data in the UI

To display the data, use Flutter's stateful widgets. The fetched data can be stored in a variable and updated using setState.

Example:

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

class FetchDataExample extends StatefulWidget {
  @override
  _FetchDataExampleState createState() => _FetchDataExampleState();
}

class _FetchDataExampleState extends State<FetchDataExample> {
  List<dynamic> data = [];

  Future<void> fetchData() async {
    final url = Uri.parse('https://jsonplaceholder.typicode.com/posts');
    try {
      final response = await http.get(url);
      if (response.statusCode == 200) {
        setState(() {
          data = jsonDecode(response.body);
        });
      } else {
        print('Failed to load data: ${response.statusCode}');
      }
    } catch (e) {
      print('Error occurred: $e');
    }
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Fetch Data Example'),
      ),
      body: data.isEmpty
          ? Center(child: CircularProgressIndicator())
          : ListView.builder(
              itemCount: data.length,
              itemBuilder: (context, index) {
                return ListTile(
                  title: Text(data[index]['title']),
                  subtitle: Text(data[index]['body']),
                );
              },
            ),
    );
  }
}

5. Handle Errors Gracefully

Implement error handling to manage API failures or network issues. Use try-catch blocks and display meaningful messages to users.

Example:

if (response.statusCode == 404) {
  print('Resource not found');
} else if (response.statusCode >= 500) {
  print('Server error. Please try again later.');
} else {
  print('Unexpected error: ${response.statusCode}');
}

6. Optimize with Loading Indicators

Show a loading indicator while fetching data to enhance user experience.

Example:

body: isLoading
    ? Center(child: CircularProgressIndicator())
    : ListView.builder(
        itemCount: data.length,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text(data[index]['title']),
            subtitle: Text(data[index]['body']),
          );
        },
      ),