web-dev-qa-db-fra.com

Vérifier que l'image est chargée dans le widget Image.network en flutter

Je suis nouveau à Flutter. J'essaie de charger l'image réseau en utilisant le widget image.network. ça marche bien mais parfois ça prend du temps à charger.J'ai ajouté l'écouteur de tap à image.network pendant le tap j'ai besoin de vérifier que l'image est complètement chargée ou pas en fonction du résultat que j'ai besoin de rediriger la page. comment vérifier que l'image est chargée ou non?

Code:

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

Toute aide sera appréciée, merci d'avance

dartwidgetflutterimage-loading
10
Magesh Pandian

pour ce genre de problèmes, il est bon d'utiliser le cached_network_image afin que vous puissiez fournir un espace réservé lors du chargement de l'image et un widget d'erreur au cas où une ressource ne se chargerait pas

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

Vous pouvez utiliser le loadingBuilder qui est une fonction intégrée de flutter pour Image.Network

Je l'ai fait comme ci-dessous:

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

pour ceux qui n'ont pas besoin de mettre l'image en cache, utilisez meet_network_image package,

L'utilisation de base du package:

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

De plus, vous pouvez le faire vous-même en utilisant un FutureBuilder,

Nous devons obtenir les données avec l'appel http de cette façon, nous devons importer http avant d'importer, vous devez également ajouter pubspec.yaml et exécutez la commande 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
    },
  );
4
cipli onat

merci pour votre commentaire qui aide à résoudre la situation que comment savoir si l'image est chargée ou non espère que l'aide

J'utilise un StatefulWidget besoin d'une édition dépend de votre 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,
                                            ),
                            ),
0
MrMoon