Flutter中使用GetX Obx实现多图选择器及解决FileImage不显示问题

1. 依赖准备 #

先在pubspec.yaml中添加必要依赖：

dependencies:
  flutter:
    sdk: flutter
  get: ^4.6.5
  image_picker: ^1.0.4

2. 创建GetX状态控制器 #

核心是用RxList存储选中的图片文件，确保状态变化能被Obx监听：

import 'dart:io';
import 'package:get/get.dart';
import 'package:image_picker/image_picker.dart';

class ImagePickerController extends GetxController {
  // 用RxList存储选中的图片，确保状态可观察
  final RxList<File> selectedImages = <File>[].obs;
  final ImagePicker _picker = ImagePicker();

  // 多选图片方法
  Future<void> pickMultipleImages() async {
    final List<XFile>? pickedFiles = await _picker.pickMultiImage(
      imageQuality: 80,
      maxWidth: 1920,
    );

    if (pickedFiles != null) {
      // 将XFile转为File，添加到RxList中
      selectedImages.addAll(pickedFiles.map((xFile) => File(xFile.path)));
    }
  }

  // 移除单张图片
  void removeImage(int index) {
    selectedImages.removeAt(index);
  }
}

3. 实现UI页面 #

用Obx包裹图片展示区域，确保状态变化时UI自动刷新：

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'image_picker_controller.dart';

class ImagePickerPage extends StatelessWidget {
  // 初始化控制器
  final ImagePickerController controller = Get.put(ImagePickerController());

  ImagePickerPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('多图片选择器')),
      body: Column(
        children: [
          // 选择图片按钮
          ElevatedButton(
            onPressed: controller.pickMultipleImages,
            child: const Text('选择图片'),
          ),
          // 用Obx监听图片列表变化，自动刷新UI
          Expanded(
            child: Obx(
              () => GridView.builder(
                padding: const EdgeInsets.all(16),
                gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: 3,
                  crossAxisSpacing: 8,
                  mainAxisSpacing: 8,
                ),
                itemCount: controller.selectedImages.length,
                itemBuilder: (context, index) {
                  final File image = controller.selectedImages[index];
                  return Stack(
                    fit: StackFit.expand,
                    children: [
                      // 直接用Image.file展示，比手动FileImage更可靠
                      Image.file(
                        image,
                        fit: BoxFit.cover,
                      ),
                      // 删除按钮
                      Positioned(
                        top: 4,
                        right: 4,
                        child: GestureDetector(
                          onTap: () => controller.removeImage(index),
                          child: Container(
                            padding: const EdgeInsets.all(4),
                            decoration: BoxDecoration(
                              color: Colors.black54,
                              borderRadius: BorderRadius.circular(12),
                            ),
                            child: const Icon(Icons.close, color: Colors.white, size: 16),
                          ),
                        ),
                      ),
                    ],
                  );
                },
              ),
            ),
          ),
        ],
      ),
    );
  }
}

4. 解决FileImage无法显示的常见问题 #

如果遇到FileImage不显示的情况，检查以下几点：

• 确保列表是RxList：必须用RxList<File>而非普通List<File>，否则Obx无法监听状态变化
• 正确更新列表：添加/删除图片时，要调用RxList的add/addAll/removeAt等方法，或者直接赋值selectedImages.value = newList，不能直接修改内部元素
• 文件有效性检查：确认选中的File路径正确，文件存在（可通过image.existsSync()验证）
• 权限配置：Android端需在AndroidManifest.xml中添加READ_MEDIA_IMAGES权限，iOS端在Info.plist中配置照片访问权限
• 优先用Image.file：Image.file(image)内部已处理FileImage的创建，比手动Image(image: FileImage(image))更少出错

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