Fetch Data from REST API

Create Free Backend With Appwrite

Introduction

Fetching data from a REST API is a fundamental task in modern app development. It allows your app to interact with external data sources, providing dynamic content to users. This guide covers how to fetch data from a REST API in Flutter, including setup, making network requests, and handling responses.

Setup

First, add the http package to your pubspec.yaml file to make HTTP requests:

dependencies:
  flutter:
    sdk: flutter
  http: ^1.2.1

Example 1: Posts Listing App

In this example below, you will learn how to fetch data from a REST API and display it in your Flutter app.

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

void main() {
  runApp(MyApp());
}

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

class PostList extends StatefulWidget {
  @override
  _PostListState createState() => _PostListState();
}

class _PostListState extends State<PostList> {
  List<dynamic> _postData = [];

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

    if (response.statusCode == 200) {
      // If the server returns a 200 OK response, parse the JSON.
      setState(() {
        _postData = jsonDecode(response.body);
      });
    } else {
      // If the server did not return a 200 OK response,
      // throw an exception.
      throw Exception('Failed to load data');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Fetch Data Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: fetchData,
              child: const Text('Fetch Data'),
            ),
            const SizedBox(height: 20),
            Expanded(
              child: ListView.builder(
                itemCount: _postData.length,
                itemBuilder: (context, index) {
                  return ListTile(
                    title: Text(_postData[index]['title']),
                  );
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Run Online

Challenges

Create a motivational quotes app that fetches quotes from a REST API and displays them in a list. Here is URL to fetch quotes from:

https://jsonguide.technologychannel.org/quotes.json