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

はじめに

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

— 2022年1月31日追記

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

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

flutter_screenutilを使う

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

https://pub.dev/packages/flutter_screenutil

筆者の環境

• Flutter 2.2.3
• Dart 2.13.4
• M1, MacOS Big Sur

インストール

以下のコマンドを実行

$ 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の学習に役立つ書籍の紹介

参考アプリ

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

Androidはこちら

iOSはこちら