Flutter使用GetX与ExternalPath渲染图片遇PathNotFoundException问题求助

问题场景 #

在Flutter中使用GetX框架，通过HomeController调用ExternalPath获取手机存储中Pictures/Telegram/image1.jpeg的路径，随后在HomeView中尝试用Image.file渲染该图片，但抛出PathNotFoundException，错误信息如下：

Cannot retrieve length of file, path = '/storage/emulated/0/Pictures/Telegram/image1.jpeg' (OS Error: No such file or directory, errno = 2)

现有代码 #

HomeController代码 #

class HomeController extends GetxController {
  //TODO: Implement HomeController

  TextEditingController fileName = TextEditingController();
  File? image;
  List<String> exPath = [];
  String? path;

  Future GetFiles() async {
    try {
      final picPath = await ExternalPath.getExternalStoragePublicDirectory(
          ExternalPath.DIRECTORY_PICTURES);
      path =
          "$picPath/Telegram/image1.jpeg"; // this is just the example of my directory
      print(path);
    } catch (e) {
      print('Error getting external storage path: $e');
    }
  }

  @override
  void onInit() {
    super.onInit();
  }

  @override
  void onReady() {
    super.onReady();
  }

  @override
  void onClose() {
    super.onClose();
  }
}

HomeView代码 #

class HomeView extends GetView<HomeController> {
  const HomeView({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    final controller = Get.put(HomeController());
    return Scaffold(
        body: SafeArea(
      child: Container(
        padding: EdgeInsets.all(25.0),
        child: Wrap(
          runSpacing: 15,
          children: [
            Image.file(File(controller.path!)), // the image must be rendered here
            InputField(label: "File name  ", controller: controller.fileName),
            SizedBox(
                width: 1.sw,
                height: 50.h,
                child: ButtonActive("Search", onTap: () => controller.GetFiles()))
          ],
        ),
      ),
    ));
  }
}

解决方法 #

1. 确认文件真实存在 #

先手动验证/storage/emulated/0/Pictures/Telegram/image1.jpeg路径下是否存在目标图片：

• 打开手机文件管理器，导航到对应目录检查
• 也可以在代码中添加文件存在性校验，避免加载不存在的路径

2. 修复GetX状态更新问题 #

原代码中path不是响应式变量，调用GetFiles后路径更新但视图不会自动刷新，且初始化时path为null直接使用!会触发空指针：

• 将path改为GetX的响应式变量Rx<String?>
• 更新路径时使用path.value触发状态通知
• 用Obx包裹图片组件，监听路径变化并动态渲染

3. 处理存储权限 #

Android不同版本对存储访问有不同权限要求：

• 在android/app/src/main/AndroidManifest.xml中添加权限：

  <!-- Android 10-12 适配 -->
  <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
  <!-- Android 13+ 适配 -->
  <uses-permission android:name="android.permission.READ_MEDIA_IMAGES" />
  

• Android 10及以上，可在<application>标签添加android:requestLegacyExternalStorage="true"，兼容旧存储访问逻辑：

  <application
      ...
      android:requestLegacyExternalStorage="true">
      ...
  </application>
  

4. 避免控制器重复初始化 #

HomeView继承自GetView，已经内置了对应控制器实例，无需再调用Get.put(HomeController())，否则会创建多个控制器实例，导致视图与业务逻辑的控制器不一致。

修改后的完整代码 #

HomeController #

class HomeController extends GetxController {
  TextEditingController fileName = TextEditingController();
  File? image;
  List<String> exPath = [];
  // 改为响应式变量
  Rx<String?> path = Rx<String?>(null);

  Future<void> getFiles() async {
    try {
      final picPath = await ExternalPath.getExternalStoragePublicDirectory(
          ExternalPath.DIRECTORY_PICTURES);
      final targetPath = "$picPath/Telegram/image1.jpeg";
      // 检查文件是否存在
      final file = File(targetPath);
      if (await file.exists()) {
        path.value = targetPath;
        print("文件存在，路径：$targetPath");
      } else {
        print("文件不存在：$targetPath");
        path.value = null;
      }
    } catch (e) {
      print('获取外部存储路径错误: $e');
      path.value = null;
    }
  }
}

HomeView #

class HomeView extends GetView<HomeController> {
  const HomeView({Key? key}) : super(key: key);
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Container(
          padding: EdgeInsets.all(25.0),
          child: Wrap(
            runSpacing: 15,
            children: [
              // 用Obx监听路径变化，处理空状态
              Obx(() {
                if (controller.path.value == null) {
                  return Text("请点击搜索按钮加载图片");
                }
                return Image.file(File(controller.path.value!));
              }),
              InputField(label: "文件名  ", controller: controller.fileName),
              SizedBox(
                width: 1.sw,
                height: 50.h,
                child: ButtonActive("搜索", onTap: () => controller.getFiles())
              )
            ],
          ),
        ),
      ),
    );
  }
}

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