【Flutter】SingleChildScrollViewの中で上下中央揃えする方法

SingleChildScrollView を使ったときに上下中央に揃えるためのメモ。

SingleChildScrollViewの中で上下中央揃えにならない理由

通常、SingleChildScrollView を使う場合、上下中央に揃えることができません。

なぜなら、子Widgetは高さの最大値が決まらないので、どこまでも縦に伸ばせてしまうためです。

解決策

• LayoutBuilder
• ConstrainedBox
• AlwaysScrollableScrollPhysics

この3つを使うことで、SingleChildScrollView の中で上下中央揃えが実現できるみたいです。

LayoutBuilder(
  builder: (context, constraints) => SingleChildScrollView(
    physics: AlwaysScrollableScrollPhysics(),
    child: ConstrainedBox(
      constraints: BoxConstraints(minHeight: constraints.maxHeight),
      child: Center(child: Text('sample'),
    ),
  ),
)

これで SingleChildScrollView の中身を表示域と同じサイズにできるので、上下中央に表示できます。

参考