How to show loading on connectionState when using snapShot Image.network. and have no connection to-CodePudding

I have a snapSHot of user profile Image.network but when I doesn’t connect to the internet it show the error here

image:

Instead of Text('loading') How can I fix that problem

code:

          StreamBuilder<User?>(
              stream: authBloc.currentUser,
              builder: (context, snapshot) {
                if (snapshot.connectionState == ConnectionState.waiting ||
                    !snapshot.hasData) {
                  const Text('loading');
                       }
                       return ClipRRect(
                            borderRadius: BorderRadius.circular(0.0),
                            child: Image.network(snapshot
                                  .data!.photoURL!
                                  .replaceFirst('s96', 's400')),
                          ) 
                       }

CodePudding user response：

You can try:

builder: (context, snapshot) {
    if (snapshot.hasData) { // when data loaded
        return ClipRRect(
            borderRadius: BorderRadius.circular(0.0),
            child: Image.network(snapshot.data.photoURL
                    .replaceFirst('s96', 's400')),
            );
    }else if (snapshot.hasError){
         return Text("Error"); // if has error
    }
    return CircularProgressIndicator(); // waiting to load                    
},

You can use cached_network_image in your case too:

example from doc

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

CodePudding user response：

you have to add loader when you receive error no connection to internet