Flutter：flutter_screenutil屏幕适配

sunly_2024-11-25 19:45

1、安装flutter_screenutil

haskell 复制代码

flutter_screenutil: ^5.9.3

2、main入口修改

js 复制代码

// 新增 ScreenUtilInit()

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) :super(key: key);
  @override
  Widget build(BuildContext context) {
    return ScreenUtilInit(
      designSize: const Size(375, 812), // 设计稿中设备的尺寸(建议dp,但在使用过程中必须保持一致)
      // splitScreenMode: false, // 支持分屏尺寸
      // minTextAdapt: false, // 是否根据宽度/高度中的最小值适配文字
      
      // 一般返回一个MaterialApp类型的Function()
      builder: (context,child){
        return GetMaterialApp(
          debugShowCheckedModeBanner: false,
          title: 'Flutter Demo',
		  // 路由
          initialRoute: '/login',
          // 屏幕适配
          builder: (context, widget) {
            // 不随系统字体缩放比例
            return MediaQuery(
              data: MediaQuery.of(context).copyWith(textScaleFactor: 1.0),
              child: widget!,
            );
          },
        );
      }
    );
  }
}

3、页面中使用

单位后边加 .sp

js 复制代码

// 用到的地方都要导包
import 'package:flutter_screenutil/flutter_screenutil.dart';
SizedBox(height: 100.sp),
Center(
  child: Image(
    image: AssetImage('images/logo.png'),
    width: 100.sp,
    height: 100.sp,
  ),
),
Text('账号登录',style: TextStyle(fontSize: 16.sp),