顶呱呱做网站,制作竞拍网站,建设网站网站建设公司,湖南网站托管flutter_screenutil
flutter_screenutil是一个用于在Flutter应用程序中进行屏幕适配的工具包。它旨在帮助开发者在不同屏幕尺寸和密度的设备上创建响应式的UI布局。
flutter_screenutil提供了一些用于处理尺寸和间距的方法#xff0c;使得开发者可以根据设备的屏幕尺寸和密度…flutter_screenutil
flutter_screenutil是一个用于在Flutter应用程序中进行屏幕适配的工具包。它旨在帮助开发者在不同屏幕尺寸和密度的设备上创建响应式的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 Pixel: 1080 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.overrideWidget 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;overrideStateMyHomePage createState() _MyHomePageState();
}class _MyHomePageState extends StateMyHomePage {overrideWidget 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 否则可能显示为长方形。
