title: Better way to load images from network flutter
body: <p>I am trying to load images from network and show them in a <code>GridView</code>. I am using a <code>StatefulWidget</code> and loading the images inside the <code>build</code> method. But according to my understanding its not good to make a network call inside the <code>build</code> method. How can I download images from the network inside my <code>BLoC</code> file and later pass the list of downloaded images to the widget? Below is my current implementation.</p>
  
  <pre><code>class MovieList extends StatefulWidget {
    @override
    State&lt;StatefulWidget&gt; createState() {
      return MovieListState();
    }
  }
  
  class MovieListState extends State&lt;MovieList&gt; {
    @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&lt;ItemModel&gt; snapshot) {
            if (snapshot.hasData) {
              return buildList(snapshot);
            } else if (snapshot.hasError) {
              return Text(snapshot.error.toString());
            }
            return Center(child: CircularProgressIndicator());
          },
        ),
      );
    }
  
    Widget buildList(AsyncSnapshot&lt;ItemModel&gt; 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: () =&gt; 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,
            ),
          );
        }),
      );
    }
  }
  </code></pre>