Flutter 「flutter_screenutil」を使って画面サイズごとのUI崩れを防いでみた🚀

はじめに

今回は「flutter_screenutil」について。
flutter_screenutilを使用して基準となる画面サイズの縦幅と横幅を指定＆要素にもサイズを指定することで、画面サイズの異なる媒体でビルドしても画面サイズに対する要素のサイズの比率を保ってくれる優れもの。

ゴール

画面サイズの異なる媒体でプロジェクトをビルドして、UI崩れが発生しないこと。

今回使用するライブラリ

flutter_screenutil

https://pub.dev/packages/flutter_screenutil

pubspec.yaml

// 執筆時のバージョン
flutter_screenutil: ^5.7.0

実装

pubspec.yaml

import 'package:flutter_screenutil/flutter_screenutil.dart';

ビルド時のflutter_screenutilの適用

pubspec.yaml

void main() {
  runApp(
    ScreenUtilInit(
      // ベースとする画面サイズを指定
      designSize: Size(360, 690),
      builder: () => MyApp()
    )
  );
}

文字のサイズ指定　.sp

pubspec.yaml

Text(
  'abc',
  style: TextStyle(fontSize: 14.sp),
),

要素のサイズ指定　.h/.w

pubspec.yaml

// ..省略
Container(
  width: 100.w, // 横幅サイズの指定
  height: 50.h, // 縦幅サイズの指定
  child: Center(
  // ..省略

まとめ

個人開発だとおしゃれでイケてそうなUIばかり考えてしまってあとで痛い目見るので、こういったUI実装のベースとなるflutter_screenutilはありがたいですね🙇‍♂️

参考