Pub地址:flutter_screenutil Github地址:flutter_screenutil Github中文文档:flutter_screenutil
一、初始化
flutter_screenutil结合Getx,入口如下。
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return ScreenUtilInit(
// 传入UI设计图的尺寸大小
designSize: const Size(375, 812),
builder: (context, child) {
return GetMaterialApp(
title: 'app title',
initialRoute: '/splash',
initialBinding: SplashBinding(),
getPages: Routes.routePage,
builder: ((context, child) {
return MediaQuery(
// 全局设置文字大小不随系统设置改变
data: MediaQuery.of(context).copyWith(textScaleFactor: 1.0),
child: child!,
);
}),
);
});
}
}
二、使用
ScreenUtil().setWidth(540) (dart sdk>=2.6 : 540.w) //根据屏幕宽度适配尺寸
ScreenUtil().setHeight(200) (dart sdk>=2.6 : 200.h) //根据屏幕高度适配尺寸(一般根据宽度适配即可)
ScreenUtil().radius(200) (dart sdk>=2.6 : 200.r) //根据宽度或高度中的较小者进行调整
ScreenUtil().setSp(24) (dart sdk>=2.6 : 24.sp) //适配字体
12.sm // 取12和12.sp中的最小值
ScreenUtil().pixelRatio //设备的像素密度
ScreenUtil().screenWidth (dart sdk>=2.6 : 1.sw) //设备宽度
ScreenUtil().screenHeight (dart sdk>=2.6 : 1.sh) //设备高度
ScreenUtil().bottomBarHeight //底部安全区距离,适用于全面屏下面有按键的
ScreenUtil().statusBarHeight //状态栏高度 刘海屏会更高
ScreenUtil().textScaleFactor //系统字体缩放比例
ScreenUtil().scaleWidth // 实际宽度设计稿宽度的比例
ScreenUtil().scaleHeight // 实际高度与设计稿高度度的比例
ScreenUtil().orientation //屏幕方向
0.2.sw //屏幕宽度的0.2倍
0.5.sh //屏幕高度的50%
20.setVerticalSpacing // SizedBox(height: 20 * scaleHeight)
20.horizontalSpace // SizedBox(height: 20 * scaleWidth)
const RPadding.all(8) // Padding.all(8.r) - 获取到const的优点
EdgeInsets.all(10).w //EdgeInsets.all(10.w)
REdgeInsets.all(8) // EdgeInsets.all(8.r)
EdgeInsets.only(left:8,right:8).r // EdgeInsets.only(left:8.r,right:8.r).
BoxConstraints(maxWidth: 100, minHeight: 100).w //BoxConstraints(maxWidth: 100.w, minHeight: 100.w)
Radius.circular(16).w //Radius.circular(16.w)
BorderRadius.all(Radius.circular(16)).w
三、实例
class SplashPage extends GetView<SplashController> {
const SplashPage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
width: 180.w,
height: 320.h,
color: Colors.black54,
child: Text(
'设备宽度${ScreenUtil().screenWidth},设备高度${ScreenUtil().screenHeight},状态栏高度${ScreenUtil().statusBarHeight}'),
),
);
}
}