可视化任何尺寸的图像而不会出现抖动颤动

Question

我希望标题清楚。我需要将图像可视化为背景图片，但是它是动态的，用户可以在需要时更改它。

问题是我想将它放在一个没有变形，压缩的盒子（容器，SizedBox ....）中。图片必须清晰且看起来不错。

你知道我该怎么做吗？

我尝试过：

SizedBox(
      width : _screenWidth,
      height: _customLabelsHeight,
      child : SizedBox.expand(
        child : ClipRRect (
          borderRadius: BorderRadius.circular(20.0),
          child : _backGroundPicture==null
            ? new Image.asset('assets/images/io.png'
             )
             : _backGroundPicture,
        ),
      ),
    ),

但这不是我想要的，因为某些图片被裁剪，放大，缩小...大小改变，有时图片很奇怪...

“ _ backGroundPicture”来自“ ImagePicker”：

var _backGroundPicture;

Future changeBackgroundPicture() async {
      var newImage2 = await ImagePicker.pickImage(source: 
      ImageSource.gallery);

      setState(() {
        _backGroundPicture=newImage2;
      });
  }

更新：出现错误的行

image : _backGroundPicture==null
                    ? new AssetImage('assets/images/io.png')
                    : _backGroundPicture,

其中_backGroundPicture是：var _backGroundPicture;而且都是onTap具有的gestureDetector的子代：GestureDetector（onTap：changeBackgroundPicture，。。。未来changeBackgroundPicture（）异步{var newImage2 =等待ImagePicker.pickImage（来源：ImageSource.gallery）;

 setState(() {
   _backGroundPicture = newImage2;
 });
}

Answer 1

您可以考虑使用BoxDecoration。使用fit属性。

Example :

Container(
  decoration: BoxDecoration(
    color: const Color(0xff7c94b6),
    image: const DecorationImage(
      image: NetworkImage('https:///flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg'),
      fit: BoxFit.cover,
    ),
    border: Border.all(
      color: Colors.black,
      width: 8,
    ),
    borderRadius: BorderRadius.circular(12),
  ),
)