How to handle network image loading error in Flutter

Last updated on October 24, 2020 The Plumber Loading... Post a comment

This article shows you how to handle error network images in Flutter.

If you use Image.network() to display an online image and that image is broken (404 not found, 404 forbidden, etc), you can use the errorBuilder property to render something instead, such as a default image, text…

Example

Container(
        width: double.infinity,
        height: 300,
        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: Text('Whoops!', style: TextStyle(fontSize: 30),),
            );
          },
        ),
),

Hope this helps 🙂

Related Articles

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x