Reputation: 12433
In the image below, I need to make the green child to take up all of the grey container on the left side, so I don't want any padding in the container it is in.
code:
return Column(children: [
Container(
padding: EdgeInsets.all(0),
margin: EdgeInsets.all(0),
alignment: Alignment.topLeft,
color: Colors.grey,
width: double.infinity,
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(
flex: 1,
child: AspectRatio(
aspectRatio: 1 / 1,
child: VpBaseCard(
elevation: 0,
width: double.infinity,
children: [
FaIcon(FontAwesomeIcons.cameraRetro,
size: 100,
color: Colors.white.withOpacity(0.7))
],
active: true,
padding: const EdgeInsets.all(PAD_0),
onPressed: () {},
))),
Expanded(
flex: 1,
child: AspectRatio(
aspectRatio: 1 / 1,
child: VpBaseCard(
inactiveColor: Colors.grey,
width: double.infinity,
children: [
FaIcon(FontAwesomeIcons.imagePolaroid,
size: 100,
color: Colors.white.withOpacity(0.7))
],
active: false,
padding: const EdgeInsets.all(PAD_0),
onPressed: () {},
)))
])),
]);
VpBaseCard:
class VpBaseCard extends StatelessWidget {
VpBaseCard(
{@required this.active,
this.icon,
this.text,
this.width,
this.children,
this.inactiveColor = Colors.white,
this.activeColor,
this.height,
this.expanded = false,
this.iconSize,
this.overflow,
this.elevation = ELEVATION_2,
@required this.onPressed,
@required this.padding});
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: () {
HapticFeedback.lightImpact();
onPressed();
},
child: Container(
padding: padding,
height: height,
child: Card(
clipBehavior: Clip.antiAlias,
color: active
? activeColor ??
Theme.of(context).primaryColor.withOpacity(0.7)
: inactiveColor ?? Colors.white,
elevation: active ? elevation : 0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
),
child: Container(
width: width,
height: height,
padding: const EdgeInsets.all(0),
child: Flex(
direction: Axis.vertical,
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: children ?? [])))));
}
bool active;
List<Widget> children;
bool expanded;
double width;
double height;
double iconSize;
double elevation;
TextOverflow overflow;
IconData icon;
String text;
VoidCallback onPressed;
EdgeInsetsGeometry padding;
Color inactiveColor;
Color activeColor;
}
Why does the Container seem to have slight padding?
Upvotes: 0
Views: 249
Reputation: 3102
The Card widget within your VpBaseCard has a default margin of EdgeInsets.all(4.0)
. Try setting that to zero.
https://api.flutter.dev/flutter/material/Card/margin.html
Upvotes: 1