Home > Mobile >  How can I reload a FutureBuilder widget after using Navigator.pop() in another one
How can I reload a FutureBuilder widget after using Navigator.pop() in another one

Time:06-19

So basically I have a simple widget that uses FutureBuilder to build my widget containing a List of data that can be modified in the database and here is the code:

ListView(
      scrollDirection: Axis.vertical,
      shrinkWrap: true,
      children: <Widget>[
        Flexible(
            child: FutureBuilder<List<Incoming>>(
          future: UserApiService.getAllHelp(),
          builder: (context, snapshot) {
            if (snapshot.hasError) {
              return Text('Error ${snapshot.error}');
            }
            if (snapshot.hasData) {
              streamController.sink.add(snapshot.data!.length);
              return gridView(snapshot);
            }
            return circularPogress();
          },
        )),
      ],
    );

The gridView method is just a Widget that does the design (code below)

gridView(AsyncSnapshot<List<Incoming>> snapshot) {
    return Padding(
      padding: const EdgeInsets.all(5.0),
      child: Column(
        children: snapshot.data!.map(
          (incoming) {
            return GestureDetector(
              child: GridTile(
                child: cardUI(incoming),
              ),
              onTap: () {
                goToProceed(context, incoming);
              },
            );
          },
        ).toList(),
      ),
    );
  }

And goToProceed is the another method that opens a dialog having 2 buttons (code below)

goToProceed(BuildContext context, Incoming incoming){
    Navigator.push(
      context,
      MaterialPageRoute(
        fullscreenDialog: true,
        builder: (BuildContext context) =>
          HelperProceedIncom(incoming: incoming)
      )
    );
  }

In the second widget containing the 2 buttons, one of the buttons is updating the data of one item of the list and the second button is just closing the dialog using Navigator.pop(). When closing the dialog, I want the main widget (the one that contains the FutureBuilder) to be refreshed and display the new data.

How can I do it and Thank you in advance.

CodePudding user response:

On the click of the button just set state and the future builder will refresh. If you want to refresh it in the same class as where you added the route navigation use then

goToProceed(BuildContext context, Incoming incoming){
    Navigator.push(
      context,
      MaterialPageRoute(
        fullscreenDialog: true,
        builder: (BuildContext context) =>
          HelperProceedIncom(incoming: incoming)
      )
    ).then(val){
   setState((){});
   };
  }
  • Related