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

はじめに

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

大きな画面用のUIをモバイルで見ると画面サイズと合っていない、なんてのは日常茶飯事です。

今回の記事ではFlutter製アプリでデバイスの幅によってレイアウトを変えるレスポンシブ対応を行っていきたいと思います。

以前の投稿ではウィジェットのサイズのレスポンシブ対応についてまとめていますのでそちらも併せて参照ください。

Flutterでどんな画面サイズにも対応するUIを作る方法

筆者の環境

• 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でのレスポンシブ対応の方法まとめでした。

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

Flutter, Dartの書籍のご紹介