如何判断NetworkImage何时完成加载？

Question

我有一个NetworkImage，我想知道它何时完成加载。我该怎么做？

Answer 1

您可以ImageStream获取addListener和ImageStream import 'package:flutter/material.dart'; void main() { runApp(new MyApp()); } class MyApp extends StatefulWidget { State createState() => new MyAppState(); } class MyAppState extends State<MyApp> { Image _image = new Image.network( 'https://flutter.io/images/flutter-mark-square-100.png', ); bool _loading = true; @override void initState() { _image.image.resolve(new ImageConfiguration()).addListener((_, __) { if (mounted) { setState(() { _loading = false; }); } }); } @override Widget build(BuildContext context) { return new MaterialApp( home: new Scaffold( body: new Center( child: _loading ? new Text('Loading...') : _image, ), ), ); } }

SELECT DNum, RNum, SUM(Quant) AS TotalQuantity
FROM Orders
GROUP BY DNum, RNum

Answer 2

我在flutter的官方演示中找到了这种方法，希望对您有所帮助。

OR

Answer 3

您可以使用ImageStreamListener做到这一点。 ImageStreamListener的第一个参数是ImageListener回调，当图像完全加载后将被调用。

 var _image = NetworkImage("URL");

 _image.resolve(ImageConfiguration()).addListener(
    ImageStreamListener(
      (info, call) {
        print('Networkimage is fully loaded and saved');
        // do something
      },
    ),
  );

Answer 4

2021 年更新

_image.image.resolve(ImageConfiguration())
     .addListener(ImageStreamListener((ImageInfo info, bool syncCall) {

// DO SOMETHING HERE

completer.complete();

});

Answer 5

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

我使用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 6

您可以使用loadingBuilder，它为Image.Network提供了抖动功能

以下示例在通过网络加载图像时使用loadingBuilder来显示CircularProgressIndicator。

   Image.network(
      'https://example.com/image.jpg',
      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,
          ),
        );
      },
    )