如何无需条件内边距实现Flutter Row组件对齐？

问题背景 #

在Flutter的PremiumPlanItem组件中，需要区分年度/月度订阅的布局，当前使用条件内边距来实现文本对齐，但这种方式在不同屏幕尺寸下表现糟糕，小屏幕UI会出现混乱。核心需求：

• 移除条件内边距，实现跨屏幕稳定对齐
• 让彩色圆形的SizedBox更靠近左侧分隔线
• 保持年度/月度订阅的文本在同一水平线上

原代码：

class PremiumPlanItem extends StatelessWidget {
  const PremiumPlanItem({this.isYear = true, super.key});

  final bool isYear;

  @override
  Widget build(BuildContext context) {
    final Color baseTextColor = context.colors.premiumSubsSelectText;
    final TextStyle baseStyle = context.primaryFonts.regular14.copyWith(
      color: baseTextColor,
    );

    return RowExt(
      padding: Pad(
        bottom: Sizes.s12,
        top: Sizes.s20,
      ),
      children: <Widget>[
        Expanded(
          child: ColumnExt(
            padding: Pad(
              left: Sizes.s12,
            ),
            children: <Widget>[
              Row(
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: <Widget>[
                  Row(
                    children: <Widget>[
                      Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: <Widget>[
                          Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: <Widget>[
                        
                              SizedBox.square(
                                dimension: 16,
                                child: DecoratedBox(
                                  decoration: BoxDecoration(
                                    gradient: [Colors.red, Colors.blue],
                                    shape: BoxShape.circle,
                                  ),
                                ),
                              ),
                              TextExt(
                                padding: Pad(left: Sizes.s8),
                                isYear ? "Annual" : 'Month',
                                style: context.primaryFonts.medium15.copyWith(
                                  color: context.colors.white,
                                ),
                              ),
                              if (isYear) Text('test text'),

                              TextExt(
                                padding: isYear ? Pad(left: Sizes.s44) : Pad(left: Sizes.s94),
                                '123',
                                style: context.primaryFonts.regular15.copyWith(
                                  color: baseTextColor,
                                ),
                              ),
                            ],
                          ),
                          if (isYear)
                            RowExt(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              padding: Pad(
                                top: Sizes.s4,
                              ),
                              children: <Widget>[
                                Text(
                                 'test text',
                                  style: context.primaryFonts.regular15.copyWith(
                                    color: context.colors.white,
                                    decoration: TextDecoration.lineThrough,
                                  ),
                                ),
                                Text(
                                  '  test text',
                                  style: baseStyle,
                                ),
                              ],
                            ),
                        ],
                      ),
                    ],
                  ),
                ],
              ),
            ],
          ),
        ),
      ],
    );
  }
}

优化方案 #

核心思路是利用Flutter的Row布局特性，通过Spacer分配剩余空间替代固定条件内边距，让不同状态下的元素自动对齐，同时简化布局层级。

优化后的代码：

class PremiumPlanItem extends StatelessWidget {
  const PremiumPlanItem({this.isYear = true, super.key});

  final bool isYear;

  @override
  Widget build(BuildContext context) {
    final Color baseTextColor = context.colors.premiumSubsSelectText;
    final TextStyle baseStyle = context.primaryFonts.regular14.copyWith(
      color: baseTextColor,
    );

    return RowExt(
      padding: const Pad(
        bottom: Sizes.s12,
        top: Sizes.s20,
      ),
      children: <Widget>[
        Expanded(
          child: ColumnExt(
            padding: const Pad(left: Sizes.s12),
            children: <Widget>[
              Row(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  // 左侧固定区域：图标 + 订阅类型 + 可选文本
                  Row(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      SizedBox.square(
                        dimension: 16,
                        child: DecoratedBox(
                          decoration: BoxDecoration(
                            gradient: const LinearGradient(colors: [Colors.red, Colors.blue]),
                            shape: BoxShape.circle,
                          ),
                        ),
                      ),
                      const SizedBox(width: Sizes.s8),
                      Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: <Widget>[
                          Row(
                            children: <Widget>[
                              TextExt(
                                isYear ? "Annual" : 'Month',
                                style: context.primaryFonts.medium15.copyWith(
                                  color: context.colors.white,
                                ),
                              ),
                              if (isYear) const SizedBox(width: Sizes.s4),
                              if (isYear)
                                Text(
                                  'test text',
                                  style: context.primaryFonts.regular15.copyWith(
                                    color: context.colors.white,
                                  ),
                                ),
                            ],
                          ),
                          if (isYear)
                            Padding(
                              padding: const EdgeInsets.only(top: Sizes.s4),
                              child: Row(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: <Widget>[
                                  Text(
                                    'test text',
                                    style: context.primaryFonts.regular15.copyWith(
                                      color: context.colors.white,
                                      decoration: TextDecoration.lineThrough,
                                    ),
                                  ),
                                  const SizedBox(width: Sizes.s4),
                                  Text(
                                    'test text',
                                    style: baseStyle,
                                  ),
                                ],
                              ),
                            ),
                        ],
                      ),
                    ],
                  ),
                  // 自动填充中间空间，让右侧文本始终靠右对齐
                  const Spacer(),
                  // 右侧固定文本
                  TextExt(
                    '123',
                    style: context.primaryFonts.regular15.copyWith(
                      color: baseTextColor,
                    ),
                  ),
                ],
              ),
            ],
          ),
        ),
      ],
    );
  }
}

关键优化点 #

• 用Spacer替代条件内边距：Spacer会自动填充Row剩余空间，无论屏幕尺寸如何，右侧的"123"都会保持靠右对齐，避免小屏幕溢出问题
• 拆分布局层级：将左侧图标、订阅文本组成固定组，右侧文本单独成组，结构更清晰，对齐逻辑更稳定
• 移除冗余嵌套：删掉不必要的Row包裹，减少布局层级，提升性能同时简化代码
• 统一间距控制：用SizedBox替代自定义Pad组件控制元素间距，更直观易维护

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