Question

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

代码：

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

任何帮助将不胜感激，谢谢你

Answer 1

对于loadingBuilder，您可以使用Image.Network这是flutter的内置功能

我这样做如下：

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

Answer 2

对于这类问题，使用cached_network_image很有用因此，您可以在加载图像时提供占位符，并在资源无法加载时提供错误小部件

<input type="hidden" id="add-to-wishlist-url" value='<%= YourServerSideExpressionHere.Execute() %>' />

Answer 3

对于不需要缓存图像的用户可以使用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 4

感谢您的评论，这有助于解决如何知道是否加载了图像的情况，希望对您有所帮助

我使用一个StatefulWidget 需要进行编辑取决于您的AffichScreen

情况：

 -i have an url that i enter 
 -if url is correct affich the image if not affich an icon
 -if empty affich a Text()
 -precacheImage check if the url is correct if not give an error and change _loadingimage(bool) to false to affich the icon eror
 -i use a NetworkImage to check with precacheImage and before affich use a Image.network 



   bool _loadingimage;
ImageProvider _image;
Image _imagescreen;

@override
  void initState() {
    _loadingimage = true;
    _imageUrlfocusNode.addListener(_updateImageUrl);
    super.initState();
  }

   @override
  void dispose() {
    _imageUrlfocusNode.removeListener(_updateImageUrl);
    _quantityfocusNode.dispose();
    _imageUrlConroller.dispose();
    _imageUrlfocusNode.dispose();
    super.dispose();
  }

  void _updateImageUrl() {
    setState(() {
      _image = NetworkImage(_imageUrlConroller.text);
    });
    if (!_imageUrlfocusNode.hasFocus) {
      if (_imageUrlConroller.text.isNotEmpty) {
        setState(() {
          loadimage();
        });
      }
    }
  }

  void loadimage() {
    _loadingimage = true;
    precacheImage(_image, context, onError: (e, stackTrace) {
      // log.fine('Image ${widget.url} failed to load with error $e.');
      print('error $e');
      setState(() {
        _loadingimage = false;
        print(_loadingimage);
      });
    });
    if (_loadingimage == true) {
      _imagescreen = Image.network(
        _imageUrlConroller.text,
        fit: BoxFit.fill,
      );
    }
  }



  Container(
                              width: 100,
                              height: 100,
                              margin: EdgeInsets.only(top: 13, right: 11),
                              decoration: BoxDecoration(
                                border: Border.all(
                                  width: 1,
                                  color: Colors.grey,
                                ),
                              ),
                              child:_imageUrlConroller.text.isEmpty
                                      ? Text('enter an url')
                                      : !_loadingimage
                                          ? Container(
                                              child: Icon(Icons.add_a_photo),
                                            )
                                          : Container(
                                              child: _imagescreen,
                                            ),
                            ),

Answer 5

您可以将FadeInImage与占位符一起使用

使用默认的“图像”小部件显示图像时，您可能会注意到它们在加载时仅弹出到屏幕上。这可能会给用户带来视觉冲击。

相反，首先显示一个占位符会不会很好，并且图像在加载时会淡入？为此，请使用FadeInImage小部件。

FadeInImage 可处理任何类型的图像：内存中的图像，本地资产或来自Internet的图像。

您还可以考虑将本地资产用作占位符。首先，将资产添加到项目的pubspec.yaml文件中（有关更多详细信息，请参见Adding assets and images）：

完整示例

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final title = 'Fade in images';

    return MaterialApp(
      title: title,
      home: Scaffold(
        appBar: AppBar(
          title: Text(title),
        ),
        body: Center(
          child: FadeInImage.assetNetwork(
            placeholder: 'assets/loading.gif',
            image: 'https://picsum.photos/250?image=9',
          ),
        ),
      ),
    );
  }
}

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

5 个答案: