Flutter响应式Text Row布局问题：内容超屏，求解决方案

核心问题 #

你的外层Row是单行强制布局，当内容总宽度超过屏幕宽度时就会出现溢出。单独给每个子项添加Flexible无法解决问题，因为文本块被拆分成了多个独立子组件，无法整体换行。

解决方案1：使用Wrap组件替代外层Row #

Wrap会自动根据可用空间换行，完美适配响应式需求：

Wrap(
  spacing: 4.0, // 子组件间的水平间距
  crossAxisAlignment: WrapCrossAlignment.center,
  children: [
    Padding(
      padding: const EdgeInsets.symmetric(horizontal: 4.0),
      child: Text(
        provider != null
            ? 'This account is verified because it\'s an official'
            : 'This account is verified.',
        style: GoogleFonts.lato(fontSize: 15),
      ),
    ),
    if (provider != null) ...[
      Text(provider!,
          style: GoogleFonts.lato(
              fontSize: 15, color: authorizationZoneColor)),
      Text(
        ' provider.',
        style: GoogleFonts.lato(fontSize: 15),
      ),
    ],
    TextButton(
      onPressed: () async {},
      style: ButtonStyle(
          overlayColor: MaterialStateProperty.all(Colors.transparent),
          minimumSize: MaterialStateProperty.all<Size>(const Size(0, 0)),
          padding: MaterialStateProperty.all<EdgeInsets>(const EdgeInsets.all(0)),
          tapTargetSize: MaterialTapTargetSize.shrinkWrap),
      child: Text('Learn more.',
          style: GoogleFonts.lato(
              fontSize: 15, color: authorizationZoneColor)),
    )
  ],
)

解决方案2：用Flexible包裹所有文本内容 #

如果希望文本部分占据剩余空间并换行，按钮优先保持在文本右侧（空间不足时自动换行），可以保留外层Row，将所有文本组件放入Flexible中：

Row(
  crossAxisAlignment: CrossAxisAlignment.center,
  children: [
    Flexible(
      child: Wrap(
        spacing: 4.0,
        children: [
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 4.0),
            child: Text(
              provider != null
                  ? 'This account is verified because it\'s an official'
                  : 'This account is verified.',
              style: GoogleFonts.lato(fontSize: 15),
            ),
          ),
          if (provider != null) ...[
            Text(provider!,
                style: GoogleFonts.lato(
                    fontSize: 15, color: authorizationZoneColor)),
            Text(
              ' provider.',
              style: GoogleFonts.lato(fontSize: 15),
            ),
          ],
        ],
      ),
    ),
    TextButton(
      onPressed: () async {},
      style: ButtonStyle(
          overlayColor: MaterialStateProperty.all(Colors.transparent),
          minimumSize: MaterialStateProperty.all<Size>(const Size(0, 0)),
          padding: MaterialStateProperty.all<EdgeInsets>(const EdgeInsets.all(0)),
          tapTargetSize: MaterialTapTargetSize.shrinkWrap),
      child: Text('Learn more.',
          style: GoogleFonts.lato(
              fontSize: 15, color: authorizationZoneColor)),
    )
  ],
)

方案说明 #

• 方案1的Wrap组件会自动处理换行逻辑，所有子组件（包括按钮）都会根据屏幕宽度调整位置，完全贴合你的期望效果。
• 方案2通过Flexible让文本部分获得剩余空间，内部用Wrap保证文本块的换行，按钮会优先保持在文本右侧，空间不足时才会换行到下一行。

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