flutter - 网页抖动:显示之前从网络图片获取宽度/高度

Question

我想在显示图像之前从NetworkImage或Image.network获取属性值，例如宽度和高度。

我找到了以下不错的帖子，但是不起作用。它具有大小值，但是图像未加载到FutureBuilder中。

How do I determine the width and height of an image in Flutter?

How do I tell when a NetworkImage has finished loading?

我的代码如下:

import 'dart:async';

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: FutureBuilder(
          future: _getImage(),
          builder: (BuildContext context, AsyncSnapshot<Image> snapshot) {
            print(snapshot.hasData);
            if (snapshot.hasData) {
              return snapshot.data;
            } else {
              return Text('Loading...');
            }
          },
        ),
      ),
    );
  }

  Future<Image> _getImage() async {
    final Completer completer = Completer();
    final String url = 'http://images-jp.amazon.com/images/P/4101098018.09.MZZZZZZZ';
    final image = NetworkImage(url);

    image.resolve(ImageConfiguration())
          .addListener(ImageStreamListener((ImageInfo info, bool isSync) {
      print(info.image.width);
      completer.complete(info.image);
    }));

    return completer.future;
  }
}

结果是；
-屏幕仅显示“正在加载...”，并且未加载图像。
- print输出如下。这意味着，在加载图像之前， FutureBuilder被调用了两次，我们可以得到宽度，但是之后不调用 FutureBuilder。

false
false
112

环境:

Flutter 1.13.0• channel 开发(由于Flutter Web)

Chrome版本79.0.3945.79

Answer 1

根据Abion47的建议，我成功使用http包获得了图像。但是即使获取图像后，我仍然无法获得宽度和/或高度值。
另外，我使用response.body.length来检查下载的图像是否有效。

  Future<Image> _getImage() async {
    Image _image;
    final String url = 'http://images-jp.amazon.com/images/P/4101098018.09.MZZZZZZZ';
    var response = await http.get(url);

    print("Response status: ${response.statusCode}"); // 200
    _image = Image.memory(response.bodyBytes);
    print(_image.width); // still null
    print(response.body.length); // this shows numbers. I'll use this.

    return _image;
  }