47

I am trying to load images from network and show them in a GridView. I am using a StatefulWidget and loading the images inside the build method. But according to my understanding its not good to make a network call inside the build method. How can I download images from the network inside my BLoC file and later pass the list of downloaded images to the widget? Below is my current implementation.

class MovieList extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return MovieListState();
  }
}

class MovieListState extends State<MovieList> {
  @override
  void initState() {
    super.initState();
    bloc.fetchAllMovies();
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Popular Movies'),
      ),
      body: StreamBuilder(
        stream: bloc.allMovies,
        builder: (context, AsyncSnapshot<ItemModel> snapshot) {
          if (snapshot.hasData) {
            return buildList(snapshot);
          } else if (snapshot.hasError) {
            return Text(snapshot.error.toString());
          }
          return Center(child: CircularProgressIndicator());
        },
      ),
    );
  }

  Widget buildList(AsyncSnapshot<ItemModel> snapshot) {
    return GridView.builder(
        itemCount: snapshot.data.results.length,
        gridDelegate:
        new SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
        itemBuilder: (BuildContext context, int index) {
          return GridTile(
            child: InkResponse(
              enableFeedback: true,
              child: Image.network(
                'https://image.tmdb.org/t/p/w185${snapshot.data
                    .results[index].poster_path}',
                fit: BoxFit.cover,
              ),
              onTap: () => openDetailPage(snapshot.data, index),
            ),
          );
        });
  }

  openDetailPage(ItemModel data, int index) {
    Navigator.push(
      context,
      MaterialPageRoute(builder: (context) {
        return MovieDetailBlocProvider(
          child: MovieDetail(
            title: data.results[index].title,
            posterUrl: data.results[index].backdrop_path,
            description: data.results[index].overview,
            releaseDate: data.results[index].release_date,
            voteAverage: data.results[index].vote_average.toString(),
            movieId: data.results[index].id,
          ),
        );
      }),
    );
  }
}
2

6 Answers 6

157

You can use loadingBuilder which is inbuilt feature from flutter for Image.Network

       Image.network(
                  widget.networkUrl,
                  fit: BoxFit.fill,
                  loadingBuilder: (BuildContext context, Widget child,
                      ImageChunkEvent? loadingProgress) {
                    if (loadingProgress == null) return child;
                    return Center(
                      child: CircularProgressIndicator(
                        value: loadingProgress.expectedTotalBytes != null
                            ? loadingProgress.cumulativeBytesLoaded /
                                loadingProgress.expectedTotalBytes!
                            : null,
                      ),
                    );
                  },
                ),
9
  • 3
    Thanks! This solution works on for Flutter for web (cached_network_image is not fully supported there) Sep 16, 2020 at 22:16
  • 2
    what exactly is this child we are passing in?
    – Nuqo
    May 25, 2021 at 21:36
  • Must be the image itself
    – Rahul Dole
    Jun 18, 2021 at 4:40
  • 1
    This is on of the best answers I have ever seen on stackoverflow Feb 17, 2022 at 10:26
  • 1
    @Mohammad you can use errorBuilder argument of Image.network for that Apr 7, 2022 at 22:26
78

I would recommend you to use https://pub.dartlang.org/packages/cached_network_image

It's really works good for my cases.

Simple code example from their r

CachedNetworkImage(
   imageUrl: "http://via.placeholder.com/350x150",
   placeholder: (context, url) => new CircularProgressIndicator(),
   errorWidget: (context, url, error) => new Icon(Icons.error),
 ),

or

Image(image: CachedNetworkImageProvider(url))

You should add to the pubspec file

cached_network_image: <actual version here>

into the dependencies section

7
  • I think it can be easily googled by name even if link will be expired but okey, I add a simple sample. Dec 2, 2018 at 7:38
  • 1
    How does this help me? I want to download images out of my build method. I want to do it in a repository file. How can I achieve that?
    – sagar suri
    Dec 2, 2018 at 10:03
  • Is this way make the image display faster after?
    – hoangquyy
    Oct 25, 2019 at 2:33
  • 1
    Is there a way to use the Shimmer widget for loading here? pub.dev/packages/shimmer Feb 18, 2020 at 17:14
  • 1
    CachedNetworkImage does not respect container size (you actually need a smaller image to be loaded in memory than the url provides), so you might want to consider this pub.dev/packages/optimized_cached_image Mar 29, 2020 at 4:43
6

If you want a circular shape for your image. You can use Circle Avatar in such a way that it will act as loader and displayer both....

Parent circle avatar will be having loader and If we put transparent color to child circle avatar it will show loading until it is loaded...

Plus point with this way is you can simply give border also by setting background color of parent circle avatar and increasing it's radius slightly.

CircleAvatar(
                backgroundColor: Colors.red,
                radius: 65,
                backgroundImage: AssetImage('assets/bottombar/loading.gif'),
                child: CircleAvatar(
                  radius: 65,
                  backgroundColor: Colors.transparent,
                  backgroundImage: NetworkImage(_url),
                ),
              ),
3

You can also use FadeInImage https://flutter.dev/docs/cookbook/images/fading-in-images

FadeInImage.assetNetwork(
        placeholder: 'assets/loading.gif',
        image: 'https://picsum.photos/250?image=9',
      ),
2

It is a good practice to handle errors related to, for example, lack of Internet, when trying to load an image from the Internet. ErrorBuilder is really good if you use Image.network()

Image.network(
      'https://example.does.not.exist/image.jpg',
      errorBuilder: (BuildContext context, Object exception, StackTrace stackTrace) {
        // Appropriate logging or analytics, e.g.
        // myAnalytics.recordError(
        //   'An error occurred loading "https://example.does.not.exist/image.jpg"',
        //   exception,
        //   stackTrace,
        // );
        return Text('😢');
      },
    ),
0

Best way to Handle Network Images

The best way to load image from the network in flutter is to use flutter's built-in network function and customize it according to your requirements, I do not recommend/prefer to use any package like CachedNetworkImage because it sometimes works on mobile phone and give unexpected error on the web.

You can manage the Network image like this:

  Image.network(
        netWorkImageURL,
        fit: BoxFit.fill,
        // When image is loading from the server it takes some time
        // So we will show progress indicator while loading
        loadingBuilder: (BuildContext context, Widget child,
            ImageChunkEvent? loadingProgress) {
          if (loadingProgress == null) return child;
          return Center(
            child: CircularProgressIndicator(
              value: loadingProgress.expectedTotalBytes != null
                  ? loadingProgress.cumulativeBytesLoaded /
                      loadingProgress.expectedTotalBytes!
                  : null,
            ),
          );
        },
        // When dealing with networks it completes with two states, 
        // complete with a value or completed with an error, 
        // So handling errors is very important otherwise it will crash the app screen. 
        // I showed dummy images from assets when there is an error, you can show some texts or anything you want.
        errorBuilder: (context, exception, stackTrace) {
          return Image.asset(
            AppAssets.dummyPostImg,
            fit: BoxFit.cover,
            height: (widget.hideBelowImage == null ||
                    widget.hideBelowImage == false)
                ? 170.h
                : 130.h,
            width: double.infinity,
          );
        },
      ),

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.