Unable to fill the CircleAvatar with the selected image from image_picker - flutter

Question

I'm getting the image from the image_picker package and loading the image in CircleAvatar but image is not filling across the circle. I have used boxfit.fill in the ClipRRect and also in the ClipOval.
import 'package:image_picker/image_picker.dart';
class EditProfileScreen extends StatefulWidget {
static const String routename = "/EditProfileScreen";
const EditProfileScreen({Key? key}) : super(key: key);
#override
_EditProfileScreenState createState() => _EditProfileScreenState();
}
class _EditProfileScreenState extends BaseState<EditProfileScreen> {
final ImagePicker _picker = ImagePicker();
XFile? _imageFileSelected;
set _imageFile(XFile? value) {
_imageFileSelected = value == null ? null : value;
}
void _onImageButtonPressed(ImageSource source,
{BuildContext? context, bool isMultiImage = false}) async {
try {
final pickedFile = await _picker.pickImage(
source: source, maxHeight: 160, maxWidth: 200);
setState(() {
_imageFile = pickedFile;
});
} catch (e) {
setState(() {
_pickImageError = e;
});
}
}
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: AppWidgets.backgroundColor,
appBar: AppWidgets.appbar(text: "Edit Profile", actionWidgets: []),
body: SingleChildScrollView(
child: Container(
margin: EdgeInsets.fromLTRB(20, 16, 20, 20),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Center(
child: Column(
children: [
CircleAvatar(
child: ClipRRect(
borderRadius: BorderRadius.circular(48),
child: (_imageFileSelected?.path == null)
? Image.network(
profileImagePath,
)
: Image.file(
File(_imageFileSelected!.path),
),
),
radius: 50.0,
),
SizedBox(
height: 10,
),
TextButton(
onPressed: () {
_onImageButtonPressed(ImageSource.gallery,
context: context);
},
child: AppWidgets.text(
string: 'Change Photo',
weight: FontWeight.w500,
textColor: AppWidgets.buttonColor,
size: 16),
),
],
),
),
),
);
}
Note:
I have used boxfit no luck.
I tried clipoval in the child didn't work.
I tried to put images in backgroundImage and foregroundImage unable to do

Answer 1

Instead of using circleavatar you can use Container with background property Try this code.
Container(
height: 88.5.h,
width: 88.5.w,
decoration: BoxDecoration(
image: DecorationImage(
fit: BoxFit.cover,
image: CachedNetworkImageProvider(
state.details["profile_photo"]),
shape: BoxShape.circle,
border: Border.all(
color: ColorConstant.buttonColor,
width: 5.w)),
),

Answer 2

I use this to store the updated picture locally.
ps. this already has a picture which can be changed but you can just use background color to hold instead.
File _image;
String _imagepath;
Future _getImage() async {
var image = await ImagePicker.pickImage(source: ImageSource.gallery);
if (image != null) {
var cropped = await ImageCropper.cropImage(
sourcePath: image.path,
maxHeight: 100,
maxWidth: 100,
aspectRatio: CropAspectRatio(ratioX: 1, ratioY: 1),
cropStyle: CropStyle.circle,
compressQuality: 100,
);
this.setState(() {
_image = cropped;
});
saveImage(_image.path);
}
}
void saveImage(path) async {
SharedPreferences saveimage = await SharedPreferences.getInstance();
saveimage.setString('imagepath', path);
}
void LoadImage() async {
SharedPreferences saveimage = await SharedPreferences.getInstance();
setState(() {
_imagepath = saveimage.getString('imagepath');
});
}
#override
void initState() {
// TODO: implement initState
super.initState();
LoadImage();
}
#override
Widget build(BuildContext context) {
return GestureDetector(
onTap: _getImage,
child: Container(
//padding: EdgeInsets.all(2),
decoration: BoxDecoration(
border: Border.all(
color: Colors.white,
width: 5.0,
),
shape: BoxShape.circle,
),
child: _imagepath != null
? CircleAvatar(
backgroundImage: FileImage(File(_imagepath)),
radius: 60,
)
: CircleAvatar(
backgroundImage: _image != null
? FileImage(_image)
: AssetImage('assets/mypic1.jpg'),
backgroundColor: Colors.blue[200],
radius: 60,
),
),
);