CODEWITHSUNDEEP
flutterdartmobile
anibal-bojorquez
anibal-bojorquez

Reputation: 43

Remove (what seems like) margin around widget in Container

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.

enter image description here

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;
  }
}

Upvotes: 1

Views: 248

Answers (2)

Paulo
Paulo

Reputation: 694

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

Upvotes: 1

Davis
Davis

Reputation: 1427

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

Upvotes: 0

Related Questions