How to remove the blank space in bottom after Container translated to top in Flutter?
383
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
Author by
Nehal
Updated on January 02, 2023Comments
-
Nehal over 1 year
After applying
transform
property to a container, it gives an extra padding in the bottomContainer( 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.