Usage

Add dependency

dependencies:flutter:sdk:flutter# add flutter_screenutilflutter_screenutil:^{latest version}

Add the following imports to your Dart code

import'package:flutter_screenutil/flutter_screenutil.dart';

Properties

Rebuild list

Initialize and set the fit size and font size to scale according to the system's "font size" accessibility option

The first way (You should use it once in your app)

voidmain()=>runApp(MyApp());classMyAppextendsStatelessWidget {constMyApp({Key? key}):super(key: key);@overrideWidgetbuild(BuildContext context) {//Set the fit size (Find your UI design, look at the dimensions of the device screen and fill it in,unit in dp)returnScreenUtilInit(      designSize:constSize(360,690),      minTextAdapt:true,      splitScreenMode:true,// Use builder only if you need to use library outside ScreenUtilInit context      builder: (_ , child) {returnMaterialApp(          debugShowCheckedModeBanner:false,          title:'First Method',// You can use the library anywhere in the app even in theme          theme:ThemeData(            primarySwatch:Colors.blue,            textTheme:Typography.englishLike2018.apply(fontSizeFactor:1.sp),          ),          home: child,        );      },      child:constHomePage(title:'First Method'),    );  }}

The second way:You need a trick to support font adaptation in the textTheme of app theme

MaterialApp(  ...//To support the following, you need to use the first initialization method  theme:ThemeData(    textTheme:TextTheme(      button:TextStyle(fontSize:45.sp)    ),  ),)

voidmain()async {// Add this lineawaitScreenUtil.ensureScreenSize();runApp(MyApp());}...MaterialApp(  ...  builder: (ctx, child) {ScreenUtil.init(ctx);returnTheme(      data:ThemeData(        primarySwatch:Colors.blue,        textTheme:TextTheme(bodyText2:TextStyle(fontSize:30.sp)),      ),      child:HomePage(title:'FlutterScreenUtil Demo'),    );  },)

classMyAppextendsStatelessWidget {@overrideWidgetbuild(BuildContext context) {returnMaterialApp(      debugShowCheckedModeBanner:false,      title:'Flutter_ScreenUtil',      theme:ThemeData(        primarySwatch:Colors.blue,      ),      home:HomePage(title:'FlutterScreenUtil Demo'),    );  }}classHomePageextendsStatefulWidget {constHomePage({Key key,this.title}):super(key: key);finalString title;@override_HomePageStatecreateState()=>_HomePageState();}class_HomePageStateextendsState<HomePage> {@overrideWidgetbuild(BuildContext context) {//Set the fit size (fill in the screen size of the device in the design)//If the design is based on the size of the 360*690(dp)ScreenUtil.init(context, designSize:constSize(360,690));    ...  }}

API

Enable or disable scale

Widgetbuild(BuildContext context) {returnScreenUtilInit(      enableScaleWH: ()=>false,      enableScaleText: ()=>false,//...    );  }

ScreenUtil.enableScale(enableWH: ()=>false, enableText: ()=>false);

Pass the dp size of the design draft

ScreenUtil().setWidth(540)  (dart sdk>=2.6:540.w)//Adapted to screen widthScreenUtil().setHeight(200) (dart sdk>=2.6:200.h)//Adapted to screen height , under normal circumstances, the height still uses x.wScreenUtil().radius(200)    (dart sdk>=2.6:200.r)//Adapt according to the smaller of width or heightScreenUtil().setSp(24)      (dart sdk>=2.6:24.sp)//Adapter font12.sm//return min(12,12.sp)ScreenUtil().pixelRatio//Device pixel densityScreenUtil().screenWidth   (dart sdk>=2.6:1.sw)//Device widthScreenUtil().screenHeight  (dart sdk>=2.6:1.sh)//Device heightScreenUtil().bottomBarHeight//Bottom safe zone distance, suitable for buttons with full screenScreenUtil().statusBarHeight//Status bar height , Notch will be higherScreenUtil().textScaleFactor//System font scaling factorScreenUtil().scaleWidth//The ratio of actual width to UI designScreenUtil().scaleHeight//The ratio of actual height to UI designScreenUtil().orientation//Screen orientation0.2.sw//0.2 times the screen width0.5.sh//50% of screen height20.setVerticalSpacing// SizedBox(height: 20 * scaleHeight)20.horizontalSpace// SizedBox(height: 20 * scaleWidth)constRPadding.all(8)// Padding.all(8.r) - take advantage of const key wordEdgeInsets.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

Adapt screen size

Container(  width:ScreenUtil().setWidth(50),  height:ScreenUtil().setHeight(200),)

Container(  width:50.w,  height:200.h)

Note

//for example://If you want to display a rectangle:Container(  width:375.w,  height:375.h,),//If you want to display a square based on width:Container(  width:300.w,  height:300.w,),//If you want to display a square based on height:Container(  width:300.h,  height:300.h,),//If you want to display a square based on minimum(height, width):Container(  width:300.r,  height:300.r,),

Adapter font

//Incoming font size(The unit is the same as the unit at initialization)ScreenUtil().setSp(28)28.sp//for example:Column(  crossAxisAlignment:CrossAxisAlignment.start,  children:<Widget>[Text('16sp, will not change with the system.',      style:TextStyle(        color:Colors.black,        fontSize:16.sp,      ),      textScaleFactor:1.0,    ),Text('16sp,if data is not set in MediaQuery,my font size will change with the system.',      style:TextStyle(        color:Colors.black,        fontSize:16.sp,      ),    ),  ],)

Setting font does not change with system font size

MaterialApp(  debugShowCheckedModeBanner:false,  title:'Flutter_ScreenUtil',  theme:ThemeData(    primarySwatch:Colors.blue,  ),  builder: (context, widget) {returnMediaQuery(///Setting font does not change with system font size      data:MediaQuery.of(context).copyWith(textScaleFactor:1.0),      child: widget,    );  },  home:HomePage(title:'FlutterScreenUtil Demo'),),

Text("text", textScaleFactor:1.0)

MediaQuery(// If there is no context available you can wrap [MediaQuery] with [Builder]  data:MediaQuery.of(context).copyWith(textScaleFactor:1.0),  child:AnyWidget(),)

Example

Effect

Update for Version 5.9.0 (Tests)

testWidgets('Should ensure widgets settle correctly', (WidgetTester tester)async {await tester.pumpWidget(constMaterialApp(    home:ScreenUtilInit(      child:MyApp(),    ),    ),);// Insertion of recommended method to prevent failuresawait tester.pumpAndSettle();// Continue with your assertions and tests});