はじめに
アプリを作っているとデバイスのサイズによってレイアウトを変えたくなりますよね。
大きな画面用のUIをモバイルで見ると画面サイズと合っていない、なんてのは日常茶飯事です。
今回の記事ではFlutter製アプリでデバイスの幅によってレイアウトを変えるレスポンシブ対応を行っていきたいと思います。
以前の投稿ではウィジェットのサイズのレスポンシブ対応についてまとめていますのでそちらも併せて参照ください。
筆者の環境
- MacOS BigSur 11.4
- Flutter 2.8.1
- Dart 2.15.1
使うもの
responsive_builder
を使います。

モバイル、デスクトップ、タブレットなどでレイアウトに使用するウィジェットを切り替えることができるパッケージです。
Githubはこちら: https://github.com/FilledStacks/responsive_builder/
デフォルトサイズ
デフォルトのサイズ設定を使いたい時は以下のようにします。
Widget body() {
return getValueForScreenType(
context: context,
mobile: IndexViewMobile(),
tablet: IndexViewTablet(),
desktop: IndexViewDesktop()
);
}
デフォルトではそれぞれ以下のように設定されています。
desktop: 1080
tablet: 550
watch: 200
サイズをカスタムしたい時は以下のようにします。
カスタムサイズを設定する
以下のようにすることでレイアウト切り替えのサイズ設定をカスタマイズすることができます。
ScreenTypeLayout(
breakpoints: ScreenBreakpoints(
tablet: 600,
desktop: 950,
watch: 300
),
mobile: Container(color: Colors.blue)
tablet: Container(color: Colors.yellow),
desktop: Container(color: Colors.red),
watch: Container(color: Colors.purple),
);
パフォーマンス
これまで見てきた例は呼び出し時に全てのレイアウトのウィジェットがビルドされます。
ウィジェットの設計によってはこれは大きな負荷になり得ます。
ウェブではブラウザを自由に変更できるので、最初から読み込んでいてもいいかもですが、モバイルやタブレットだとサイズ変更はしませんので必要なサイズのウィジェットだけ読み込むのがいいかと思います。
必要なサイズのウィジェットだけを読み込むには以下のようにします。
ScreenTypeLayout.builder(
mobile: (BuildContext context) => Container(color:Colors.blue),
tablet: (BuildContext context) => Container(color:Colors.yellow),
desktop: (BuildContext context) => Container(color:Colors.red),
watch: (BuildContext context) => Container(color:Colors.purple),
);
デバイスのサイズに合うものだけが読み込まれビルドされます。
これでパフォーマンスは改善できるかと思います。
デバイスの縦持ち、横持ちに対応する
モバイルやタブレットだと持ち方でレイアウトを変更したくなりますよね。
縦持ち、横持ちでレイアウトを変更したい時はこんなふうにします。
OrientationLayoutBuilder(
portrait: (context) => Container(color: Colors.green), // 縦持ち
landscape: (context) => Container(color: Colors.pink), // 横持ち
)
いろんなものを出し分ける
横幅によって変更できるのは読み込むウィジェットだけではありません。
どんなものでも切り替えることができます。
例えばPaddingのEdgedInsetsの値などです。
Container(
padding: EdgeInsets.all(getValueForScreenType<double>(
context: context,
mobile: 10,
tablet: 30,
desktop: 60,
)),
child: Text('Best Responsive Package'),
)
このように、 getValueForScreenType
を使うとなんでも切り替えを行うことができます。便利ですね。
最後に
アプリ開発でレスポンシブは避けては通れない課題です。
逆にレスポンシブ対応がないアプリはデバイスに合ったレイアウトができずにユーザに違和感を覚えさせてしまうかもしれません。
ユーザが快適にアプリを使うことができるよう、デバイスのサイズに合わせたレイアウトの設計を行いましょう。
以上、簡単ではありますが、responsive_builder
を用いてのFlutterでのレスポンシブ対応の方法まとめでした。
最後までお読みいただきありがとうございました。