Flutter Show Error Message When Network Image Not Found

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.

2. Now inside the assets folder make another folder named as images.

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.

Flutter Show Error Message When Network Image Not Found5. 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.

Source code of my pubspec.yaml file after adding above code :-

7. Now we’re good to go. Open your project’s main.dart file and import material.dart package.

8. Creating void main runApp() method, Here we would call our main MyApp class.

9. Creating MyApp extends StatelessWidget class.

10. Creating a String variable named as imageURL. We would assign our Image URL to this variable.

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.

12. Complete source code for main.dart file :-

Screenshot if image NOT found :-

Flutter Show Error Message When Network Image Not FoundScreenshot on Image found :-

Leave a Reply

Your email address will not be published.