Flutter with Getx ImagePicker does not work properly

Question

Why does the image update only when I save file?

image_picker version

image_picker: ^0.8.4+3

My Code related to 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;
}

view page

// 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

When I add image with ImagePicker, DEBUG CONSOLE shows below, and image isn't updated.

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

but, after I save codes, the image appear. I think the state doens't update, but I have no idea why it happens.

I've googled about this problem, but I couldn't figure it out.

Please, somebody help me.

Did you call setState() after you have picked the file since Flutter does not know whether to update UI unless you have setState() after you have picked the image — Lakmal Fernando, Oct 21 '21 at 10:18
Thank you, Lakmal Fernando for your comment, I am trying to use Getx mainly, so I didn't consider using StatefulWidget and setState(). If Getx doesn't work then, I will take your advice. — Ryan, Oct 21 '21 at 11:48

score 0 · Accepted Answer · answered Oct 21 '21 at 09:43

I used the default Stateless and GetBuilder combination and it worked:

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;
}

and the view:

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'),
          ),
        ],
      );
    });
  }
}

Thank you P4yam for your answer, It works, but could you explain why this works and using GetView does not work? And I also wonder that DEBUG CONSOLE is still showing below, D/MediaScannerConnection( 7062): Scanned /data/user/0/com.example.flutter_chatting_app/cache/bc149d80-91bb-487d-b2b7-3597357c4d182105624148556557573.jpg to null Doesn't it matter? — Ryan, Oct 21 '21 at 11:43
@김상준 GetView sometimes looks buggy and I remember having this exact same bug befor(I think you can find more about it in getx GitHub repo). And about the log, it is not an error but more of a detailed log fired by a library. — Payam Asefi, Oct 21 '21 at 15:31
Thank you for your comment. I will have a look at getx Github repo :) — Ryan, Oct 22 '21 at 06:09

Flutter with Getx ImagePicker does not work properly

1 Answers1