Flutter with Getx ImagePicker 无法正常工作

Question

为什么只有保存文件时图像才会更新？

image_picker版本

image_picker: ^0.8.4+3

我的ImagePicker相关代码

// image_picker_controller.dart
// controller
 
import 'dart:io';
import 'package:get/get.dart';
import 'package:image_picker/image_picker.dart';
 
class ImagePickerController extends GetxController {
  File? pickedImageFile;
 
  var seletedImagePath = ''.obs;
 
  void _pickImage() async {
    final picker = ImagePicker();
    // final pickedImage = await picker.pickImage(source: ImageSource.gallery);
    final pickedImage = await picker.pickImage(source: ImageSource.camera);
    if (pickImage != null) {
      pickedImageFile = File(pickedImage!.path);
    }
 
    update();
  }
 
  void Function() get pickImage => _pickImage;
}

查看页面

// user_image_picker.dart
// page screen
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: [
        CircleAvatar(
          radius: 40,
          backgroundColor: Colors.grey,
          backgroundImage: controller.pickedImageFile != null
              ? FileImage(controller.pickedImageFile as File)
              : null,
        ),
        TextButton.icon(
          onPressed: controller.pickImage,
          icon: Icon(Icons.image),
          label: Text('Add Image'),
        ),
      ],
    );
  }
}

You can have a look at what happens in this gif link

当我使用 ImagePicker 添加图像时，DEBUG CONSOLE 显示如下，并且图像未更新。

// DEBUG CONSOLE
D/MediaScannerConnection( 7062): Scanned /data/user/0/com.example.flutter_chatting_app/cache/bc149d80-91bb-487d-b2b7-3597357c4d182105624148556557573.jpg to null

但是，在我保存代码后，图像出现了。我认为状态没有更新，但我不知道为什么会这样。

我用谷歌搜索了这个问题，但我没弄明白。

拜托，有人帮帮我。

Answer 1

我使用了默认的 Stateless 和 GetBuilder 组合并且有效：

class ImagePickerController extends GetxController {
  File? pickedImageFile;
  void _pickImage() async {
    final picker = ImagePicker();
    final pickedImage = await picker.pickImage(source: ImageSource.camera);
    pickedImageFile = File(pickedImage!.path);
    update();
  }

  void Function() get pickImage => _pickImage;
}

和视图：

class UserImagePicker extends StatelessWidget {
  const UserImagePicker({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GetBuilder<ImagePickerController>(builder: (logic) {
      return Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          CircleAvatar(
            radius: 40,
            backgroundColor: Colors.grey,
            backgroundImage:  logic.pickedImageFile != null
                ? FileImage(logic.pickedImageFile as File)
                : null,
          ),
          TextButton.icon(
            onPressed: logic.pickImage,
            icon: const Icon(Icons.image),
            label: const Text('Add Image'),
          ),
        ],
      );
    });
  }
}

Flutter with Getx ImagePicker 无法正常工作

Flutter with Getx ImagePicker does not work properly

null

flutter

imagepicker

flutter-getx