The photo does not show up with image_picker- Flutter

Question

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

Answer 1

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,
          )),
),

Answer 2

It looks all fine with the state update and the image picking. What you should be paying attention at is the async functions, because you need to wait for the images before updating your widgets, and getCameraImage() and getImage() are a Future. Check if adding await solves the problem.

ListTile(
                  leading: new Icon(Icons.photo_size_select_large_sharp),
                  title: new Text('Photo Library'),
                  onTap: () async {
                    await getImage();
                    Navigator.of(context).pop();
                  }),
              ListTile(
                leading: new Icon(Icons.photo_camera),
                title: new Text('Camera'),
                onTap: () async {
                  await getCameraImage();
                  Navigator.of(context).pop();
                },
              ),