How to Pull Refresh FutureBuilder<List<Data>> (); page in flutter?

Question

here im try to use FutureBuilder for my list but I can't refresh by on pullRefresh

@override
  Widget build(BuildContext context) {
 
    return RefreshIndicator(

  onRefresh: _refreshPhotos, // fatch snapshot.data!
      child: FutureBuilder<String>(
          future: userId as Future<String>,
          builder: (context, AsyncSnapshot<String> snapshot) {
            if (snapshot.hasData) {
              return LayoutBuilder(builder: (context, constraints) {
                return ListView(
                    scrollDirection: Axis.vertical,

                     children: [

              AddBanners(userId: snapshot.data!), // future builder,it fatches data from api
               DealsOfTheDay(userId: snapshot.data!), //future builder, , it fatches data from api

                  ]);
              });

            } else {
              return Center(child: JumpingText('Loading...'));
            }
          }),
    );

I want fresh these widgets along with

refreshPhotos()

AddBanners(userId: snapshot.data!),

DealsOfTheDay(userId: snapshot.data!)

Solution

If you are looking for pull to refresh. Wrap your widgets with 'RefreshIndicator' widget on your desired screen.

Here is an example of my home screen which has pull to refresh.

    @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: _con.scafoldKey,
      body: WillPopScope(
        onWillPop:() => DeviceUtils.instance.onWillPop(),
        child: SafeArea(
          child: Container(
            color: ColorUtils.themeColor,
            child: RefreshIndicator( //Just add this to your screen 
              color: ColorUtils.themeColor,
              key: _con.refreshIndicatorKey,
              strokeWidth: 4,
              displacement: 80,
              onRefresh: _refresh, //this is a function which you need to place under your home view state
              child: SingleChildScrollView(
                physics: const BouncingScrollPhysics(parent: AlwaysScrollableScrollPhysics()),
                child: Container(
                  color: Colors.white,
                  child: /// some more widgets
            ),
          ),
        ),
      ),
    );
  }

After adding the refresh indicator to your widgets, you need to add the _refresh function which will have all your api's that you want to reload.

  Future<Null> _refresh() async{
  //these two are my api's that i want to reload everytime an user pulls to refresh screen. You have to add your own apis here.
    _con.getProfile(context); 
    _con.getUpcoming(context);
  }

Voila. Now your user can reload data in the page and get the new state. Hope this answers your question.

If the above is not what you want. You can use setState() inside your future builder. See the code below for example:

 class _MyHomePageState extends State<MyHomePage> {
    
    Future<List<String>>  _myData = _getData(); //<== (1) here is your Future
    
    @override
          Widget build(BuildContext context) {
            var futureBuilder = new FutureBuilder(
              future: _myData; //<== (2) here you provide the variable (as a future)
              builder: (BuildContext context, AsyncSnapshot snapshot) {
                switch (snapshot.connectionState) {
                  case ConnectionState.none:
                  case ConnectionState.waiting:
                    return new Text('loading...');
                  default:
                    if (snapshot.hasError)
                      return Column(
                      children: [
                        Icon(Icons.error),
                        Text('Failed to fetch data.'),
                        RaisedButton(
                          child: Text('RETRY'), 
                          onPressed: (){
                            setState(){
                                _myData = _getData(); //<== (3) that will trigger the UI to rebuild an run the Future again
                            }
                          },
                        ),
                      ],
                    );
                    else
                      return createListView(context, snapshot);
                }
              },
            );
    
            return new Scaffold(
              appBar: new AppBar(
                title: new Text("Home Page"),
              ),
              body: futureBuilder,
            );
          }

setState() will rebuild the widget with new values.

Comments

[Alan Bosco]

Do you want to call the future function again ? on refresh? is that you want?

[HiPradeep]

yes! i have multiple api list on same page, and want to refresh all list on Pull down

[Anmol Mishra]

stackoverflow.com/questions/57972505/…

[HiPradeep]

great answer, I just update the question please purview

[Md. Kamrul Amin]

If you do not know how to implement it in your code. You can check the following link, This guy posted a very good answer about the same topic as yours. stackoverflow.com/a/62206884/6067774 hope this helps you.