How to Pull Refresh FutureBuilder<List<Data>> (); page in flutter? - 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!)

Answer 1

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.

Answer 2

you can simply use in your main screen
setState((){});
it will rebuild all of the futureBuilder widgets in your screen and retrieve new data