Flutter imagepicker с помощью getX

Question

Это еще одно мое приключение, посвященное получению работы с изображениями. Я взял этот код из другого источника, но это не решило мою проблему. Я подхожу на собственном примере. Как обновить виджет BoxDecoration выбранным изображением?

Вот мой виджет

                  GestureDetector(
            onTap: () => {_onPictureSelection()},
            child:Container(
              height: screenHeight / 3.2,
              width: screenWidth / 1.8,
              decoration: BoxDecoration(
                image: DecorationImage(
                  image: imageController.image == null
                      ? AssetImage(pathAsset)
                      : FileImage(imageController.image),
                  fit: BoxFit.cover,
                ),
                border: Border.all(
                  width: 3.0,
                  color: Colors.grey,
                ),
                borderRadius: BorderRadius.all(
                    Radius.circular(5.0) //         <--- border radius here
                    ),
              ),
            )),

           _onPictureSelection() async {
              imageController.getImage();
            }

а это мой имиджконтроллер

      class ImageController extends GetxController {
static ImageController get to => Get.find<ImageController>();

File image;
String imagePath;
final _picker = ImagePicker();

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

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

Как я могу обновить свой виджет BoxDecoration изображением, снятым через камеру, и где обернуть obx с моим виджетом?

Answer 1

После долгих попыток и ошибок, наконец, я получил это.

Я обновил свой виджет GestureDetector с помощью GetBuilder

      GestureDetector(
            onTap: () => {_onPictureSelection()},
            child: GetBuilder<ImageController>(
                // specify type as Controller
                init: ImageController(), // intialize with the Controller
                builder: (value) => Container(
                      height: screenHeight / 3.2,
                      width: screenWidth / 1.8,
                      decoration: BoxDecoration(
                        image: DecorationImage(
                          image: imageController.image == null
                              ? AssetImage(pathAsset)
                              : FileImage(imageController.image),
                          fit: BoxFit.cover,
                        ),
                        border: Border.all(
                          width: 3.0,
                          color: Colors.grey,
                        ),
                        borderRadius: BorderRadius.all(Radius.circular(
                                5.0) //         <--- border radius here
                            ),
                      ),
                    ))),

и наконец он заработал.

Answer 2

Замените приведенное ниже условие в своем коде в классе ImageController .

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

Answer 3

Вы можете использовать этот код как есть

       Future pickImageCamera() async {
try {
  final image = await ImagePicker().pickImage(source: ImageSource.camera);
  if (image == null) return;
  final imageTemp = File(image.path);
  this.image = imageTemp;
} on PlatformException catch (e) {
  print('Failed to pick image: $e');
}
update();

} ====>> 2. Установить изображение

       GetBuilder<VehicleDetailsController>(builder: (controller) {
            return Padding(
              padding:
                  const EdgeInsets.symmetric(horizontal: 8.0, vertical: 12),
              child: vehicleController.image != null
                  ? Image.file(
                      vehicleController.image!,
                      height: size.height * 0.35,
                      width: size.width,
                      fit: BoxFit.cover,
                    )
                  : Container(
                      height: size.height * 0.35,
                      width: size.width,
                      decoration: BoxDecoration(color: AppThemeData.perano),
                    ),
            );
          }),