/flutter-future-builder

Primary LanguageC++

Flutter FutureBuilder Example 🚀

Welcome to the Flutter FutureBuilder Example project! This repository demonstrates how to efficiently handle asynchronous operations using the FutureBuilder widget in Flutter. The FutureBuilder widget simplifies the process of working with Futures and updating your UI when data becomes available.

Table of Contents 📋

Getting Started 🚀

Follow these steps to get this Flutter project up and running on your local machine:

  1. Clone this repository:

    git clone https://github.com:TrekHub/flutter-future-builder.git

Usage 🧩

The core concept behind FutureBuilder is to wrap a Future and provide a callback function (builder) that describes what to display based on the current connection state of the Future. Here's a simplified breakdown:

  1. Define a Future Function: You start by defining a function that returns a Future. This function represents the asynchronous operation you want to perform.

  2. Wrap the Future: In your Flutter UI, you wrap the Future function in a FutureBuilder widget and pass the Future function to the future property.

  3. Handle Connection States: Inside the builder property of FutureBuilder, you access the AsyncSnapshot object, which provides information about the current state of the Future.

  4. Display Content: Based on the connection state, you can display different UI elements. For example:

    • Display a loading indicator while waiting for data (ConnectionState.waiting).
    • Show the fetched data when it's available (ConnectionState.done).
    • Handle errors gracefully (ConnectionState.error).

Example Code Snippet 📝

Here's a simplified example of using FutureBuilder in Flutter:

FutureBuilder<String>(
  future: fetchDataFromAPI(),
  builder: (context, snapshot) {
    switch (snapshot.connectionState) {
      case ConnectionState.none:
        return const Text('None');
      case ConnectionState.waiting:
        return const CircularProgressIndicator();
      case ConnectionState.active:
        return const Text('Active');
      case ConnectionState.done:
        return Text(
          'Data: ${snapshot.data}',
          style: TextStyle(
            fontSize: 18,
            fontWeight: FontWeight.bold,
          ),
        );
    }
  },
)