Flutter AlertDialog使用Image.asset遇RenderFlex溢出及资源加载错误

开发者阿泽

2026-8-8

Flutter AlertDialog 本地图片加载与布局溢出问题解决

问题1：本地图片加载失败

错误提示Unable to load asset: assets/recipedia.png，按以下步骤排查：

检查pubspec.yaml配置：确保assets部分缩进正确（YAML要求2空格缩进），配置方式二选一：

flutter:
  assets:
    - assets/  # 加载assets目录下所有文件
    # 或者精确指定单个文件
    # - assets/recipedia.png

验证路径与文件名：确认图片确实存放在assets/目录下，文件名大小写与代码一致（iOS对文件名大小写敏感）。
清理缓存：执行flutter clean，再运行flutter pub get，之后重启项目（热重载可能不生效）。

问题2：RenderFlex溢出错误

AlertDialog标题栏的Row组件未处理空间不足的情况，导致溢出。修改方案如下：

修复后的代码

showDialog(
  context: context,
  builder: (build) {
    return AlertDialog(
      title: Row(
        mainAxisSize: MainAxisSize.min, // 让Row仅占用所需空间
        children: [
          Image.asset(
            'assets/recipedia.png', // 注意和错误提示的文件名一致
            height: 50,
            width: 50,
            fit: BoxFit.contain,
          ),
          const SizedBox(width: 8), // 用SizedBox代替空格，更规范
          const Expanded( // 让Text自动换行，避免溢出
            child: Text('Alert Dialog Title.'),
          ),
        ],
      ),
      content: const Text("Are You Sure Want To Proceed?"),
      actions: <Widget>[
        ElevatedButton(
          child: const Text("YES"),
          onPressed: () {},
        ),
        ElevatedButton(
          child: const Text("CANCEL"),
          onPressed: () {},
        ),
      ],
    );
  },
);