skip to Main Content

I am new to flutter and I want to pick and display an image from either gallery or camera depending on user’s choice.
The gallery opened but when I pick an image, it’s not been displayed but if I move the code for taking the photo from the controller class to the stateful class, the thing works well because with stateful class, I can use setState function rather than the update() used in the controller. I think the issue is that the update function in the controller class is not working

class CustomerController extends GetxController{

PickedFile? _imageFile;
  PickedFile? get pickedFile => _imageFile;
  final  _imagePicker = ImagePicker();

//for picking an image from either gallery or Camera
  Future<void> takePhoto(ImageSource source)async{
    _imageFile = await _imagePicker.getImage(
        source: source);
    update();
  }
}

class SignUpScreen extends StatefulWidget {
  const SignUpScreen({Key? key}) : super(key: key);

  @override
  _SignUpScreenState createState() => _SignUpScreenState();
}

class _SignUpScreenState extends State<SignUpScreen> {

var imageController = Get.find<CustomerController>();

Positioned(
            top: Dimension.height40+Dimension.height30,
            left: MediaQuery.of(context).size.width /2-75,
            child: Container(
              child: CircleAvatar(
                radius: 70,
                backgroundImage: imageController.pickedFile==null? AssetImage("assets/images/profile.png"):
                FileImage(File(imageController.pickedFile!.path)) as ImageProvider
              ),
            )
          ),
        ],
      ),
    );
  }
  Widget _bottomSheetProfile(){
    return Container(
      height: Dimension.height20*8,
      width: MediaQuery.of(context).size.width,
      padding: EdgeInsets.symmetric(horizontal: 20,vertical: 20),
      child: Column(
        children: [
          Text(
            "Choose A Profile Photo",
            style: TextStyle(
              fontSize: 20,
              color: Color(0xff8F6ED5)
            ),
          ),
          SizedBox(
            height: Dimension.height20/2,
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              IconButton(
              onPressed: (){
                imageController.takePhoto(ImageSource.camera);
              },
              icon: Icon(Icons.camera_alt_rounded,
                color: Color(0xff8F6ED5),
              size: 30,)),
              IconButton(
                  onPressed: (){
                    imageController.takePhoto(ImageSource.gallery);
                  },
                  icon: Icon(Icons.image,
                    color: Color(0xff8F6ED5),
                    size: 30,))
            ],
          ),
          SizedBox(height: Dimension.height20/5,),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: const [
              Text(
                "Camera",
                style: TextStyle(
                  fontSize: 18,
                  color:Color(0xff8F6ED5)
                ),
              ),
              Text(
                "Gallery",
                style: TextStyle(
                    fontSize: 18,
                    color:Color(0xff8F6ED5)
                ),
              )
            ],
          )
        ],
      ),
    );
  }

  _showButtonSheet(){
    showModalBottomSheet(
        context: context,
        builder: ((builder)=> _bottomSheetProfile()));
  }

2

Answers


  1. wrap the container with GetBuilder like below example

    GetBuilder<ImageController>(
                      builder: (_) {
                        return controller.image != null
                            ? Image.file(controller.image)
                            : Container();
                      },
                    ),
    
    Login or Signup to reply.
  2. You can also use Obx to observe the file :-

                  Obx(
                      () => imageController.image != null
                            ? Image.file(imageController.image)
                            : Container();
                    )
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search