【Flutter】OrientationBuilderを使用して画面の向きにUIを対応させる

Flutterで画面の向きにUIを対応させるには、OrientationBuilderを使用します。

例

OrientationBuilder(
    builder: (context, orientation) {
        // 画面の向きが縦の場合
        if (orientation == Orientation.portrait) {
            return const Text('縦');
        }

        // 画面の向きが横の場合
        return const Text('横');
    },
)

解説

引数として受け取るorientationの型はOrientationです。

• Orientation.portrait
  • 幅より高さがある → 縦
• Orientation.landscape
  • 高さより幅がある → 横

さいごに

Flutterすごいですね🥹