Rowの中の左右のTextがOverflowを起こしてしまった時の対応方法

困ったこと

入力画面で左右にTextを配置するよくあるデザイン。

コードを書くならきっとこんな感じ。

Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: [
    const Text('メールアドレス'),
    Text('必須項目',
        style: Theme.of(context)
            .textTheme
            .labelLarge
            ?.copyWith(color: Colors.red, fontSize: 12.0))
  ],
),

でも、システムフォントサイズを最大にするとオーバーフローを起こします。

════════ Exception caught by rendering library ═════════════════════════════════
The following assertion was thrown during layout:
A RenderFlex overflowed by 113 pixels on the right.

The relevant error-causing widget was
Row
verify_email_page.dart:29
You can inspect this widget using the 'Inspect Widget' button in the VS Code notification.
The overflowing RenderFlex has an orientation of Axis.horizontal.
The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and black striped pattern. This is usually caused by the contents being too big for the RenderFlex.

Consider applying a flex factor (e.g. using an Expanded widget) to force the children of the RenderFlex to fit within the available space instead of being sized to their natural size.
This is considered an error condition because it indicates that there is content that cannot be seen. If the content is legitimately bigger than the available space, consider clipping it with a ClipRect widget before putting it in the flex, or using a scrollable container rather than a Flex, like a ListView.

The specific RenderFlex in question is: RenderFlex#f2be1 relayoutBoundary=up3 OVERFLOWING
════════════════════════════════════════════════════════════════════════════════

対応方法

FlexibleとFittedBoxでWrapしてあげましょう。

Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: [
    const Flexible(child: FittedBox(child: Text('メールアドレス'))),
    Flexible(
      child: FittedBox(
        child: Text('必須項目',
            style: Theme.of(context)
                .textTheme
                .labelLarge
                ?.copyWith(color: Colors.red, fontSize: 12.0)),
      ),
    )
  ],
),

見た目は酷いけど、エラーは無くなりました。

終わりに

見た目はとても大事ですが、文字が大きくないと見えないユーザーにも対応してあげた方がユーザーの満足度は上がると思います。
文字サイズを固定にしてしまう方法もありますが、ある程度デザインを保ちつつ表示を大きくしたい場合はこちらを実装してみるのはいかがでしょうか。