Flutterでデバイスの幅によってレイアウトを変えるレスポンシブ対応を行う

はじめに

アプリを作っているとデバイスのサイズによってレイアウトを変えたくなりますよね。

大きな画面用の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() ); }
Code language: JavaScript (javascript)

デフォルトではそれぞれ以下のように設定されています。

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), );
Code language: CSS (css)

パフォーマンス

これまで見てきた例は呼び出し時に全てのレイアウトのウィジェットがビルドされます。

ウィジェットの設計によってはこれは大きな負荷になり得ます。

ウェブではブラウザを自由に変更できるので、最初から読み込んでいてもいいかもですが、モバイルやタブレットだとサイズ変更はしませんので必要なサイズのウィジェットだけ読み込むのがいいかと思います。

必要なサイズのウィジェットだけを読み込むには以下のようにします。

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), );
Code language: JavaScript (javascript)

デバイスのサイズに合うものだけが読み込まれビルドされます。

これでパフォーマンスは改善できるかと思います。

デバイスの縦持ち、横持ちに対応する

モバイルやタブレットだと持ち方でレイアウトを変更したくなりますよね。

縦持ち、横持ちでレイアウトを変更したい時はこんなふうにします。

OrientationLayoutBuilder( portrait: (context) => Container(color: Colors.green), // 縦持ち landscape: (context) => Container(color: Colors.pink), // 横持ち )
Code language: JavaScript (javascript)

いろんなものを出し分ける

横幅によって変更できるのは読み込むウィジェットだけではありません。

どんなものでも切り替えることができます。

例えばPaddingのEdgedInsetsの値などです。

Container( padding: EdgeInsets.all(getValueForScreenType<double>( context: context, mobile: 10, tablet: 30, desktop: 60, )), child: Text('Best Responsive Package'), )
Code language: HTML, XML (xml)

このように、 getValueForScreenTypeを使うとなんでも切り替えを行うことができます。便利ですね。

最後に

アプリ開発でレスポンシブは避けては通れない課題です。

逆にレスポンシブ対応がないアプリはデバイスに合ったレイアウトができずにユーザに違和感を覚えさせてしまうかもしれません。

ユーザが快適にアプリを使うことができるよう、デバイスのサイズに合わせたレイアウトの設計を行いましょう。

以上、簡単ではありますが、responsive_builderを用いてのFlutterでのレスポンシブ対応の方法まとめでした。

最後までお読みいただきありがとうございました。

Flutter, Dartの書籍のご紹介

Related Posts