The photo does not show up with image_picker- Flutter

Issue

I cant handle with image_picker. When I select a photo, I should see the photo instead of the avatar icon, but I don’t know why it doesn’t work that way. I’m new in flutter and maybe it should be solved in a different way.

The orange circle should stay and the icon should change, any advice will be great for me

 Widget _avatar() {
   return const CircleAvatar(
       radius: 83,
  backgroundColor: Colors.orange,
  child: CircleAvatar(
    backgroundColor: Colors.white,
    radius: 80,
    child: Icon(Icons.person_outline, size: 60, color: Colors.orange),
  ),
);
}

File? _image;
final picker = ImagePicker();

Future getImage() async {
  final pickedFile = await picker.getImage(
    source: ImageSource.gallery, maxWidth: 1800, maxHeight: 1800);

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

Future getCameraImage() async {
final pickedFile = await picker.getImage(
  source: ImageSource.camera,
  maxWidth: 1800,
  maxHeight: 1800,
);

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

void _showPicker(BuildContext context) {
showModalBottomSheet<void>(
    context: context,
    builder: (BuildContext bc) {
      return SafeArea(
        child: Container(
          child: Wrap(
            children: <Widget>[
              ListTile(
                  leading: new Icon(Icons.photo_size_select_large_sharp),
                  title: new Text('Photo Library'),
                  onTap: () {
                    getImage();
                    Navigator.of(context).pop();
                  }),
              ListTile(
                leading: new Icon(Icons.photo_camera),
                title: new Text('Camera'),
                onTap: () {
                  getCameraImage();
                  Navigator.of(context).pop();
                },
              ),
            ],
          ),
        ),
      );
    });
}

Widget _changeAvatarButton(BuildContext context) {
return Column(
  children: [
  CircleAvatar(
  radius: 83,
  backgroundColor: Colors.orange,
      child: _image == null ? _avatar() : Image.file(_image!),
    ),
    CustomButtonText(
        onPressed: () {
          _showPicker(context);
        },
        title: 'photo',
        textColor: Colors.teal),
  ],
);
  }

enter image description here

Solution

Change Your CircleAvtar widget with the below one and if you don’t want to show the orange circle then set the backgroundColor: _image == null ? Colors.orange : Colors.transparent.

CircleAvatar(
  radius: 83,
  backgroundColor: Colors.orange,
  child: _image == null
      ? _avatar()
      : ClipRRect(
          borderRadius: BorderRadius.circular(83),
          child: Image.file(
            _image!,
            height: 160, // Change the size up or down accordingly border radius
            width: 160, // Change the size up or down accordingly border radius
            fit: BoxFit.cover,
          )),
),

Answered By – Sheetal Ghori

Answer Checked By – Pedro (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published.