くらげになりたい。

くらげのようにふわふわ生きたい日曜プログラマなブログ。趣味の備忘録です。

トップ > Flutter > Flutterでレスポンシブに対応する方法

Flutterでレスポンシブに対応する方法

Flutter Responsive

Flutterで画面サイズに応じて、レイアウトを変える方法について、
いろいろ調べてみたときの備忘録(*´ω｀*)

公式ドキュメントのこの辺りがベースになるっぽい。

なので、まずは、このガイドをまとめてる。

Responsive(適応性)とAdaptive(応答性)

マルチプラットフォームで提供するアプリにおいて、
考える側面が2つある。

Responsive(適応性)
画面サイズ/デバイスの向きに応じて、
適切なサイズ・レイアウトにする

Adaptive(応答性)
レイアウトだけでなく、デバイスの入力方法(タッチ/マウス/キーボード)などに応じて、
適切な視覚密度(visual density)やメニューなどのUIコンポーネントを利用なども含む。

Responsiveへの対応

ベーシックな方法は2つ

LayoutBuilder

親Wigetのサイズ(BoxConstraints)に応じて、
表示するWidgetを切り替えられるBuilder。

class LayoutBuilderExample extends StatelessWidget {
  const LayoutBuilderExample({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // LayoutBuilder
      body: LayoutBuilder(
        builder: (BuildContext context, BoxConstraints constraints) {
          // 画面サイズが600より大きい場合
          if (constraints.maxWidth > 600) return _wideWidget();
          // 画面サイズが600以下の場合
          else return _normalWidget();
        },
      ),
    );
  }
}

親Widgetの向き(orientation)の場合は、
OrientationBuilderを利用する。

MediaQuery.of

画面サイズ(や向き)であるMediaQueryDataを取得する関数。
その値を利用して分岐し、Widgetを切り替える方法。

class MediaQueryExample extends StatelessWidget {
  const MediaQueryExample({super.key});

  @override
  Widget build(BuildContext context) {
    // MediaQueryDataの取得
    MediaQueryData media = MediaQuery.of(context);

    return Scaffold(
      body: media.size.width > 600
          // 画面サイズが600より大きい場合
          ? Container()
          // 画面サイズが600以下の場合
          : Container(),
    );
  }
}

デバイスの向きの場合は、media.orientationで取得可能。

その他の便利なWidget/クラス

Other useful widgets and classes for creating a responsive UI:

と紹介されているWidget/クラス

一覧にはなかったけど、Row、Column、Flexを制御できる
FexibleWidgetもある。
「Aは1/6」、「Bは3/6」、「Cは2/6」のサイズにする、みたいなときに役立つ。

Adaptiveへの対応

各プラットフォームに適したUIにするために、
主に3つのことを考慮する必要があるらしい。
Layout / Input / Idioms and norms

かなりディープなので、一旦ここまで。。

ライブラリ

resonsiveで検索すると2つが良さそう。

adaptiveで検索するといろいろ出てくる。

以上!! レスポンシブレベルであれば、割となんとかなりそう(*´ω｀*)
アダプティブレベルだと、各OSの知識がかなり必要な気がする。。(*´ω｀*)

参考にしたサイト様