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

Question

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.

Does this answer your question? [How to fix HttpException: Connection closed before full header was received](https://stackoverflow.com/questions/55879550/how-to-fix-httpexception-connection-closed-before-full-header-was-received) — Md. Yeasin Sheikh, Feb 14 '22 at 14:41

score 0 · Accepted Answer · answered Feb 14 '22 at 14:49

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

score 0 · Answer 2 · answered Feb 14 '22 at 16:40

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

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

2 Answers2