检查图像在flutter中的Image.network小部件中加载

Question

我是Flutter的新手.我尝试使用image.network小部件加载网络图像.它工作正常,但有时需要时间来加载.image.network我在点击期间添加了点击监听器我需要检查图像是否完全加载或不基于我需要重定向页面的结果.如何检查图像是否加载？

码:

new Image.network('http://via.placeholder.com/350x150')

任何帮助将不胜感激,谢谢你提前

Answer 1

对于不需要缓存图像的人可以使用meet_network_image包，

包基本用法：

                MeetNetworkImage(
                  imageUrl:
                      "https://random.dog/3f62f2c1-e0cb-4077-8cd9-1ca76bfe98d5.jpg",
                  loadingBuilder: (context) => Center(
                        child: CircularProgressIndicator(),
                      ),
                  errorBuilder: (context, e) => Center(
                        child: Text('Error appear!'),
                      ),
                )

此外，您可以使用FutureBuilder,

我们需要通过http调用来获取数据，我们需要在导入之前导入http，您还需要添加pubspec.yaml并运行命令flutter packages get

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

  FutureBuilder(
    // Paste your image URL inside the htt.get method as a parameter
    future: http.get(
        "https://random.dog/3f62f2c1-e0cb-4077-8cd9-1ca76bfe98d5.jpg"),
    builder: (BuildContext context, AsyncSnapshot<http.Response> snapshot) {
      switch (snapshot.connectionState) {
        case ConnectionState.none:
          return Text('Press button to start.');
        case ConnectionState.active:
        case ConnectionState.waiting:
          return CircularProgressIndicator();
        case ConnectionState.done:
          if (snapshot.hasError)
            return Text('Error: ${snapshot.error}');
          // when we get the data from the http call, we give the bodyBytes to Image.memory for showing the image
          return Image.memory(snapshot.data.bodyBytes);
      }
      return null; // unreachable
    },
  );

Answer 2

对于此类问题，最好使用cached_network_image， 以便可以在加载图像时提供占位符，并在资源加载失败时提供错误小部件

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

Answer 3

您可以将loadingBuilderflutter的内置功能用于Image.Network

我做到了如下：

Image.network(imageURL,fit: BoxFit.cover,
  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,
      ),
    );
  },
),