Question 408245 in Flutter Question posted in
The official Flutter documentation can be found here.

How to Use FutureBuilder with Provider in Flutter Without Recomputing Future on Every Build?

I’m working with Flutter and trying to use a FutureBuilder to fetch data based on a state managed by the Provider package. The challenge I’m facing is that my Future depends on a state that I can access through Provider.of<MyData>(context).

Here’s the problem:

  1. I need to initialize the Future in the constructor of my widget, but since the constructor does not have access to the build context, I can’t retrieve the state from the provider.
  2. If I try to create the Future inside the build method, it gets recomputed every time the widget rebuilds, which is not ideal for performance.

My Current Approach:

class MyWidget extends StatelessWidget {
  final Future<DataType> future;

  MyWidget() : future = fetchData(); // This can't access context

  @override
  Widget build(BuildContext context) {
    final myData = Provider.of<MyData>(context); // Need to use myData here

    // Creating the Future here causes it to recompute on every build
    final future = fetchDataBasedOn(myData);

    return FutureBuilder<DataType>(
      future: future,
      builder: (context, snapshot) {
        // Build your widget based on snapshot
      },
    );
  }
}

My Question:
How can I manage the Future in a way that it only computes once, and still be able to access the provider’s state? Is there a recommended pattern for achieving this with Flutter’s FutureBuilder and Provider?

Any suggestions or examples would be greatly appreciated!

Tags:

2

Answers


  1. 0

    you can use init() method to manage future and it compute only once and also you can access provider state.

    Login or Signup to reply.
  2. 0

    You can use initState, initState is used to initialize the Future only once when the widget is created.

    example :

    Future<DataType>? future;

void initState() {
    super.initState();

    WidgetsBinding.instance.addPostFrameCallback((callback) {
      final data = Provider.of<YourProvider>(context);
      setState(() {
        future = fetchData(data);
      });
    });
  }

    then use the future in the FutureBuilder that you use.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search