颤振 - 容器子不占用整个容器

Question

在下图中，我需要让绿色的孩子占据左侧的所有灰色容器，所以我不希望它所在的容器中有任何填充。

代码：

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

为什么 Container 似乎有轻微的填充？

Answer 1

VpBaseCard 中的 Card 小部件的默认边距为 EdgeInsets.all(4.0)。尝试将其设置为零。

https://api.flutter.dev/flutter/material/Card/margin.html