web-dev-qa-db-ja.com

画像がflutterのImage.networkウィジェットに読み込まれていることを確認する

Flutterは初めてです。 image.networkウィジェットを使用してネットワークイメージをロードしようとしています。正常に動作しますが、読み込みに時間がかかることがあります。タップ中にimage.networkにタップリスナーを追加しました。画像が完全に読み込まれているか、ページをリダイレクトする必要があるかを確認する必要があるかどうかを確認する必要があります。画像が読み込まれているかどうかを確認する方法は？

コード：

new Image.network('http://via.placeholder.com/350x150')

どんな助けでも感謝します、事前にありがとう

dartwidgetflutterimage-loading
10
Magesh Pandian

この種の問題では、 cached_network_image を使用することをお勧めします。これにより、イメージのロード時にプレースホルダーを提供し、リソースのロードに失敗した場合にエラーウィジェットを提供できます。

String url = "http://via.placeholder.com/350x150";
CachedNetworkImage(
       imageUrl: url,
       placeholder: (context,url) => CircularProgressIndicator(),
       errorWidget: (context,url,error) => new Icon(Icons.error),
     ),
7
Raouf Rahiche

Image.Networkには、flutterの組み込み機能であるloadingBuilderを使用できます。

私は以下のようにそれをしました：

Image.network(imageURL,fit: BoxFit.cover,
  loadingBuilder:(BuildContext context, Widget child,ImageChunkEvent loadingProgress) {
  if (loadingProgress == null) return child;
    return Center(
      child: CircularProgressIndicator(
      value: loadingProgress.expectedTotalBytes != null ? 
             loadingProgress.cumulativeBytesLoaded / loadingProgress.expectedTotalBytes
             : null,
      ),
    );
  },
),
7
Aditya Sharma

画像をキャッシュする必要がない人は meet_network_image パッケージを使用できます。

パッケージの基本的な使い方：

                MeetNetworkImage(
                  imageUrl:
                      "https://random.dog/3f62f2c1-e0cb-4077-8cd9-1ca76bfe98d5.jpg",
                  loadingBuilder: (context) => Center(
                        child: CircularProgressIndicator(),
                      ),
                  errorBuilder: (context, e) => Center(
                        child: Text('Error appear!'),
                      ),
                )

さらに、FutureBuilderを使用して、自分でそれを行うことができます。

そのようにhttp呼び出しでデータを取得する必要があります。インポートする前にhttpをインポートする必要があります。また、pubspec.yamlを追加してコマンドflutter packages getを実行する必要があります。

import 'package:http/http.Dart' as http;

  FutureBuilder(
    // Paste your image URL inside the htt.get method as a parameter
    future: http.get(
        "https://random.dog/3f62f2c1-e0cb-4077-8cd9-1ca76bfe98d5.jpg"),
    builder: (BuildContext context, AsyncSnapshot<http.Response> snapshot) {
      switch (snapshot.connectionState) {
        case ConnectionState.none:
          return Text('Press button to start.');
        case ConnectionState.active:
        case ConnectionState.waiting:
          return CircularProgressIndicator();
        case ConnectionState.done:
          if (snapshot.hasError)
            return Text('Error: ${snapshot.error}');
          // when we get the data from the http call, we give the bodyBytes to Image.memory for showing the image
          return Image.memory(snapshot.data.bodyBytes);
      }
      return null; // unreachable
    },
  );
4
cipli onat

画像がロードされているかどうかを知る方法、またはその助けを望んでいないという状況を解決するのに役立つコメントをありがとう

StatefulWidgetを使用していますが、編集はAffichScreenに依存します

状況 ：

 -i have an url that i enter 
 -if url is correct affich the image if not affich an icon
 -if empty affich a Text()
 -precacheImage check if the url is correct if not give an error and change _loadingimage(bool) to false to affich the icon eror
 -i use a NetworkImage to check with precacheImage and before affich use a Image.network 



   bool _loadingimage;
ImageProvider _image;
Image _imagescreen;

@override
  void initState() {
    _loadingimage = true;
    _imageUrlfocusNode.addListener(_updateImageUrl);
    super.initState();
  }

   @override
  void dispose() {
    _imageUrlfocusNode.removeListener(_updateImageUrl);
    _quantityfocusNode.dispose();
    _imageUrlConroller.dispose();
    _imageUrlfocusNode.dispose();
    super.dispose();
  }

  void _updateImageUrl() {
    setState(() {
      _image = NetworkImage(_imageUrlConroller.text);
    });
    if (!_imageUrlfocusNode.hasFocus) {
      if (_imageUrlConroller.text.isNotEmpty) {
        setState(() {
          loadimage();
        });
      }
    }
  }

  void loadimage() {
    _loadingimage = true;
    precacheImage(_image, context, onError: (e, stackTrace) {
      // log.fine('Image ${widget.url} failed to load with error $e.');
      print('error $e');
      setState(() {
        _loadingimage = false;
        print(_loadingimage);
      });
    });
    if (_loadingimage == true) {
      _imagescreen = Image.network(
        _imageUrlConroller.text,
        fit: BoxFit.fill,
      );
    }
  }



  Container(
                              width: 100,
                              height: 100,
                              margin: EdgeInsets.only(top: 13, right: 11),
                              decoration: BoxDecoration(
                                border: Border.all(
                                  width: 1,
                                  color: Colors.grey,
                                ),
                              ),
                              child:_imageUrlConroller.text.isEmpty
                                      ? Text('enter an url')
                                      : !_loadingimage
                                          ? Container(
                                              child: Icon(Icons.add_a_photo),
                                            )
                                          : Container(
                                              child: _imagescreen,
                                            ),
                            ),
0
MrMoon