Как обновить виджет с измененной файловой переменной с помощью GetX

Question

В моем приложении есть следующий виджет:

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

и следующую функцию для выбора изображения:

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

Я хочу импортировать файл (_imageFile) и отображать его в текущем виджете после импорта. Я хочу использовать библиотеку GetX. Большое спасибо за любую помощь.

Answer 1

Изменить: переключился на выбор из галереи вместо камеры. Также к вашему сведению pickImage этого пакета устарел, поэтому мы используем вместо него.

Настройте класс ImageController GetX.

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

Инициализировать контроллер, вы можете сделать это в основном методе или методе сборки. Давайте просто сделаем это в основном здесь, прежде чем запускать приложение.

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

Тогда на своей странице вы можете найти контроллер.

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

в onPressed вашей кнопки запустить getImage метод из вашего класса ImageController

      controller.getImage();

Затем, когда вам это нужно в пользовательском интерфейсе, просто добавьте его туда, и все готово.

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