1.3 C
New York
Monday, February 26, 2024

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


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

        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(
                style: TextStyle(fontSize: 30),

Hope this helps.

Further reading:

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


Related Articles

Latest Articles