Flutter 筆記

久久寫一次 Flutter，專案初始化的時候每次都忘記套件要怎麼用，這篇記錄一下。

flutter_screenutil
riverpod

flutter_screenutil

flutter_screenutil 能讓 App 根據不同裝置的螢幕尺寸自動縮放尺寸、字體大小、邊距等等，避免在小螢幕上擠在一起、大螢幕上太小的問題。

中文文件：點我

首先安裝 flutter_screenutil。

flutter pub add flutter_screenutil

打開模擬器並執行：

open -a Simulator

flutter run

flutter_screenutil 使用

在 designSize 的地方傳入設計稿尺寸：

dart

import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return ScreenUtilInit(
      designSize: const Size(375, 812), // 這裡
      builder: (context, child) => const MaterialApp(
        home: CupertinoPageScaffold(
          child: Center(
            child: Text('Hello, World!'),
          ),
        ),
      ),
    );
  }
}

設定寬高

上面已經設定好了 Size(375, 812)，因此如果把元件的寬度指定為 375.w 就能達到寬度滿版的狀態，高度同理，如下會得到一個滿版的灰色 Container。

dart


/// 上略 ...

home: CupertinoPageScaffold(
  child: Container(
    width: 375.w,
    height: 812.h,
    color: Colors.grey,
  ),
),

// 下略 ...

如果只是要取得螢幕寬的一半：

dart

Container(
  width: 0.5.sw,
  height: 812.h, // 高度要改的話 0.5.sh
  color: Colors.grey,
),

定義設計稿文字大小

設計稿拿到的字體大小直接填入定義：

dart

class AppFontSizes {
  static final double h1 = 40.sp;
  static final double h2 = 36.sp;
  static final double h3 = 32.sp;
  static final double h4 = 28.sp;
  static final double h5 = 24.sp;
  static final double h6 = 20.sp;

  static final double large = 17.sp;
  static final double medium = 15.sp;
  static final double small = 13.sp;
  static final double extraSmall = 11.sp;
}

// 略 ...

Text(
  'Hello, World!',
  style: TextStyle(fontSize: AppFontSizes.h1),
)

// 略 ...

未完...