Flutter开发：如何将Drawer背景图片宽度设置为Drawer宽度

要让Drawer的背景图片完全适配其宽度（同时填充可用高度），可以通过以下调整实现：

• 用Positioned.fill包裹图片，强制它占满Drawer的整个边界空间
• 保留BoxFit.cover让图片按比例缩放，避免拉伸变形的同时覆盖Drawer区域

修改后的完整代码示例：

Drawer(
  shape: const RoundedRectangleBorder(
    borderRadius: BorderRadius.all(Radius.circular(40)),
  ),
  child: Stack(
    children: <Widget>[
      // 背景图片：自动适配Drawer宽高
      Positioned.fill(
        child: Image.asset(
          "assets/images/menu.png",
          fit: BoxFit.cover,
        ),
      ),
      // 叠加Drawer的其他内容（示例：列表菜单）
      ListView(
        padding: EdgeInsets.zero,
        children: const [
          DrawerHeader(
            child: Text('菜单'),
            decoration: BoxDecoration(
              color: Colors.transparent, // 透明背景，不遮挡下方图片
            ),
          ),
          ListTile(title: Text('选项1')),
          ListTile(title: Text('选项2')),
        ],
      ),
    ],
  ),
)

关键细节： #

• Positioned.fill会让图片严格贴合Drawer的宽高，无需手动设置width: double.infinity
• BoxFit.cover保证图片按原始比例缩放，优先填满宽度的同时，裁剪超出高度的部分（或拉伸高度至填满，取决于图片比例）
• 上层内容可通过设置透明背景，实现“悬浮”在背景图上的效果

内容的提问来源于stack exchange，提问作者Faizan Abbas Bangash