Unable to fill the CircleAvatar with the selected image from image

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

CodePudding user response：

Instead of using CircleAvatar, I have used Container and ClipRRect, and it works fine.

 Container(
            margin: EdgeInsets.fromLTRB(8.0, 0.0, 8.0, 0),
            alignment: Alignment.center,
            width: 48,
            child: ClipRRect(
              borderRadius: BorderRadius.circular(10000.0),
              child: (_imageFileSelected?.path == null ||
                      _imageFileSelected?.path!.isEmpty)
                  ? Image.network(
                        profileImagePath,
                      )
                  : Image.file(
                        File(_imageFileSelected!.path),
                      ),
            ),
          ),

Let me know if it works for you.

CodePudding user response：

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