Hello friends, In today’s tutorial we would learn about errorBuilder inbuilt function of Image.network() widget in flutter. The errorBuilder function allows us to call any widget if in any circumstances the network image not found on server, returns 404 error, 403 forbidden error, deleted from the server and even if the image URL is broke. In easy works if our image is not load in the Image.network() widget then this function calls. So Now we can use this function as Backup function. Now what we’re doing in this tutorial is If our network image not found on server then it will show us a error image directly from local assets folder. So in this tutorial we would learn about Flutter Show Error Message When Network Image Not Found.
Contents in this project Flutter Show Error Message When Network Image Not Found :-
1. First of all we have to put the local Error image in the assets folder. So open your flutter project and make a folder named as assets.
3. Now download the Error Image from below. This Image is created by Myself so you can use it anywhere.
4. After downloading above image, Put the image inside assets/images folder.
5. Now in the next step, We have to put the assets/images folder path inside our project’s pubspec.yaml file. So open pubspec.yaml file present inside your flutter project in Text editor, I’m using Visual Studio Code.
6. Put below code inside the pubspec.yaml file under flutter section.
|
1 2 |
assets: - assets/images/ |
Source code of my pubspec.yaml file after adding above code :-
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
name: app2 description: A new Flutter project. publish_to: 'none' version: 1.0.0+1 environment: sdk: ">=2.15.1 <3.0.0" dependencies: flutter: sdk: flutter cupertino_icons: ^1.0.2 flutter_emoji: ^2.2.1+1 share: ^2.0.4 fluttertoast: ^8.0.8 shared_preferences: ^2.0.13 url_launcher: ^6.0.20 dev_dependencies: flutter_test: sdk: flutter flutter_lints: ^1.0.0 flutter: assets: - assets/images/ uses-material-design: true |
7. Now we’re good to go. Open your project’s main.dart file and import material.dart package.
|
1 |
import 'package:flutter/material.dart'; |
8. Creating void main runApp() method, Here we would call our main MyApp class.
|
1 |
void main() => runApp(MyApp()); |
9. Creating MyApp extends StatelessWidget class.
|
1 2 3 4 5 |
class MyApp extends StatelessWidget { } |
10. Creating a String variable named as imageURL. We would assign our Image URL to this variable.
|
1 2 |
String imageURL = "https://flutter-examples.com/wp-content/uploads/2019/09/blossom.jpg"; |
11. Creating Widget Build area -> Here we would make our main Image.network() widget with errorBuilder function. If the image not found the it will automatically load the local image.
|
1 2 3 4 5 6 7 8 9 10 |
Image.network( imageURL, width: 300, height: 200, fit: BoxFit.contain, errorBuilder: (context, error, stackTrace) { return Image.asset('assets/images/image_not_found.png', width: 300, height: 200, fit: BoxFit.contain); }, ), |
12. Complete source code for main.dart file :-
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { String imageURL = "https://flutter-examples.com/wp-content/uploads/2019/09/blossom.jpg"; @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: SafeArea( child: Center( child: Column( children: <Widget>[ const Text( 'Show Error Image If Main Image NOT Found in Flutter', style: TextStyle(fontSize: 24), textAlign: TextAlign.center, ), Image.network( imageURL, width: 300, height: 200, fit: BoxFit.contain, errorBuilder: (context, error, stackTrace) { return Image.asset('assets/images/image_not_found.png', width: 300, height: 200, fit: BoxFit.contain); }, ), ], ), )))); } } |
Screenshot if image NOT found :-
Screenshot on Image found :-
