A flutter plugin for adapting screen and font size.Let your UI display a reasonable layout on different screen sizes!
Note: This plugin is still under development, and some APIs might not be available yet.
Please check the latest version before installation. If there is any problem with the new version, please use the previous version
dependencies:
flutter:
sdk: flutter
# add flutter_screenutil
flutter_screenutil: ^{latest version}
import 'package:flutter_screenutil/flutter_screenutil.dart';
Property | Type | Default Value | Description |
---|---|---|---|
designSize | Size | Size(360, 690) | The size of the device in the design draft, in dp |
allowFontScaling | bool | false | Sets whether the font size is scaled according to the system's "font size" assist option |
Initialize and set the fit size and font size to scale according to the system's "font size" accessibility option
Please set the size of the design draft before use, the width and height of the design draft.
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
//Set the fit size (fill in the screen size of the device in the design,in dp)
return ScreenUtilInit(
designSize: Size(360, 690),
allowFontScaling: false,
builder: () => MaterialApp(
...
),
);
}
}
ScreenUtil().setWidth(540) (dart sdk>=2.6 : 540.w) //Adapted to screen width
ScreenUtil().setHeight(200) (dart sdk>=2.6 : 200.h) //Adapted to screen height , under normal circumstances, the height still uses x.w
ScreenUtil().radius(200) (dart sdk>=2.6 : 200.r) //Adapt according to the smaller of width or height
ScreenUtil().setSp(24) (dart sdk>=2.6 : 24.sp) //Adapter font
ScreenUtil().setSp(24, allowFontScalingSelf: true) (dart sdk>=2.6 : 24.ssp) //Adapter font(fonts will scale to respect Text Size accessibility settings)
ScreenUtil().setSp(24, allowFontScalingSelf: false) (dart sdk>=2.6 : 24.nsp) //Adapter font(fonts will not scale to respect Text Size accessibility settings)
ScreenUtil().pixelRatio //Device pixel density
ScreenUtil().screenWidth (dart sdk>=2.6 : 1.sw) //Device width
ScreenUtil().screenHeight (dart sdk>=2.6 : 1.sh) //Device height
ScreenUtil().bottomBarHeight //Bottom safe zone distance, suitable for buttons with full screen
ScreenUtil().statusBarHeight //Status bar height , Notch will be higher
ScreenUtil().textScaleFactor //System font scaling factor
ScreenUtil().scaleWidth //The ratio of actual width to UI design
ScreenUtil().scaleHeight //The ratio of actual height to UI design
0.2.sw //0.2 times the screen width
0.5.sh //50% of screen height
Pass the dp size of the design draft((The unit is the same as the unit at initialization)):
Adapted to screen width: ScreenUtil().setWidth(540)
,
Adapted to screen height: ScreenUtil().setHeight(200)
, In general, the height is best to adapt to the width
If your dart sdk>=2.6, you can use extension functions:
example:
instead of :
Container(
width: ScreenUtil().setWidth(50),
height:ScreenUtil().setHeight(200),
)
you can use it like this:
Container(
width: 50.w,
height:200.h
)
Note
The height can also use setWidth to ensure that it is not deformed(when you want a square)
The setHeight method is mainly to adapt to the height, which is used when you want to control the height of a screen on the UI to be the same as the actual display.
Generally speaking, 50.w!=50.h.
//for example:
///If you want to display a square:
///The UI may show a rectangle:
Container(
width: 375.w,
height: 375.h,
),
////If you want to display a square:
Container(
width: 300.w,
height: 300.w,
),
or
Container(
width: 300.r,
height: 300.r,
),
//Incoming font size(The unit is the same as the unit at initialization), fonts will not scale to respect Text Size accessibility settings
//(AllowallowFontScaling when initializing ScreenUtil)
ScreenUtil().setSp(28)
28.sp
//Incoming font size,the unit is pixel,fonts will scale to respect Text Size accessibility settings
//(If somewhere follow the global allowFontScaling setting)
ScreenUtil().setSp(24, allowFontScalingSelf: true)
28.ssp
//(If somewhere does not follow the global allowFontScaling setting)
ScreenUtil().setSp(24, allowFontScalingSelf: false)
28.nsp
//for example:
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'My font size is 24dp on the design draft and will not change with the system.',
style: TextStyle(
color: Colors.black,
fontSize: ScreenUtil().setSp(24),
)),
Text(
'My font size is 24dp on the design draft and will change with the system.',
style: TextStyle(
color: Colors.black,
fontSize: ScreenUtil()
.setSp(24, allowFontScalingSelf: true))),
],
)
flutter_screenutil's People
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.