はじめに

アプリを作っているを画面サイズによるUIの変化に気を使いますよね。iPhoneではちゃんとなってるのにiPadで見てみるとUIが崩れてる!!など。そういうときにどんな画面サイズでもUIが崩れないようにレスポンシブ対応をするかと思います。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.dartMaterialAppを覆う形で実装していきます。

class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return ScreenUtilInit( ←ここ designSize: Size(360, 690), builder: () => MaterialApp( title: 'Flutter Demo', theme: ThemeData(
Code language: JavaScript (javascript)

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

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

サイズ設定

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

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

文字サイズ

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

Text("Sample", style: TextStyle(fontSize: 14.sp))
Code language: JavaScript (javascript)

要素のサイズ

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

Container( width: 100.w, height: 200.h child: ... )
Code language: CSS (css)

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

By user