This is my code in which I am fetching data from an API, now the problem I am getting here is that When some of my network images are not loading then the problem is displayed on the mobile screen as shown in the image below

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

I want that the data which is already loaded should be shown and the remaining data keeps loading in back.

CodePudding user response：

You can use Image class' errorBuilder method for handling errors, for example:

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

You can put any widget for it not only Image.asset(), and you can use loadingBuilder for show image is loading. https://www.youtube.com/watch?v=7oIAs-0G4mw link from Widgets of the week flutter youtube channel. And another useful link to flutter api https://api.flutter.dev/flutter/widgets/Image-class.html

CodePudding user response：

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