Flutter如何将选中的image1设置为Container的DecorationImage

• 补全状态刷新逻辑：图片选择完成后必须将赋值操作包裹在setState中执行，否则界面不会重新渲染，选中的图片无法正常展示
• 在BoxDecoration中新增image配置：做空值兼容，未选中图片时保留原有蓝色背景，选中后通过FileImage加载本地图片文件，配置填充规则保证图片适配容器尺寸，图片会自动继承已配置的圆角属性完成裁切

首先需要在文件顶部导入io库用于读取本地文件：

import 'dart:io';

组件代码修改如下：

InkWell(
  onTap: (() async {
    final pickedFile = await _picker.pickImage(source: ImageSource.gallery);
    // 选图后触发状态更新
    setState(() {
      image1 = pickedFile;
    });
  }),
  child: Container(
    height: MediaQuery.of(context).size.width / 4 - 25,
    width: MediaQuery.of(context).size.width / 4 - 25,
    decoration: BoxDecoration(
      color: Colors.blue.shade900,
      borderRadius: BorderRadius.circular(5),
      // 补充DecorationImage配置，空值时不加载图片保留默认背景
      image: image1 != null
          ? DecorationImage(
              image: FileImage(File(image1!.path)),
              // 图片按比例裁切铺满容器，避免拉伸变形
              fit: BoxFit.cover,
            )
          : null,
    ),
  ),
)

内容的提问来源于stack exchange，提问作者Mt Khalifa