如何显示本地图像,直到NetworkImage()加载flutter？

Question

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

我希望显示本地图像,CircleAvatar直到NetworkImage来自互联网的全部负载.

Answer 1

你可能想尝试FadeInImage包装ClipOval.FadeInImage提供placeholder可在网络图像加载时使用的属性.

注意:ClipOval如果你经常这么做可能会很贵,所以要谨慎使用它.

Answer 2

现在有一个新的官方小部件！

首先，assets在项目根目录下创建一个文件夹。

然后，提到文件中的pubspec.yaml文件夹（也可以在项目根目录中找到）：

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

你可以在那里放一张图片，例如，把它作为./assets/loading.gif.

（如果您更改了 assets 文件夹中的文件，热重载将不起作用。确保您完全重新启动应用程序。）

现在可以参考代码中的加载文件：

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

更多详情：https : //flutter.io/docs/cookbook/images/fading-in-images#from-asset-bundle

Answer 3

使用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 4

您还可以使用该frameBuilder物业。好处是：您可以在此处实现自定义占位符小部件。

Image.network('https://example.com/my-image',
  height: 100,
  frameBuilder: (context, child, frame, _) {
    if (frame == null) {
      // fallback to placeholder
      return MyPlaceholderWidget();
    }
    return child;
  }
)

Answer 5

有两种方法可以解决您的问题

1) 使用 Image.network :如果你想在图像加载时显示进度条、simmer 或任何其他小部件。

  Image.network(
      "URL",
      fit: BoxFit.cover,
      loadingBuilder: (BuildContext ctx, Widget child, ImageChunkEvent loadingProgress) {
        if (loadingProgress == null) {
          return child;
        }else {
          return Center(
            child: CircularProgressIndicator(
              valueColor: AlwaysStoppedAnimation<Color>(Colors.green),
            ),
          );
        }
      },       
  )

2) 使用 FadeInImage :如果你想在网络图片加载时显示本地图片

 FadeInImage.assetNetwork( 
    image:"URL",
    placeholder:"assets/loading.png" // your assets image path
    fit: BoxFit.cover,
  )