new CircleAvatar(
backgroundColor: Colors.black87,
backgroundImage: new NetworkImage(url),
radius: 45.0,
)
Je veux montrer une image locale dans CircleAvatar jusqu'à ce que le NetworkImage charge complètement d'Internet.Comment afficher une image locale jusqu'à ce que NetworkImage() se charge de flutter?
Vous pouvez essayer un FadeInImage enveloppé 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 beaucoup, donc utilisez-le avec parcimonie.
Utilisez un StateflWidget et vous pouvez ajouter un listener au ImageStream et remplacer les initState pour déclencher un remplacement entre l'image locale et celle obtenue à partir de l'Internet quand il est complètement chargé.
J'ai utilisé une image haute résolution pour afficher le temps de chargement:
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,
),)
)
);
}
}
Alors que les grandes charge d'images, montrent un atout de secours!
new PlutoImage.networkWithPlaceholder("http://68.media.tumblr.com/f7e2e01128ca8eb2b9436aa3eb2a0a33/tumblr_ogwlnpSpcU1sikc68o1_1280.png", new Image.asset("assets/placeholder.png"));