23. Fetching Data from the Web in Flutter

Screenshot from the tutorial

Fetching Data from the Web in Flutter

In today's digital age, data is the lifeblood of modern applications. Flutter, a popular UI toolkit for building natively compiled applications for mobile, web, and desktop from a single codebase, makes fetching data from the web intuitive and efficient. In this post, we’ll explore how to fetch data from the web in Flutter, all in a straightforward and practical manner.

Prerequisites

Before diving into the code, ensure that you have the following:

• Basic knowledge of Flutter and Dart.
• Flutter installed on your machine.
• An IDE or text editor set up for Flutter development, such as Visual Studio Code or Android Studio.

Setting Up Your Flutter Project

If you haven’t created a Flutter project yet, you can do so by running the following command in your terminal:

flutter create fetch_data_example
cd fetch_data_example

Open the project in your preferred IDE.

Adding Dependencies

To fetch data from the web, we’ll need the http package. This package simplifies making HTTP requests. You can add it to your pubspec.yaml file as follows:

dependencies:
  flutter:
    sdk: flutter
  http: ^0.14.0

After adding the dependency, run:

flutter pub get

Fetching Data from the Web

We will create a simple application that fetches data from a public API. For this example, we’ll use the JSONPlaceholder API, which provides fake data for testing and prototyping.

Writing the Data Fetching Function

Create a new Dart file named fetch_data.dart in the lib folder. In this file, we will define a function that fetches data from the API.

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

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

  if (response.statusCode == 200) {
    return json.decode(response.body);
  } else {
    throw Exception('Failed to load data');
  }
}

Displaying the Data

Next, we’ll modify the main.dart file to fetch and display the data. Replace the existing code in lib/main.dart with the following:

import 'package:flutter/material.dart';
import 'fetch_data.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Fetch Data Example',
      home: DataPage(),
    );
  }
}

class DataPage extends StatefulWidget {
  @override
  _DataPageState createState() => _DataPageState();
}

class _DataPageState extends State<DataPage> {
  late Future<List<dynamic>> futureData;

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Fetch Data from the Web'),
      ),
      body: Center(
        child: FutureBuilder<List<dynamic>>(
          future: futureData,
          builder: (context, snapshot) {
            if (snapshot.connectionState == ConnectionState.waiting) {
              return CircularProgressIndicator();
            } else if (snapshot.hasError) {
              return Text('Error: ${snapshot.error}');
            } else {
              final data = snapshot.data!;
              return ListView.builder(
                itemCount: data.length,
                itemBuilder: (context, index) {
                  return ListTile(
                    title: Text(data[index]['title']),
                    subtitle: Text(data[index]['body']),
                  );
                },
              );
            }
          },
        ),
      ),
    );
  }
}

Explanation of the Code

1. FutureBuilder: This widget is essential when dealing with asynchronous data in Flutter. It rebuilds the UI based on the connection state of a Future.

2. CircularProgressIndicator: This is displayed while data is being fetched.

3. Error Handling: If there’s an error during the fetch, it displays an error message.

4. ListView.builder: This is used to create a scrollable list of data items, with each item being a ListTile showing the post’s title and body.

Running the Application

To run your application, use the following command:

flutter run

Upon running, you should see a list of posts fetched from the JSONPlaceholder API.

Conclusion

Fetching data from the web in Flutter is straightforward thanks to the http package and Flutter's rich widget ecosystem. By following this tutorial, you have learned how to set up a Flutter application, fetch data from an API, and display it dynamically in your app.

Feel free to explore more about handling different kinds of data and integrating more complex APIs into your Flutter applications. Happy coding!

Another view from the tutorial

---

Connect with SkillBakery Studios

Explore more tutorials, tools, and resources:

• skillbakery.com
• Facebook
• X (Twitter)
• YouTube Channel

Posted by SkillBakery Studios