How do I make a parent Widget know that its children's Futures completed?-CodePudding

I have a set of components that trigger a future on initState and render using a FutureBuilder. While they are still loading, they load a CircularProgressIndicator.

Because these futures complete at random times, I'm having a lot of flickering and the UX is terrible. Ideally, I should have 1 CircularProgressIndicator in the parent and only render the children once their futures are completed.

I cannot really transfer all these futures to the parent because these compoennts are dinamically generated from an API response. My only hope is to be able to "tell" the parents that their futures are completed.

I thought of using an InheritWidget to keep track of all futures. My problem is that, these futures start in initState and I don't have the BuildContext there to access the InheritWidget.

How do I make a parent Widget know that its children's Futures completed?

CodePudding user response：

You can pass a callback function to the child widget which is defined in the parent widget class.

class Parent extends StatelessWidget {

  void onFutureComplete() {
    // do after future completed
  }

  @override
  Widget build(BuildContext context) {
    return Child(
      onFutureComplete: onFutureComplete,
    );
  }
}

class Child extends StatelessWidget {

  final void Function() onFutureComplete;

  Child({
    this.onFutureComplete
  }

  void somethingHappens() {
    //await future here
    onFutureComplete();
  }