はじめに
アプリを作っているを画面サイズによるUIの変化に気を使いますよね。iPhoneではちゃんとなってるのにiPadで見てみるとUIが崩れてる!!など。そういうときにどんな画面サイズでもUIが崩れないようにレスポンシブ対応をするかと思います。Flutterでそれを実現する方法をこの記事では説明します。
— 2022年1月31日追記
レイアウトのレスポンシブ対応についてはこちらを参照ください
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はこちら
