flutter - 从网络 flutter 中加载图像的更好方法

我正在尝试从网络加载图像，并将其显示在GridView中。我正在使用一个StatefulWidget并在build方法中加载图像。但是根据我的理解，在build方法中进行网络调用是不好的。如何从网络下载BLoC文件中的图像，然后将下载的图像列表传递给小部件？下面是我当前的实现。

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,
          ),
        );
      }),
    );
  }
}

最佳答案

我建议你用
https://pub.dartlang.org/packages/cached_network_image
这对我的案子很有用。
简单的代码示例

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

或

Image(image: CachedNetworkImageProvider(url))

您应该添加到pubspec文件

cached_network_image: <actual version here>

进入依赖项部分

关于flutter - 从网络 flutter 中加载图像的更好方法，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/53577962/