如何拉刷新 FutureBuilder<List<Data>> ();页面颤动？

Question

我在这里尝试使用 FutureBuilder 作为我的列表，但我无法通过 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...'));
            }
          }),
    );

我想要新鲜的这些小部件以及

刷新照片（）

AddBanners(userId: snapshot.data!),

DealsOfTheDay(userId: snapshot.data!)

Answer 1

如果您正在寻找拉动刷新。在您想要的屏幕上使用“RefreshIndicator”小部件包装您的小部件。

这是我的主屏幕的示例，它需要刷新。

    @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
            ),
          ),
        ),
      ),
    );
  }

将刷新指示器添加到小部件后，您需要添加 _refresh 函数，该函数将包含您要重新加载的所有 api。

  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);
  }

瞧。现在您的用户可以在页面中重新加载数据并获取新状态。 希望这能回答您的问题。

如果以上不是你想要的。您可以在未来的构建器中使用 setState()。例如看下面的代码：

 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() 将使用新值重建小部件。

Answer 2

您可以简单地在主屏幕中使用 setState((){}); 它将重建屏幕中的所有 futureBuilder 小部件并检索新数据