Flutter结合Getx使用image_picker时仅热重载后图片才更新如何解决？

问题根因 #

• 代码逻辑错误：_pickImage方法中的判空条件写错，判断对象是方法pickImage而非返回的选中图片实例pickedImage，该条件永远为true，属于潜在隐患
• GetX状态更新方式不匹配：控制器中调用的update()是GetBuilder手动更新模式的专属API，但是界面代码没有用GetBuilder包裹需要更新的组件，状态变更无法触发界面重绘
• 已定义的响应式变量seletedImagePath没有实际投入使用，属于无效代码

修复方案 #

方案1：使用GetBuilder手动更新模式 #

控制器代码修复

import 'dart:io';
import 'package:get/get.dart';
import 'package:image_picker/image_picker.dart';
 
class ImagePickerController extends GetxController {
  File? pickedImageFile;
 
  void _pickImage() async {
    final picker = ImagePicker();
    final pickedImage = await picker.pickImage(source: ImageSource.camera);
    // 修正判空条件，判断选中的图片实例是否非空
    if (pickedImage != null) {
      pickedImageFile = File(pickedImage.path);
    }
    update();
  }
 
  void Function() get pickImage => _pickImage;
}

界面代码修复

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:flutter_chatting_app/src/controllers/image_picker_controller.dart';
import 'package:get/get.dart';
 
class UserImagePicker extends GetView<ImagePickerController> {
  UserImagePicker({Key? key}) : super(key: key);
 
  @override
  Widget build(BuildContext context) {
    // 用GetBuilder包裹组件监听update()触发的更新
    return GetBuilder<ImagePickerController>(
      builder: (controller) => Column(
        children: [
          CircleAvatar(
            radius: 40,
            backgroundColor: Colors.grey,
            backgroundImage: controller.pickedImageFile != null
                ? FileImage(controller.pickedImageFile!)
                : null,
          ),
          TextButton.icon(
            onPressed: controller.pickImage,
            icon: const Icon(Icons.image),
            label: const Text('Add Image'),
          ),
        ],
      ),
    );
  }
}

方案2：使用Obx响应式自动更新模式（GetX推荐写法） #

控制器代码修复

import 'dart:io';
import 'package:get/get.dart';
import 'package:image_picker/image_picker.dart';
 
class ImagePickerController extends GetxController {
  // 把图片文件定义为响应式变量
  final pickedImageFile = Rxn<File>();
 
  void _pickImage() async {
    final picker = ImagePicker();
    final pickedImage = await picker.pickImage(source: ImageSource.camera);
    if (pickedImage != null) {
      pickedImageFile.value = File(pickedImage.path);
    }
    // 响应式变量赋值自动触发更新，不需要调用update()
  }
 
  void Function() get pickImage => _pickImage;
}

界面代码修复

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:flutter_chatting_app/src/controllers/image_picker_controller.dart';
import 'package:get/get.dart';
 
class UserImagePicker extends GetView<ImagePickerController> {
  UserImagePicker({Key? key}) : super(key: key);
 
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        // 用Obx包裹监听响应式变量的组件
        Obx(() => CircleAvatar(
          radius: 40,
          backgroundColor: Colors.grey,
          backgroundImage: controller.pickedImageFile.value != null
              ? FileImage(controller.pickedImageFile.value!)
              : null,
        )),
        TextButton.icon(
          onPressed: controller.pickImage,
          icon: const Icon(Icons.image),
          label: const Text('Add Image'),
        ),
      ],
    );
  }
}

调试控制台输出的Scanned xxx to null属于系统正常日志，不影响业务功能，无需处理。

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