Remove (what seems like) margin around widget in Container-CodePudding

I'm having trouble removing the vertical space around the 'ClipOval' widgets within this Column. My goal (at this moment) is to have no space between them but I can't seem to figure out how to accomplish that.

Column(
        mainAxisSize: MainAxisSize.max,
        children: [
          ClipOval(
            child: SizedBox.fromSize(
              size: const Size.fromRadius(100), // Image radius
              child: Image.asset('assets/images/home_logo.png', fit: BoxFit.cover),
            ),
          ),
          ClipOval(
            child: SizedBox.fromSize(
              size: const Size.fromRadius(100), // Image radius
              child: Image.asset('assets/images/home_logo.png', fit: BoxFit.cover),
            ),
          )
        ],
      )

I tried creating a custom clipper but it would have the image removed entirely. Here's the code I tried for the clipper. My approach here was having the top margin set to 0 in hopes of having the top margin removed.

class MyClip extends CustomClipper<Rect> {
  Rect getClip(Size size) {
    return Rect.fromLTWH(100, 0, 100, 100);
  }

  bool shouldReclip(oldClipper) {
    return false;
  }
}

CodePudding user response：

Try using CircleAvatar with ClipRRect instead.

Sample Code

 Column(
      mainAxisSize: MainAxisSize.max,
      children: [
        CircleAvatar(
          radius: 100,
          child: ClipRRect(
            child: Image.asset('assets/images/home_logo.png'),
          ),
        ),
        CircleAvatar(
          radius: 100,
          child: ClipRRect(
            child: Image.asset('assets/images/home_logo.png'),
          ),
        ),
      ],
    ),

Hope this help.

Explanation

On your current approach you have a Sizebox with size: const Size.fromRadius(100) while you have a small image less than the Sizebox size

You could also try to replace BoxFit.contain to BoxFit.fill but this will stretch your image

 Column(
      mainAxisSize: MainAxisSize.max,
      children: [
        ClipOval(
          child: SizedBox.fromSize(
            size: const Size.fromRadius(100), // Image radius
            child: Image.asset('assets/images/home_logo.png',
                fit: BoxFit.fill),
          ),
        ),
        ClipOval(
          child: SizedBox.fromSize(
            size: const Size.fromRadius(100), // Image radius
            child: Image.asset('assets/images/home_logo.png',
                fit: BoxFit.fill),
          ),
        ),
      ],
    ),

CodePudding user response：

Have you tried changing the value of mainAxisAlignment: to mainAxisAlignment: MainAxisAlignment.start and crossAxisAlignment: CrossAxisAlignment.start