How do I make a FadeInImage.assetNetwork image circular in Flutter?

Question

How do I control the shape of a FadeInImage.assetNetwork() Image?

Below is my code for displaying a users profile picture, where the picture is received from firebase (as a url string): myAccountState.customUser.profilePic, and can be altered by calling the _pickImage() function.

Center(
            child: InkWell(
              onTap: () {
                _pickImage();
              },
              child: CircleAvatar(
                radius: 40.0,
                backgroundColor: Colors.transparent,
                child: FadeInImage.assetNetwork(
                  placeholder: 'images/whiteBackground.png',
                  image: myAccountState.customUser.profilePic,
                ),
              ),
            ),
          ),

The image is displayed as a square and I want it to be a circle. I have created the picture as a circle by calling the code below, however NetworkImage() doesn't accept myAccountState.customUser.profilePic as a valid string.

CircleAvatar(
              radius: 40.0,
              backgroundColor: Colors.orange,
              foregroundImage: NetworkImage(
                  'image_url_here'),
              child: InkWell(
                customBorder: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(20),
                ),
                splashColor: Colors.orangeAccent,
                onTap: () {
                  _pickImage();
                },
              ),
            ),

Edit: Another totally different solution would be cropping the profile picture as a circle... I am cropping the picture as a circle using the image_cropper package (three functions called in order below), however the image is being saved still as a square in firebase. Does anyone know if this is normal? or am I making a mistake here?

Future _pickImage() async {
    final pickedImage = await ImagePicker().pickImage(
      source: ImageSource.gallery,
    );
    imageFile = pickedImage != null ? File(pickedImage.path) : null;
    if (imageFile != null) {
      setState(() {
        state = PicState.picked;
        _cropImage();
      });
    }
  }

  Future _cropImage() async {
    File? croppedFile = await ImageCropper().cropImage(
        sourcePath: imageFile!.path,
        cropStyle: CropStyle.circle,
        aspectRatioPresets: Platform.isAndroid
            ? [
                CropAspectRatioPreset.square,
                CropAspectRatioPreset.ratio3x2,
                CropAspectRatioPreset.original,
                CropAspectRatioPreset.ratio4x3,
                CropAspectRatioPreset.ratio16x9
              ]
            : [
                CropAspectRatioPreset.original,
                CropAspectRatioPreset.square,
                CropAspectRatioPreset.ratio3x2,
                CropAspectRatioPreset.ratio4x3,
                CropAspectRatioPreset.ratio5x3,
                CropAspectRatioPreset.ratio5x4,
                CropAspectRatioPreset.ratio7x5,
                CropAspectRatioPreset.ratio16x9
              ],
        androidUiSettings: AndroidUiSettings(
            toolbarTitle: 'Cropper',
            toolbarColor: Colors.deepOrange,
            toolbarWidgetColor: Colors.white,
            initAspectRatio: CropAspectRatioPreset.original,
            lockAspectRatio: false),
        iosUiSettings: IOSUiSettings(
          title: 'Crop your Profile Picture',
        ));
    if (croppedFile != null) {
      imageFile = croppedFile;
      setState(() {
        state = PicState.cropped;
        _uploadImage();
      });
    }
  }

  Future<void> _uploadImage() async {
    final myAccountState = Provider.of<MyAccountState>(context, listen: false);
    try {
      await profileStrg
          .child('profilePic.${myAccountState.customUser.uid}')
          .putFile(imageFile!);
      _updateProfilePic();
    } on CustomError catch (e) {
      errorDialog(context, e);
    }
  }

Answer 1

Instead of using an InkWell, wrap your CicularAvatar with a GestureDetector. Inkwells are prebuilt with fixed attributes like padding etc, and I wouldn't be surprised if it's preventing a circular image as the button.