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

はじめに

アプリを作っているを画面サイズによるUIの変化に気を使いますよね。iPhoneではちゃんとなってるのにiPadで見てみるとUIが崩れてる！！など。そういうときにどんな画面サイズでもUIが崩れないようにレスポンシブ対応をするかと思います。Flutterでそれを実現する方法をこの記事では説明します。

— 2022年1月31日追記

レイアウトのレスポンシブ対応についてはこちらを参照ください

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

いきなり結論ですが、flutter_screenutilというパッケージを使うと簡単です。

以下のコマンドを実行

$ flutter pub add flutter_screenutil

アプリ全体に適用させたいので、main.dartのMyAppを覆う形で実装していきます。

void main() {
  runApp(
    ScreenUtilInit(
      designSize: Size(360, 690),
      builder: () => MyApp()
    )
  );
}

ScreenUtilInitというウィジェットでMyAppを覆います。またdesignSizeというプロパティに基本となる画面サイズを設定することでどのサイズの画面を元にするかと決めることができます。

これで様々な画面サイズ（スマートフォン、タブレット、etc）に対応したUIが作成できます。

flutter_screenutilでは文字サイズ、横幅、縦幅を画面サイズによって変更できる仕組みがあります。

.sp、.w、.hがそれです。

文字サイズには.spを使います。例としてはこんな感じです。

Text("Sample", style: TextStyle(fontSize: 14.sp))

要素のサイズには .w、.hを使います。

Container(
  width: 100.w,
  height: 200.h
  child: ...
)

これで自動的にその画面サイズに合った文字サイズ、要素サイズを決めてくれます。とっても便利です。

こちらのアプリでflutter_screenutilを使用しています。

Androidはこちら