web-dev-qa-db-fra.com

Comment afficher une image locale jusqu'à la NetworkImage () se charge en flottement?

            new CircleAvatar(
                              backgroundColor: Colors.black87,
                              backgroundImage: new NetworkImage(url),
                              radius: 45.0,
                            )

Je veux montrer une image locale dans CircleAvatar jusqu'à ce que NetworkImage soit entièrement chargé à partir d'Internet.

imagedartflutter
5
AjayKumar

Vous voudrez peut-être essayer une FadeInImage enveloppée dans un ClipOval . FadeInImage fournit une propriété placeholder que vous pouvez utiliser pendant le chargement de l'image réseau.

Remarque: ClipOval peut être coûteux si vous le faites souvent, utilisez-le avec parcimonie.

9
Collin Jackson

Utilisez une StateflWidget et vous pouvez ajouter une listener à la ImageStream et remplacer la initState pour déclencher un remplacement entre l'image locale et celle obtenue à partir d'Internet lorsqu'elle est complètement chargée.

J'ai utilisé une image haute résolution pour afficher le temps de chargement:

 enter image description here 

  var _loadImage = new AssetImage(
      'assets/img/basic2-090_loader_loading-512.png');
  var _myEarth = new NetworkImage(
      "http://qige87.com/data/out/73/wp-image-144183272.png");
  bool _checkLoaded = true;

  @override
  void initState() {
    _myEarth.resolve(new ImageConfiguration()).addListener((_, __) {
      if (mounted) {
        setState(() {
          _checkLoaded = false;
        });
      }
    });
  }


  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        body: new Center(child: new Container(
          decoration: new BoxDecoration(shape: BoxShape.circle,),
          height: 80.0,
          width: 80.0,
          child: new CircleAvatar(
            backgroundColor: Theme
                .of(context)
                .scaffoldBackgroundColor,
            backgroundImage: _checkLoaded ? _loadImage : _myEarth,
          ),)
        )
    );
  }
}
5
aziza

Lors du chargement d'images volumineuses, affichez un atout de secours!

 new PlutoImage.networkWithPlaceholder("http://68.media.tumblr.com/f7e2e01128ca8eb2b9436aa3eb2a0a33/tumblr_ogwlnpSpcU1sikc68o1_1280.png", new Image.asset("assets/placeholder.png"));

https://github.com/FaisalAbid/pluto

2
AjayKumar

Il y a un nouveau widget officiel pour cela maintenant!

Commencez par créer un dossier appelé assets dans le répertoire racine du projet.

Ensuite, mentionnez le dossier dans le fichier pubspec.yaml (également présent dans le répertoire racine du projet):

flutter:
  uses-material-design: true
  assets:
    - assets/

Vous pouvez y placer une image, par exemple, en tant que ./assets/loading.gif.

 Loading.gif

(Si vous avez modifié des fichiers dans le dossier des actifs, le rechargement à chaud ne fonctionnera pas. Assurez-vous de redémarrer entièrement l'application.)

Maintenant, vous pouvez vous référer au fichier de chargement dans le code:

FadeInImage.assetNetwork(
  placeholder: 'assets/loading.gif',
  image: 'https://github.com/flutter/website/blob/master/src/_includes/code/layout/lakes/images/lake.jpg?raw=true',
);

Pour plus de détails: https://flutter.io/docs/cookbook/images/fading-in-images#from-asset-bundle

1
user1032613