How to Handle Network Image Loading Error in Flutter

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, 403 forbidden, etc), you can use the errorBuilder property to render something instead, such as a default image, text…Advertisements

Example

This code snippet produces the app that is displayed in the screenshot above:

SizedBox(
        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: const Text(
                'Whoops!',
                style: TextStyle(fontSize: 30),
              ),
            );
          },
        ),
      ),

Hope this helps.

Further reading:

• Flutter: Create a Password Strength Checker from Scratch
• Flutter: Caching Network Images for Big Performance gains
• Flutter: Reading Bytes from a Network Image
• Flutter: Set an image Background for the entire screen
• Flutter: Display Text over Image without using Stack widget
• Flutter: Drawing an N-Pointed Star with CustomClipper

AdvertisementsYou can also take a tour around our Flutter topic page and Dart topic page to see the latest tutorials and examples.