Flutter いろんな画面サイズで同じような見た目のUIを表示させるのに役立つパッケージ

アプリ開発をする上で、さまざまな画面サイズのデバイスでUIを同じような見た目で表示するのが課題となることは多々あるかと思います。

そんなときに簡単に対応をすることができる便利なパッケージがあるので、紹介します。

flutter_screenutilというパッケージです。
https://pub.dev/packages/flutter_screenutil

こちらのパッケージは基本となる画面サイズを設定し、その基準に応じてサイズをどう変えていくかを各widgetのサイズに指定していくというようなものとなっています。
詳しくはパッケージのreadmeを参照してください。

今回は簡単な例を紹介します。

まずはルートにScreenUtilInitを指定し、基準値などを設定します。
そして子widgetのサイズをどう変化させるかを各子widgetに指定します。
指定の仕方は幅基準でサイズを調整する場合は.w、
高さ基準でサイズを調整する場合は.hをサイズの指定に付与します。

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ScreenUtilInit(
        //基準の設定
        designSize: const Size(375, 812),
	//幅と高さの最小値に応じてテキストサイズを可変させるかどうか
        minTextAdapt: true,
	//split screenへの対応をどうするか
        splitScreenMode: true,
        builder: () => const MaterialApp(
              home: Center(
                child: Container(
                    color: Colors.blue,
                    width: 200.w,
                    height: 200.h,
                  ),
              ),
            ));
  }
}

こうすることで375, 812の画面サイズで真ん中に200 × 200の青いBoxが表示されるUIというのを基準とし、画面のサイズに応じて拡大縮小しどんな画面サイズでも同じような見た目を維持して表示することができるようになります。

ぜひ一度試してみてください。