如何显示本地图像，直到NetworkImage（）加载起来为止？

Question

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

我想在CircleAvatar之前显示本地图像，直到NetworkImage从互联网上完全加载。

Answer 1

你可能想尝试FadeInImage包裹在一个ClipOval。 FadeInImage提供了一个placeholder属性，您可以在加载网络映像时使用该属性。

备注：ClipOval可能会很贵，如果你做了很多，请谨慎使用它。

Answer 2

使用StateflWidget，你可以添加一个listener到ImageStream和覆盖initState触发本地图像，当它是满载从互联网上获得的一个之间的替代品。

我已经使用了高分辨率的图像显示加载时间：

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

Answer 3

虽然大图像加载，显示回退的财富！

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

https://github.com/FaisalAbid/pluto