背景图像重叠边缘抖动

Question

我有一个如图所示的背景图像，它需要与UI渲染中所示的边缘重叠，我不确定该如何做。我尝试裁剪并使用BoxFit.fill，但这只是导致了纵横比的改变，而这并不是我真正想要的，尤其是在不同尺寸的屏幕上。我在想，也许它在左侧和右侧重叠一个固定的量，然后根据屏幕尺寸改变尺寸以适应该尺寸，但不确定如何编码。我在列内玩过扩展的窗口小部件，诸如此类，但无济于事。

this SO Question

Answer 1

如果使图像更宽，则可以改用BoxFit.fitHeight。这是一个使风景图像适合人像视图的示例。

https://codepen.io/digitaljoni/pen/rNeMzdG

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        height: MediaQuery.of(context).size.height,
        width: MediaQuery.of(context).size.width,
        decoration: BoxDecoration(
          image: DecorationImage(
            fit: BoxFit.fitHeight,
            image: NetworkImage(
              'https://images.unsplash.com/photo-1542362567-b07e54358753?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80',
            ),
          ),
        ),
      ),
    );
  }
}