flutter_screenutil

flutter_screenutilFlutter アプリケーションの画面適応のためのツールキットです。これは、開発者がさまざまな画面サイズと密度のデバイス上でレスポンシブ UI レイアウトを作成できるように設計されています。

`flutter_screenutil` はサイズと間隔を処理するためのメソッドをいくつか提供しており、開発者はデバイスの画面サイズと密度に応じて UI 要素のサイズと位置を動的に調整できます。次の機能を提供します。

画面適応：flutter_screenutilデバイスの画面サイズと密度に応じて、設計ドラフト上のサイズを現在のデバイスに適した実際のサイズに変換できます。こうすることで、アプリを小さな画面の携帯電話で実行している場合でも、大きな画面のタブレットで実行している場合でも、UI 要素を画面に正しく合わせることができます。
サイズ適応:デザインドラフト上のサイズをflutter_screenutil渡すことで、デバイスの画面幅に応じて動的に調整でき、適応後の実際の幅を返します。setWidth()setHeight()
フォントの適応:デバイスの画面密度に応じてフォントサイズを適応させる方法をflutter_screenutil提供します。setSp()デザインドラフト上のフォントサイズを渡すことにより、現在のデバイスの画面密度に応じてフォントサイズを動的に調整できます。

公式ドキュメント
https://pub-web.flutter-io.cn/packages/flutter_screenutil

インストール

flutter pub add flutter_screenutil

原理

UIをデザインする場合、360 x 690実際のデバイスの解像度はGoogle Pixel1080 x 1920など、固定サイズでデザインするのが一般的です。開発時に設計図通りに数値を直接記述すると、最終的に実現される効果が設計上の効果と齟齬が生じます。このとき、比例方式を使用して適応できます。

設計図を一定の単位に分割し、その単位の識別子を例えばwと定義し、デバイスの解像度を求め、デバイスの実幅を設計図の幅で割ることで、実幅を表現します。 1w によって次の値が得られます。

1w = 设备真实宽度 / 设计图宽度

設計サイズが360 x 690、幅が 360w、実際のデバイスの幅が 1080 の場合、1w = になります1080 / 360 = 3。

例

class MyApp extends StatelessWidget {
    
    
  const MyApp({
    
    super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    
    
    return ScreenUtilInit(
      // 设计尺寸
      designSize: const Size(360, 690),
      // 是否根据最小宽度和高度调整文本
      minTextAdapt: true,
      builder: (context, child) {
    
    
        return MaterialApp(
          title: 'Flutter Demo',
          theme: ThemeData(
            colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
            useMaterial3: true,
          ),
          home: child,
        );
      },
      child: const MyHomePage(title: '适配'),
    );
  }
}

class MyHomePage extends StatefulWidget {
    
    
  const MyHomePage({
    
    super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
    
    
  @override
  Widget build(BuildContext context) {
    
    
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Column(
        children: [
          Container(
            width: 200,
            height: 200,
            color: Colors.red,
            child: const Text(
              "适配后的的尺寸",
              style: TextStyle(fontSize: 20, color: Colors.white),
            ),
          ),
          const SizedBox(
            height: 20,
          ),
          Container(
            width: ScreenUtil().setWidth(200),
            height: ScreenUtil().setWidth(200),
            color: Colors.blue,
            child: Text(
              "适配后的的尺寸",
              style: TextStyle(
                  fontSize: ScreenUtil().setSp(20), color: Colors.white),
            ),
          ),
        ],
      ),
    );
  }
}

ここに画像の説明を挿入

一般的な方法

ScreenUtil().setWidth(540)  //根据屏幕宽度适配尺寸
ScreenUtil().setHeight(200) //根据屏幕高度适配尺寸(一般根据宽度适配即可)
ScreenUtil().radius(200)    //根据宽度或高度中的较小者进行调整
ScreenUtil().setSp(24)      //字体大小适配

便宜上、略語もサポートされています

ScreenUtil().setWidth(540)  =>  540.h
ScreenUtil().setHeight(200) =>  200.w
ScreenUtil().radius(200)    =>  200.r
ScreenUtil().setSp(24)      =>  24.sp

注:
一般に1.w != 1.h、画面解像度の比率が設計図面の比率とまったく同じでない限り、正方形を設定する場合は、同じ w または h を設定するなど、同じ単位を使用することを忘れないでください。長方形として表示されます。

Flutter: 画面適応

flutter_screenutil

おすすめ