Flutter中如何将Row组件居中显示在Container内？

问题描述 #

希望让Row组件在Container内居中显示，预期效果为图片与文字整体居中且保持合适间距；但实际输出中文字偏右，未达到预期布局。

预期效果示意图：

实际效果示意图：

现有代码 #

Container布局代码 #

Container(
  height: Dimensions.height40,
  decoration: BoxDecoration(borderRadius: BorderRadius.circular(Dimensions.radius10), color: Colors.white),
  child: Padding(
    padding: EdgeInsets.symmetric(horizontal: Dimensions.width45),
    child: Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Image.asset("assets/images/g.png", width: Dimensions.width20 + 5),
        SmallText(text: LanguageStringKeys.instance.continueWithGoogle.tr)
      ],
    ),
  ),
),

SmallText组件代码 #

class SmallText extends StatelessWidget {
  final Color? color;
  final String text;
  final double size;
  final TextAlign? align;

  const SmallText({
    Key? key,
    this.color = const Color(0xffCF1357),
    this.size = 16,
    required this.text, this.align=TextAlign.center,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Text(
      text,
      textAlign: align,
      style: TextStyle(
          color: color, fontSize: size, fontFamily: 'ROCK'),
    );
  }
}

问题原因 #

当前代码中Row使用了MainAxisAlignment.spaceBetween，该属性会让子组件分别贴紧Row的左右两端，再加上Container的左右padding，导致文字偏移到右侧，无法实现整体居中的效果。

解决方案 #

将Row的mainAxisAlignment改为MainAxisAlignment.center，同时通过SizedBox控制图片与文字的间距，即可让内容整体居中。

修改后的代码示例 #

Container(
  height: Dimensions.height40,
  decoration: BoxDecoration(borderRadius: BorderRadius.circular(Dimensions.radius10), color: Colors.white),
  child: Row(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      Image.asset("assets/images/g.png", width: Dimensions.width20 + 5),
      SizedBox(width: Dimensions.width10), // 根据需求调整间距大小
      SmallText(text: LanguageStringKeys.instance.continueWithGoogle.tr)
    ],
  ),
),

如果需要保留Container的左右padding，也可以直接修改Row的对齐方式：

Container(
  height: Dimensions.height40,
  decoration: BoxDecoration(borderRadius: BorderRadius.circular(Dimensions.radius10), color: Colors.white),
  child: Padding(
    padding: EdgeInsets.symmetric(horizontal: Dimensions.width45),
    child: Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Image.asset("assets/images/g.png", width: Dimensions.width20 + 5),
        SizedBox(width: Dimensions.width10),
        SmallText(text: LanguageStringKeys.instance.continueWithGoogle.tr)
      ],
    ),
  ),
),

内容的提问来源于stack exchange，提问作者Mansoor Malik