Flutter network image error

How to handle Image.network when the url is wrong or the destination leads to 404.

for example try

Image.network('https://image.tmdb.org/t/p/w92')

Can use errorBuilder from Image.network or Image.asset

Image.network(
       path.image,
       width: 40,
       height: 40,
       errorBuilder: (BuildContext context, Object exception,
            StackTrace? stackTrace) {
         return const Text('😢');
       },

answered Feb 17, 2022 at 2:55

I ran into this problem while learning flutter (not web). I found the solution after I tried all the non-working options that are given in this thread. They all print errors to the console if the address is wrong or the resource is not found. To play with my solution, you will need to install two plugins: http and url_launcher (the second plugin is only needed to open a link to this topic in the simulator). Be sure to read the up-to-date instructions for using plugins. How to play, you ask? Change the address in input Image URL field as you like! Please report bugs if you find them.

import 'package:http/http.dart' as http;
import 'package:url_launcher/url_launcher.dart';

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Image 404',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  static const _problemDescriptionUrl =
      'https://stackoverflow.com/questions/52568872/flutter-how-to-handle-image-network-error-like-404-or-wrong-url';
  String imageUrl =
      'https://repository-images.githubusercontent.com/90528830/018a6400-d879-11e9-92b4-492c61d9bc32';

  late Future<Widget> futureWidget;

  Future<Widget> fetchImage() async {
    if (imageUrl.startsWith('https://') &&
        Uri.tryParse(imageUrl) != null &&
        Uri.tryParse(imageUrl)!.hasAbsolutePath) {
      final response = await http.get(Uri.parse(imageUrl));
      if (response.statusCode == 200 &&
          (response.headers.keys.contains('content-type') &&
              !response.headers['content-type']!.contains('text/html'))) {
        // If the server did return a 200 OK response,
        // then parse the data.
        return Image.memory(response.bodyBytes, fit: BoxFit.cover);
      } else {
        // If the server did not return a 200 OK response,
        // then
        return const Text('Failed to load Image');
      }
    }
    return const Text('Failed to load Image');
  }

  @override
  void initState() {
    futureWidget = fetchImage();
    super.initState();
  }

  void _launchUrl() async {
    if (!await launchUrl(Uri.tryParse(_problemDescriptionUrl)!)) {
      throw 'Could not launch $_problemDescriptionUrl';
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Image.network Error 404 Solution'),
      ),
      body: Column(
        children: [
          TextButton(
              onPressed: _launchUrl,
              child: const Text('The problem described here')),
          Container(
            padding: const EdgeInsets.all(8),
            alignment: Alignment.center,
            width: double.infinity,
            height: 200,
            child: FutureBuilder<Widget>(
              future: futureWidget,
              builder: (context, snapshot) {
                if (snapshot.hasData) {
                  return snapshot.data!;
                } else if (snapshot.hasError) {
                  return Text('${snapshot.error}');
                }
                // By default, show a loading spinner.
                return const CircularProgressIndicator();
              },
            ),
          ),
          Form(
            child: TextFormField(
              decoration: const InputDecoration(labelText: 'Image URL'),
              initialValue: imageUrl,
              maxLines: 3,
              keyboardType: TextInputType.url,
              textInputAction: TextInputAction.done,
              onChanged: (val) {
                setState(() {
                  imageUrl = val;
                  futureWidget = fetchImage();
                });
              },
            ),
          )
        ],
      ),
    );
  }
}

answered Jul 12, 2022 at 19:48

I have implemented this StatefulWidget for the same case, hope this helps!!!

    class NetworkImageHandlerViewer extends StatefulWidget {
      final String imageURL;
      bool errorFoundInImageLoad = false;
      NetworkImageHandlerViewer({
        Key key,
        @required this.imageURL,
      }) : super(key: key);

      @override
      _NetworkImageHandlerViewerState createState() =>
          _NetworkImageHandlerViewerState();
    }

    class _NetworkImageHandlerViewerState extends State<NetworkImageHandlerViewer> {
      @override
      Widget build(BuildContext context) {
        return Column(
          children: [
            Container(
              height: 200,
              // height: MediaQuery.of(context).size.height,
              width: MediaQuery.of(context).size.width,
              // color: Colors.black,
              child: (widget.errorFoundInImageLoad)
                  ? Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Text(
                          "Unable To Fetch Image",
                        ),
                        IconButton(
                          iconSize: 40,
                          onPressed: () {
                            setState(() {
                              if (mounted) {
                                print("reloading image again");
                                setState(() {
                                  widget.errorFoundInImageLoad = false;
                                });
                              }
                            });
                          },
                          icon: Icon(Icons.refresh),
                        ),
                        Text(
                          "Tap Refresh Icon To Reload!!!",
                        ),
                      ],
                    )
                  : Image.network(
                      // widget.question.fileInfo[0].remoteURL,
                      widget.imageURL,
                      //
                      loadingBuilder: (context, child, loadingProgress) =>
                          (loadingProgress == null)
                              ? child
                              : Center(
                                  child: CircularProgressIndicator(),
                                ),
                      errorBuilder: (context, error, stackTrace) {
                        Future.delayed(
                          Duration(milliseconds: 0),
                          () {
                            if (mounted) {
                              setState(() {
                                widget.errorFoundInImageLoad = true;
                              });
                            }
                          },
                        );
                        return SizedBox.shrink();
                      },
                    ),
            ),
            SizedBox(height: 25),
          ],
        );
      }
    }

answered Jun 25, 2021 at 21:59

https://pub.dev/packages/extended_image

the plugin makes it easy to handle errors in Network image load

import 'package:flutter/material.dart';
import 'package:extended_image/extended_image.dart';

class ImageHolder extends StatefulWidget {
  const ImageHolder(
      {Key? key,
      required this.url,
      required this.imageHeight,
      required this.imageWidth})
      : super(key: key);

  final String url;
  final double imageHeight;
  final double imageWidth;

  @override
  _ImageHolderState createState() => _ImageHolderState();
}

class _ImageHolderState extends State<ImageHolder>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  @override
  void initState() {
    _controller = AnimationController(
        vsync: this,
        duration: const Duration(seconds: 3),
        lowerBound: 0.0,
        upperBound: 1.0);
    super.initState();
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return ExtendedImage.network(
      widget.url,
      fit: BoxFit.contain,
      cache: true,
      loadStateChanged: (ExtendedImageState state) {
        switch (state.extendedImageLoadState) {
          case LoadState.loading:
            _controller.reset();
            return Image.asset(
              'assets/images/loading.gif',
              fit: BoxFit.fill,
            );
          case LoadState.completed:
            _controller.forward();
            return FadeTransition(
              opacity: _controller,
              child: ExtendedRawImage(
                image: state.extendedImageInfo?.image,
                width: widget.imageWidth,
                height: widget.imageHeight,
              ),
            );
          case LoadState.failed:
            _controller.reset();
            state.imageProvider.evict();
            return Image.asset(
              'assets/images/failed.jpg',
            );
        }
      },
    );
  }
}

answered Jul 28, 2021 at 21:14

there what i was looking for, but its temporary… its ignore 404 error exception and returning null.

FlutterError.onError = (FlutterErrorDetails details) {
      if (details.library == 'image resource service') {
        return;
      }
      FirebaseCrashlytics.instance.recordFlutterFatalError(details);
    };

for more information
errorBuilder throws exception for invalid image data #107416

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

antakuznet opened this issue

Dec 29, 2020

· 38 comments

Labels