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
wrap the container with GetBuilder like below example
You can also use Obx to observe the file :-