（背景）图片未达到屏幕宽度

Question

我已从使用BoxDecoration更改为：

     decoration: new BoxDecoration(
       shape: BoxShape.rectangle,
       image: new DecorationImage(
         fit: BoxFit.fill,
         image: new NetworkImage(urlString),
       ),
     ),
    );

至FadeImage：

return FadeInImage.memoryNetwork(
      placeholder: kTransparentImage,
      image: urlString,
    );  

URL字符串为https://source.unsplash.com/collection/3302326/414x896/?sig=42的地方，width = 414和height 896的值来自：

var height = MediaQuery.of(context).size.height.toInt();
var width = MediaQuery.of(context).size.width.toInt();  

我不能将BoxDecoration与FadeInImage一起使用，因此丢失了BoxFit.fill。我以为如果得到屏幕的宽度和高度，我会得到覆盖屏幕的图像。我得到的宽度大约比覆盖屏幕宽度所需的宽度少105像素。然后，我尝试了SizedBox.extended ...，但仍然无法使FadeInImage跨越屏幕的宽度。

我想念什么？谢谢。

Answer 1

只需-FadeInImage小部件即可完成工作。

FadeInImage(
              placeholder: kTransparentImage,
              image: NetworkImage('https://placeimg.com/414/896/any'),  // replace this with urlString in your code.
              fit: BoxFit.cover,
            ),

输出：

更新：确保小部件占据整个屏幕区域。

FadeInImage(
        height: double.infinity,  //add this
        width: double.infinity,   //add this
        placeholder: kTransparentImage,
        image: NetworkImage('https://placeimg.com/640/480/any'),  // replace this with urlString in your code.
        fit: BoxFit.cover,
      ),