Flutter中使用ImagePainter加载选中图片报错：无法加载文件，如何修复？

你遇到的“无法加载文件”错误主要源于以下几个问题：

• 错误使用ImagePainter.asset方法：该方法用于加载项目assets目录下的内置资源，而你选择的是本地设备文件（File类型），应该使用ImagePainter.file方法。
• State类中图片对象的传递与使用逻辑错误：无需额外定义image_1变量，直接通过widget.image访问传入的File对象即可。
• 将File转字符串的方式错误：image_1.toString()得到的是类似File: '/path/to/image'的格式字符串，并非有效文件路径，且完全没必要转换，直接传入File对象即可。

修复后的代码 #

1. 修改ImagePainterExample组件

class ImagePainterExample extends StatefulWidget {
  const ImagePainterExample({super.key, required this.image});
  final File? image;

  @override
  // ignore: library_private_types_in_public_api
  _ImagePainterExampleState createState() => _ImagePainterExampleState();
}

class _ImagePainterExampleState extends State<ImagePainterExample> {
  final _imageKey = GlobalKey<ImagePainterState>();
  final _key = GlobalKey<ScaffoldState>();

  void saveImage() async {
    final image = await _imageKey.currentState?.exportImage();
    final directory = (await getApplicationDocumentsDirectory()).path;
    await Directory('$directory/sample').create(recursive: true);
    final fullPath =
        '$directory/sample/${DateTime.now().millisecondsSinceEpoch}.png';
    final imgFile = File(fullPath);
    imgFile.writeAsBytesSync(image!);
    await GallerySaver.saveImage(fullPath, toDcim: true);
    // ignore: use_build_context_synchronously
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(
        backgroundColor: Colors.grey[700],
        padding: const EdgeInsets.only(left: 10),
        content: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            const Text("Image Exported successfully.",
                style: TextStyle(color: Colors.white)),
            TextButton(
              onPressed: () => OpenFile.open(fullPath),
              child: Text(
                "Open",
                style: TextStyle(
                  color: Colors.blue[200],
                ),
              ),
            )
          ],
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    // 处理图片为空的边界情况
    if (widget.image == null) {
      return Scaffold(
        appBar: AppBar(title: const Text("Image Painter Example")),
        body: const Center(child: Text("未选择图片")),
      );
    }

    return Scaffold(
      key: _key,
      appBar: AppBar(
        title: const Text("Image Painter Example"),
        actions: [
          IconButton(
            icon: const Icon(Icons.save_alt),
            onPressed: saveImage,
          )
        ],
      ),
      body: ImagePainter.file(
        widget.image!,
        key: _imageKey,
        scalable: true,
        initialStrokeWidth: 2,
        initialColor: Colors.green,
        initialPaintMode: PaintMode.line,
      ),
    );
  }
}

2. 优化跳转按钮逻辑（避免空值跳转）

ElevatedButton(
  onPressed: () {
    if (_image != null) {
      Navigator.push(
        context,
        MaterialPageRoute(builder: (context) => ImagePainterExample(image: _image)),
      );
    } else {
      ScaffoldMessenger.of(context).showSnackBar(
        const SnackBar(content: Text("请先选择图片")),
      );
    }
  }, 
  child: const Text ('Paint Image'),
)

额外注意事项 #

确保你的image_painter依赖库版本支持ImagePainter.file方法，若版本过低请升级pubspec.yaml中的依赖版本。

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