Flutter Handle Image Error Message If Image Not Load From Network

Hello friends, Flutter image widget has a errorBuilder function which invokes if there are any error occurs while loading image from network. The errorBuilder function handles image errors in flutter. When the errorBuilder functions invokes than it can return any Widget View at the place of Image to handle the image not loading error. We can display a text message or a error image as per our choice.

How we are handling image error?

We are using a local image as Error image. When we broke the image URL then Image widget fires errorBuilder message and we will render the local error image instead of network image.

Error Image:

Flutter Handle Image Error Message If Image Not Load From Network

1. Place the error image in your flutter app -> assets -> images folder.

2. Add images folder path in your pubspec.yaml file.

  assets:
    - assets/images/

Source code of my pubspec.yaml file:

 name: myapp
description: A new Flutter project.
publish_to: 'none' # Remove this line if you wish to publish to pub.dev
version: 1.0.0+1

environment:
  sdk: '> =3.0.5 < 4.0.0'
dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
    sdk: flutter

  cupertino_icons: ^1.0.2
  url_launcher: ^6.1.12
  flutter_widget_from_html_core: ^0.10.3
  google_fonts: ^5.1.0
  flutter_screenutil: ^5.8.4
  easy_rich_text: ^2.0.0

dev_dependencies:
  intl: ^0.18.0-nullsafety.2
  flutter_test:
    sdk: flutter

  flutter_lints: ^2.0.0

flutter:
  uses-material-design: true

  assets:
    - assets/images/
    - google_fonts/

3. Defining 2 Image URL variables in main.dart file. First with our Network image and other with erro image path.

final String mainImage =
      'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqulsBzAJFu9AOO1BOdDW26gGWmVpnTgInl_H9YEtDxCnuHva7o3Z6EGqTjoSJxFgVkpo1fYbPR6h-B4X5kkwc7lJyymDQGoRX3RdSfxIezLhLt9pVuNGusnG-CI9DAldqAoGLZw44ybQL5tw6cw-6oW3ULCVr4lu-wMMTxe_RU4VfWaZtD5dT2d00xyDf/s1280/rose.jpg';

  final String errorImage = 'assets/images/not-found.png';

4. Defining Image with errorBuilder function.

Image.network(
        mainImage,
        width: 300,
        height: 200,
        fit: BoxFit.contain,
        errorBuilder: (context, error, stackTrace) {
          return Image.asset(errorImage,
              width: 300, height: 200, fit: BoxFit.contain);
        },
      ),

5. Source code for main.dart file:

import 'package:flutter/material.dart';

void main() => runApp(const App());

class App extends StatelessWidget {
  const App({super.key});

  final String mainImage =
      'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqulsBzAJFu9AOO1BOdDW26gGWmVpnTgInl_H9YEtDxCnuHva7o3Z6EGqTjoSJxFgVkpo1fYbPR6h-B4X5kkwc7lJyymDQGoRX3RdSfxIezLhLt9pVuNGusnG-CI9DAldqAoGLZw44ybQL5tw6cw-6oW3ULCVr4lu-wMMTxe_RU4VfWaZtD5dT2d00xyDf/s1280/rose.jpg';

  final String errorImage = 'assets/images/not-found.png';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: SafeArea(
                child: Center(
      child: Image.network(
        mainImage,
        width: 300,
        height: 200,
        fit: BoxFit.contain,
        errorBuilder: (context, error, stackTrace) {
          return Image.asset(errorImage,
              width: 300, height: 200, fit: BoxFit.contain);
        },
      ),
    ))));
  }
}

Screenshot when image loaded successfully:

Screenshot When Image not loading successfully: