Check image is loaded in Image.network widget in flutter

后端 未结 5 721
忘了有多久
忘了有多久 2021-02-04 05:54

I am new to Flutter. I try to load network image using image.network widget. it\'s work fine but sometimes it\'s take time to load.I added tap listener to ima

5条回答
  •  情话喂你
    2021-02-04 06:36

    thank you for your comment thats help to resolve the situation that how to know if the image is loaded or not hope that help

    I use a StatefulWidget need a editing depend on your AffichScreen

    situation :

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

提交回复
热议问题