How to remove the blank space in bottom after Container translated to top in Flutter?

Question

After applying transform property to a container, it gives an extra padding in the bottom

Container(
  transform: Matrix4.translationValues(0, -70, 0),
  decoration: BoxDecoration(
    shape: BoxShape.circle,
    border: Border.all(
      color: ZeplinColors.light_blue_grey,
      width: 3.0,
    ),
  ),
  child: const CircleAvatar(
    backgroundImage: NetworkImage(
      'https://pixinvent.com/demo/vuexy-bootstrap-laravel-admin-template/demo-1/images/portrait/small/avatar-s-7.jpg',
    ),
    radius: 55.0,
  ),
),

Example (Inspected with Dart DevTools):

How to avoid this extra padding ?

Here is the DartPad link of what I have tried.

score 0 · Accepted Answer · edited Nov 01 '21 at 15:04

The catch was to NOT use transform and because no matter where you transform your container, it is going to take the space it requires originally. The container only use the space required by it.

So I used a Stack for this image with padding: const EdgeInsets.only(top: circleRadius / 2) for other widgets. Got the idea from this stackoverflow answer. Thanks to it.

I also made a DartPad Solution link

How to remove the blank space in bottom after Container translated to top in Flutter?

1 Answers1