-1.3 C
New York
Wednesday, February 1, 2023

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:

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

Advertisements

Related Articles

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Latest Articles