如何顯示本地圖像，直到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