Search code examples
flutterplaceholdernetworkimageview

networkImage error handling/placeholder not working


How can i add a network handling/placeholder in networkimage when the url return null?

  body: Center(
        child: ListView.builder(
            itemCount: users.length,
            itemBuilder: (BuildContext context, int index) {
              User user = users[index];
              return ListTile(
                  title: Text(user.firstName),
                
                  subtitle: Text(user.role),
                  leading: CircleAvatar(
                    backgroundImage: NetworkImage(user.avatar.toString()),
                     errorWidget: (context, url, error) =>  //this part not working
                     Icon(Icons.error),
                  ),
                  onTap: () {});
            })));

Solution

  • There are two way to show network image with error handling:

    One: use Image.network

    Container(
              clipBehavior: Clip.antiAlias,
              height: 100,
              decoration: BoxDecoration(shape: BoxShape.circle),
              child:
                  Image.network('wawdasda', errorBuilder: (context, object, trace) {
                return Container(
                  color: Colors.red,
                );
              }),
            )
    

    Two:

    Container(
              clipBehavior: Clip.antiAlias,
              height: 100,
              decoration: BoxDecoration(shape: BoxShape.circle),
              child: Image(
                errorBuilder: (context, object, trace) {
                  return Container(
                    color: Colors.red,
                  );
                },
                image: NetworkImage(
                  'asdasdas',
                ),
              ),
            )