首页 > 解决方案 > Flutter futureBuilder 正在渲染未知的褪色卡片

问题描述

在我的应用程序中,我使用了一个从网络搜索的部分,我使用了 future 和 futureBuilder 来显示结果,但碰巧在真实设备上结果不是预期的(未知结果),但在模拟器上,代码块正在工作预期的。

下面是代码

      Expanded(
        child: Container(
          width: double.infinity,
          height: double.infinity,
          child: FutureBuilder<dynamic>(
            future: myHelper.fetchFromServer (params), //JSON from network
            builder: (BuildContext context, AsyncSnapshot<dynamic> snapshot) {
              List<Widget> children;
              if (snapshot.hasData) {
                var result = snapshot.data;
                if(result['type']=='success') {
                  List <Widget> list = new List();
                  List<dynamic> feedback = result['feedback'];
                  for(var i=0; i<feedback.length; i++){
                    var bus = feedback[i];
                    list.add(SharedBusCard (
                        name:bus['bus_name'],
                        rate:bus['bus_rate'],
                        seats:bus['bus_seats'],
                        onTap: () {
                          //When taped
                        }
                    ));
                    list.add(SizedBox(height: 15));
                  }
                  children = list;
                  return ListView(children: children);
                }
                else{
                  children = <Widget>[
                    Icon(
                      Icons.info_outline,
                      color: Colors.green,
                      size: 60,
                    ),
                    Padding(
                      padding: const EdgeInsets.only(top: 16),
                      child: Text('No result found'),
                    )
                  ];
                }
              } else if (snapshot.hasError) {
                children = <Widget>[
                  Icon(
                    Icons.error_outline,
                    color: Colors.red,
                    size: 60,
                  ),
                  Padding(
                    padding: const EdgeInsets.only(top: 16),
                    child: Text('There was an error, try again'),
                  )
                ];
              } else {
                children = <Widget>[
                  SizedBox(
                    child: CircularProgressIndicator(),
                    width: 60,
                    height: 60,
                  ),
                  const Padding(
                    padding: EdgeInsets.only(top: 16),
                    child: Text('Searching.....'),
                  )
                ];
              }

              return Center(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: children,
                ),
              );


            },
          ),
        ),
      ),

手机输出

错误结果

和模拟器上的输出

在此处输入图像描述

请帮我解决这个问题,我不知道哪里出错了,我很陌生。谢谢你的帮助。

标签: flutterflutter-layoutflutter-futurebuilder

解决方案


你设置上网权限了吗?在调试模式下,您在模拟器上具有 Internet 权限,但对于手机,您必须为 android 和 iOS 设备设置 Internet 权限。

https://flutter.dev/docs/development/data-and-backend/networking


推荐阅读