如何仅在 flutter 中从 rest Api 获取完整数据后才显示数据，或者如果未获取完整数据则隐藏错误

Question

这是我从 API 获取数据的代码，现在我遇到的问题是当我的某些网络图像未加载时，问题会显示在移动屏幕上如下图所示

         FutureBuilder(
              future: countriesListApi(),
              builder: (context,AsyncSnapshot<List<dynamic>> snapshot){
                if(snapshot.hasData && snapshot.connectionState==ConnectionState.done){
                  return SingleChildScrollView(
                      child: ListView.builder(
                        shrinkWrap: true,
                         scrollDirection: Axis.vertical,
                         physics: ScrollPhysics(),
                          itemCount:snapshot.data!.length,
                          itemBuilder: (context,index){
                            return Container(
                              width: MediaQuery.of(context).size.width*0.8,
                              height: 50,
                              child: Row(
                                children: [
                                  Image(
                                      image: NetworkImage(snapshot.data![index]['countryInfo']['flag']
                                      ),
                                    width: 50,
                                    height: 50,
                                  ),
                                  Text(
                                    snapshot.data![index]['country'],
                                  )
                                ],
                              ),
                            );
                          },
                        ),

                  );
                }
                else if(snapshot.connectionState==ConnectionState.waiting){
                  return Text('Loading....');
                }
                else if(snapshot.hasError){
                  return Text('Erorr');
                }
                else{
                  print(snapshot.error);
                  return Text("else returned");
                }
              },
            ),

我希望显示已加载的数据，其余数据继续加载。

Answer 1

您可以使用Image class的errorBuilder方法来处理错误，例如：

Image(
    image: NetworkImage('image path'),
    errorBuilder: (context, error, trace) => Image.asset('path for assets'),
),

您不仅可以为它放置任何小部件 Image.asset()，而且您可以使用 loadingBuilder 来显示正在加载的图像。 https://www.youtube.com/watch?v=7oIAs-0G4mw link 来自 Flutter youtube 频道的本周微件。还有一个有用的link扑apihttps://api.flutter.dev/flutter/widgets/Image-class.html

Answer 2

 use Image.network or you can use CachedNetworkImage yo can show place holder image til the image is loading or use error widget when error occurs 

 CachedNetworkImage(
    imageUrl: "http://via.placeholder.com/350x150",
    placeholder: (context, url) => CircularProgressIndicator(),
    errorWidget: (context, url, error) => Icon(Icons.error),
 ),



 child: Image.network(
  'https://www.kindacode.com/no-image.jpg', // this image doesn't
        
        exist
       fit: BoxFit.cover,
       errorBuilder: (context, error, stackTrace) {
        return Container(
          color: Colors.amber,
          alignment: Alignment.center,
          child: const Text(
            'Whoops!',
            style: TextStyle(fontSize: 30),
          ),
        );
      },
    ),

如何仅在 flutter 中从 rest Api 获取完整数据后才显示数据，或者如果未获取完整数据则隐藏错误

How to show data only after getting full data from restApi in flutter or hide the error if not getting full data

rest

dart

flutter