1.
flutter_screenutilを実業務で使ってみた
〜デザインを画面サイズごとに反映させるTips〜

2.
内容
飲食店アプリ実装の中で学んだことではあるが.....
飲食店アプリ固有の話
デザインを綺麗に、かつ簡単に反映させる方法
+アルファ 業務で試してみてどうだったかの話
※かなり、Figmaに偏った情報を元に話します。

3.
flutter_screenutilとは？
アプリ開発でネックになりがちな「画面サイズの違い」を、調整して
くれるライブラリ。
例）横幅・縦幅・フォントサイズなど
https://pub.dev/packages/flutter_screenutil

4.
例 以下のFigmaの画面を元に実装する
※フレーム「750 × 1624」
（そもそもデバイスサイズと合ってないのです
が、それでも実装可能）

5.
○ フレームサイズを確認して、
一番親Widgetとして設定したScreenUtilInitに値を記入
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return ScreenUtilInit(
designSize: const Size(750, 1624),
minTextAdapt: true,
splitScreenMode: true,
useInheritedMediaQuery
: true,
builder: (context, child) {
return MaterialApp(

6.
○ 要素のサイズを確認して、値を設定する。
横サイズを基準とする場合は「.w」縦サイズを基準とする場合は「.h」をつける
child: Column(
children: [
SizedBox(
width: 700.w,
height: 700.h,
child: Image.asset(
'assets/coupon_sample.png'
,
fit: BoxFit.fill,
),
),
…

7.
○ 余白を確認して、値を設定する。
横サイズを基準とする場合は「.w」縦サイズを基準とする場合は「.h」をつける
...
child: const Center(
child: Text(
'2022年12月31日まで有効',
// style: TextStyle(fontSize: 26.sp),
),
),
),
SizedBox(
height: 40.h,
),
Container(
width: 700.w,
height: 100.h,
...

8.
○ 丸みを持たせた要素などは、radius (半径)を確認して
サイズに「.r」をつける
...
Container(
width: 700.w,
height: 100.h,
decoration: BoxDecoration (
color: const Color(0xFF909090),
borderRadius:
BorderRadius .circular(10.r),
),
child: const Center(
child: Text(
'使用する',
style: TextStyle(color: Colors.white),
),
),
),
...

9.
○ フォントサイズも画面サイズに合わせて変化させたい場合は
「.sp」を値につける
...
child: const Center(
child: Text(
'2022年12月31日まで有効',
// style: TextStyle(fontSize: 26.sp),
),
),
),

10.
実装結果
A. Figmaの値をそのまま設定した場合 B. flutter_screenutiで設定した場合
iPhone 13 Pro（390.0 × 844.0）
※Device Previewの画面
元デザイン

11.
実装結果
A B
Sony Xperia 1 II（411.0 × 960.0）
元デザイン

12.
デザインをそのままソースコードに落とし込める！！
機械的に実装できる上、綺麗！！
機械的に機械的に実装...

13.
（業務で使ってみて）落とし穴にハマる

14.
○縦横比率が大事な要素
例）画像素材などの表示
A. Figmaの値をそのまま設定した場合 B. flutter_screenutiで設定した場合
画面のサイズに合わせてサイズ変更するからこそ、
比率がおかしくなって画像が綺麗に表示されない
iPad Pro（11-inch）
（834 × 1194）

15.
flutter_screenutilを使いつつ、
縦横比率を保つには？

16.
height・widthを「.w」か「.h」に統一する
child: Column(
children: [
SizedBox(
width: 700.w,
height: 700.w,
child: Image.asset(
'assets/character_sports_soccer..png'
,
fit: BoxFit.fill,
),
),
…
所感）
デザインが縦向きなら「
.w」でいいのではないかと思っている。
余白は「.h」で対応した。

17.
+ アルファ 画面の向きの変更 → 今回の案件では「縦固定」とした。
.w .h を活用している場合 .w のみの場合
.h のみの場合
※
明確な答えは出せてないです。
横向きを許容する場合は、ご注意ください

18.
ちなみにpub.devにも
Noteで縦横比率に関わる「正方形」の表示の仕方が書いてありました。

19.
flutter_screenutilを使ってみて
良いところ
・デザイナーとの協業がしやすい。
・デザイン再現度が上がった。
・実装速度も（体感）上がった。
注意が必要なところ
・縦横比率が大事な場合（画像・動画は特に注意!）
・画面の向き変更を許容する場合

20.
Github
https://github.com/beeeyan/flutter_screenutil_sample