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.
Follow these steps to get this Flutter project up and running on your local machine:
-
Clone this repository:
git clone https://github.com:TrekHub/flutter-future-builder.git
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:
-
Define a Future Function: You start by defining a function that returns a
Future
. This function represents the asynchronous operation you want to perform. -
Wrap the Future: In your Flutter UI, you wrap the Future function in a
FutureBuilder
widget and pass theFuture
function to thefuture
property. -
Handle Connection States: Inside the
builder
property ofFutureBuilder
, you access theAsyncSnapshot
object, which provides information about the current state of the Future. -
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).
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,
),
);
}
},
)