How to update Widget with changed File variable using GetX

Question

I have following widget in my app:

 @override
  Widget build(BuildContext context) {

        return Scaffold(

          bottomNavigationBar: BottomAppBar(
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: <Widget>[
               
                IconButton(
                  icon: Icon(
                    Icons.photo_library,
                    size: 30,
                  ),
                  onPressed: () => _pickImage(ImageSource.gallery),
                  color: Colors.pink,
                ),
              ],
            ),
          ),
          body: ListView(
            children: <Widget>[
              if (_imageFile != null) ...[
                Container(
                    padding: EdgeInsets.all(32),
                    child: Image.file(_imageFile)),
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: <Widget>[
                   
                    FlatButton(
                      color: Colors.blue,
                      child: Icon(Icons.arrow_forward_ios),
                      onPressed: () =>
                          Get.toNamed(
                            AppRoutes.OCR_DETAILS,
                            arguments: {'image': _imageFile},
                          ),
                    ),
                  ],
                ),
              ]
            ],
          )
        );
      }

and following function to pick image:

Future _pickImage(ImageSource source) async {
    File selected = await ImagePicker.pickImage(source: source);
      _imageFile = selected;
      _imageLoaded=true;
  }

I would like to import file (_imageFile) and display it on current widget once is imported. I would like to use GetX library. Thank you very much for any help.

Have you found any solutions to this yet? – Hanis Mar 15 '21 at 23:50 — Hanis, Mar 15 '21 at 23:50

Loren.A · Answer 1 · 2021-02-18T18:12:40.467

Edit: Switched to choosing from gallery instead of camera. Also FYI the pickImage of that package is deprecated so we're using getImage instead.

Set up an ImageController GetX class.

class ImageController extends GetxController {
  File image;
  final picker = ImagePicker();

  Future<void> getImage() async {
    final pickedFile = await picker.getImage(source: ImageSource.gallery);

    if (pickedFile != null) {
      image = File(pickedFile.path);
    } else {
      print('No image selected.');
    }
    update();
  }
}

Initialize the controller, you can do it in your main or build method. Let's just do it in main here before you run your app.

Get.lazyPut<ImageController>(() => ImageController(), fenix: true);

Then on your page you can find the controller.

final controller = Get.find<ImageController>();

In the onPressed of your button fire the getImage method from your ImageController class

controller.getImage();

Then where ever you need it in your UI just throw this in there and you're good to go.

      GetBuilder<ImageController>(
                  builder: (_) {
                    return controller.image != null
                        ? Image.file(controller.image)
                        : Container();
                  },
                ),

Thanks a lot for help. I think I'm pretty close to the solution, but somehow I dont see imported file in widget. Maybe you could take a look at the code: https://github.com/ertiusmeo/flutter-getx-scaffolding-example-main — laxsore, Feb 18 '21 at 22:07
You didn't wrap the `Image.file(controller.image)` in a `GetBuilder< PickImageController>`, so there's nothing telling it to rebuild. That should do it for ya. — Loren.A, Feb 18 '21 at 22:17

How to update Widget with changed File variable using GetX

1 Answers1