web-dev-qa-db-ja.com

NetworkImage（）がフラッターでロードされるまでローカル画像を表示する方法は？

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

CircleAvatarがインターネットから完全に読み込まれるまで、NetworkImageにローカル画像を表示したい。

imagedartflutter
12
AjayKumar

FadeInImage で囲まれた ClipOval を試してみるとよいでしょう。 FadeInImageは、ネットワークイメージのロード中に使用できるplaceholderプロパティを提供します。

注：ClipOvalは頻繁に実行すると高額になる可能性があるため、慎重に使用してください。

14
Collin Jackson

StateflWidgetを使用すると、listenerをImageStreamに追加し、initStateをオーバーライドして、ローカルイメージと完全に読み込まれるとインターネット。

ロード時間を示すために高解像度の画像を使用しました：

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

これのための新しい公式ウィジェットがあります！

まず、プロジェクトのルートディレクトリにassetsというフォルダーを作成します。

次に、pubspec.yamlファイル（プロジェクトのルートディレクトリにもあります）：

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

あなたはそこに写真を置くことができます、例えば、これを./assets/loading.gif。

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

3
user1032613

大きな画像が読み込まれている間に、代替アセットを表示します。

 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

flutter_url_image_load_fail という名前のパッケージを開発して、loadingおよびを定義しましたウィジェットの読み込みに失敗しました：

LoadImageFromUrl(
    'https://upload.wikimedia.org/wikipedia/commons/1/17/Google-flutter-logo.png', //Image URL to load
    (image) => image, //What widget returns when the image is loaded successfully
    () => Text('Loading...'), //What widget returns when the image is loading
    (IRetryLoadImage retryLoadImage, code , message){ //What widget returns when the image failed to load
        return RaisedButton(
            child: Text('Try Again'),
            onPressed: (){
                retryLoadImage.retryLoadImage(); //Call this method to retry load the image when it failed to load
            },
        );
    },
    requestTimeout: Duration(seconds: 5) //Optionally set the timeout
)
1
DigaoParceiro

「読み込み」と「エラー」の画像を含む新しい_cached_network_image_パッケージがあります。自動画像キャッシュとともに。 https://stackoverflow.com/a/57493334/5502121

たとえば、アセットからImage.asset('assets/images/my_placeholder.png')を使用して、必要なものをプレースホルダーとして設定できます。

0
Kirill Karmazin

FadeInImageを使用できます。

アセットのプレースホルダーを使用します

FadeInImage.assetNetwork(
                              placeholder: "assets/images/image1.png",
                              image:"URL"
                                ),

メモリのプレースホルダを使用します

FadeInImage.memoryNetwork(
                                      placeholder: localImageBytes,
                                      image:"URL"
                                    ),
0
Md Abir Ahsan Tahmim