how to fetch an image from gallery or camera in circle avatar?

I have created a page and added a function to import photo from gallery and camera. but I have an issue with the photo selected appearing in the circle avatar. instead of image appearing in circle avatar it appear below all the widgets. can someone say how fix it?

enter image description here

below is the call function

File? image;

Future pickImage() async{
try{
final image = await ImagePicker().pickImage(source: ImageSource.gallery);

if(image == null) return;

final  imageTemp = File(image.path);

setState(() => this.image = imageTemp);
} on PlatformException catch(e){
print('Failed to pick image: $e');
}
}

Future pickImageC() async{
try{
final image = await ImagePicker().pickImage(source: ImageSource.camera);

if(image == null) return;

final  imageTemp = File(image.path);

setState(() => this.image = imageTemp);

} on PlatformException catch(e){
print('Failed to pick image: $e');
}
}

>Solution :

Use Image Provide to set image in CircleAvatar.

image!=null?CircleAvatar(
            radius: 50,
            backgroundImage: FileImage(image!),
          ):Container(),