Flutter Provider and FutureBuilder

In Flutter, Provider is a state management solution that allows you to share data across the widget tree. It helps in simplifying the process of managing and updating state without the need for excessive callback chains.

On the other hand, FutureBuilder is a widget specifically designed to handle asynchronous operations in Flutter. It builds itself based on the latest snapshot of future’s data, allowing you to show different UI states during the asynchronous data loading process, such as loading, error, or success states.

Example:

Let’s say you have an application where you need to fetch data from an API and display it in your Flutter UI using Provider and FutureBuilder.

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

class DataProvider extends ChangeNotifier {
  Future fetchData() async {
    final response = await http.get(Uri.parse('https://api.example.com/data'));
    if (response.statusCode == 200) {
      // Decode the response body
      final data = json.decode(response.body);
      // Update the data in the provider
      // You can have more specific logic here
      // depending on your actual use case
      Provider.of<DataProvider>(context, listen: false).updateData(data);
    } else {
      throw Exception('Failed to load data');
    }
  }

  void updateData(dynamic data) {
    // Update the data and notify the listeners
    // This will trigger a rebuild of the UI
    // where the consumer is used
    // For simplicity, I'm assuming it's a list of strings
    _myData = data;
    notifyListeners();
  }

  List<String> get myData => _myData;
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (_) => DataProvider(),
      child: MaterialApp(
        title: 'Flutter Provider Demo',
        home: Scaffold(
          appBar: AppBar(title: Text('Demo')),
          body: Center(
            child: Consumer<DataProvider>(
              builder: (context, dataProvider, _) {
                // Check if the data is still loading
                if (dataProvider.myData == null) {
                  // Show a loading spinner or some other UI
                  return CircularProgressIndicator();
                } else {
                  // Data is available, show it in a ListView
                  return ListView.builder(
                    itemCount: dataProvider.myData.length,
                    itemBuilder: (context, index) {
                      return ListTile(
                        title: Text(dataProvider.myData[index]),
                      );
                    },
                  );
                }
              },
            ),
          ),
          floatingActionButton: FloatingActionButton(
            onPressed: () {
              // Fetch data from the API on button click
              Provider.of<DataProvider>(context, listen: false).fetchData();
            },
            child: Icon(Icons.refresh),
          ),
        ),
      ),
    );
  }
}

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

In this example, we create a DataProvider class that extends ChangeNotifier from the provider package. This class is responsible for fetching data from an API and updating the data in the provider. It also provides a getter method for accessing the data.

In the MyApp widget, we wrap the entire application with ChangeNotifierProvider, which allows us to access the DataProvider throughout the widget tree.

Inside the Consumer<DataProvider> widget, we provide a builder function that gets called whenever the data in the provider changes. If the data is still loading (i.e., dataProvider.myData is null), we show a loading spinner. Once the data is available, we build a ListView widget to display the data.

Finally, we have a FloatingActionButton that triggers the fetchData method in the DataProvider when clicked. This fetches the data from the API and updates the provider, leading to an automatic UI update.