Showing
8 changed files
with
87 additions
and
92 deletions
@@ -6,6 +6,13 @@ | @@ -6,6 +6,13 @@ | ||
6 | * @Description: Update log | 6 | * @Description: Update log |
7 | --> | 7 | --> |
8 | 8 | ||
9 | +# 4.0.1 | ||
10 | +- Modify the initialization unit to dp | ||
11 | +- delete screenWidthPx and screenHeightPx(No one use these method,I guess) | ||
12 | + | ||
13 | +# 4.0.0 | ||
14 | +- update to 4.0.0 | ||
15 | + | ||
9 | # 4.0.0-beta3 | 16 | # 4.0.0-beta3 |
10 | - Optimize the way of initialization | 17 | - Optimize the way of initialization |
11 | 18 |
@@ -23,7 +23,7 @@ dependencies: | @@ -23,7 +23,7 @@ dependencies: | ||
23 | flutter: | 23 | flutter: |
24 | sdk: flutter | 24 | sdk: flutter |
25 | # add flutter_screenutil | 25 | # add flutter_screenutil |
26 | - flutter_screenutil: ^4.0.0-beta3 | 26 | + flutter_screenutil: ^4.0.1 |
27 | ``` | 27 | ``` |
28 | ### Add the following imports to your Dart code: | 28 | ### Add the following imports to your Dart code: |
29 | ```dart | 29 | ```dart |
@@ -34,7 +34,7 @@ import 'package:flutter_screenutil/flutter_screenutil.dart'; | @@ -34,7 +34,7 @@ import 'package:flutter_screenutil/flutter_screenutil.dart'; | ||
34 | 34 | ||
35 | |Property|Type|Default Value|Description| | 35 | |Property|Type|Default Value|Description| |
36 | |:---|:---|:---|:---| | 36 | |:---|:---|:---|:---| |
37 | -|designSize|Size|Size(1080, 1920)|The size of the device in the design draft, in px| | 37 | +|designSize|Size|Size(360, 690)|The size of the device in the design draft, in dp| |
38 | |allowFontScaling|bool|false|Sets whether the font size is scaled according to the system's "font size" assist option| | 38 | |allowFontScaling|bool|false|Sets whether the font size is scaled according to the system's "font size" assist option| |
39 | 39 | ||
40 | ### Initialize and set the fit size and font size to scale according to the system's "font size" accessibility option | 40 | ### Initialize and set the fit size and font size to scale according to the system's "font size" accessibility option |
@@ -59,14 +59,14 @@ class MyApp extends StatelessWidget { | @@ -59,14 +59,14 @@ class MyApp extends StatelessWidget { | ||
59 | 59 | ||
60 | //fill in the screen size of the device in the design | 60 | //fill in the screen size of the device in the design |
61 | 61 | ||
62 | -//default value : width : 1080px , height:1920px , allowFontScaling:false | 62 | +//default value : width : 360dp , height:690dp , allowFontScaling:false |
63 | ScreenUtil.init(constraints); | 63 | ScreenUtil.init(constraints); |
64 | 64 | ||
65 | -//If the design is based on the size of the iPhone6 (iPhone6 750*1334) | ||
66 | -ScreenUtil.init(constraints, designSize: Size(750, 1334)); | 65 | +//The size of the equipment in the design draft(360,690) |
66 | +ScreenUtil.init(constraints, designSize: Size(360, 690)); | ||
67 | 67 | ||
68 | //If you want to set the font size is scaled according to the system's "font size" assist option | 68 | //If you want to set the font size is scaled according to the system's "font size" assist option |
69 | -ScreenUtil.init(constraints, designSize: Size(750, 1334), allowFontScaling: true); | 69 | +ScreenUtil.init(constraints, designSize: Size(360, 690), allowFontScaling: true); |
70 | 70 | ||
71 | ``` | 71 | ``` |
72 | 72 | ||
@@ -74,7 +74,7 @@ ScreenUtil.init(constraints, designSize: Size(750, 1334), allowFontScaling: true | @@ -74,7 +74,7 @@ ScreenUtil.init(constraints, designSize: Size(750, 1334), allowFontScaling: true | ||
74 | 74 | ||
75 | ### API | 75 | ### API |
76 | 76 | ||
77 | -#### Pass the px size of the design draft | 77 | +#### Pass the dp size of the design draft |
78 | 78 | ||
79 | ```dart | 79 | ```dart |
80 | ScreenUtil().setWidth(540) (dart sdk>=2.6 : 540.w) //Adapted to screen width | 80 | ScreenUtil().setWidth(540) (dart sdk>=2.6 : 540.w) //Adapted to screen width |
@@ -87,11 +87,11 @@ ScreenUtil.init(constraints, designSize: Size(750, 1334), allowFontScaling: true | @@ -87,11 +87,11 @@ ScreenUtil.init(constraints, designSize: Size(750, 1334), allowFontScaling: true | ||
87 | ScreenUtil().screenWidth (dart sdk>=2.6 : 1.sw) //Device width | 87 | ScreenUtil().screenWidth (dart sdk>=2.6 : 1.sw) //Device width |
88 | ScreenUtil().screenHeight (dart sdk>=2.6 : 1.sh) //Device height | 88 | ScreenUtil().screenHeight (dart sdk>=2.6 : 1.sh) //Device height |
89 | ScreenUtil().bottomBarHeight //Bottom safe zone distance, suitable for buttons with full screen | 89 | ScreenUtil().bottomBarHeight //Bottom safe zone distance, suitable for buttons with full screen |
90 | - ScreenUtil().statusBarHeight //Status bar height , Notch will be higher Unit px | 90 | + ScreenUtil().statusBarHeight //Status bar height , Notch will be higher |
91 | ScreenUtil().textScaleFactor //System font scaling factor | 91 | ScreenUtil().textScaleFactor //System font scaling factor |
92 | 92 | ||
93 | - ScreenUtil().scaleWidth //Ratio of actual width dp to ui design | ||
94 | - ScreenUtil().scaleHeight //Ratio of actual height dp to ui design | 93 | + ScreenUtil().scaleWidth //The ratio of actual width to UI design |
94 | + ScreenUtil().scaleHeight //The ratio of actual height to UI design | ||
95 | 95 | ||
96 | 0.2.sw //0.2 times the screen width | 96 | 0.2.sw //0.2 times the screen width |
97 | 0.5.sh //50% of screen height | 97 | 0.5.sh //50% of screen height |
@@ -99,7 +99,7 @@ ScreenUtil.init(constraints, designSize: Size(750, 1334), allowFontScaling: true | @@ -99,7 +99,7 @@ ScreenUtil.init(constraints, designSize: Size(750, 1334), allowFontScaling: true | ||
99 | 99 | ||
100 | #### Adapt screen size: | 100 | #### Adapt screen size: |
101 | 101 | ||
102 | -Pass the px size of the design draft((The unit is the same as the unit at initialization)): | 102 | +Pass the dp size of the design draft((The unit is the same as the unit at initialization)): |
103 | 103 | ||
104 | Adapted to screen width: `ScreenUtil().setWidth(540)`, | 104 | Adapted to screen width: `ScreenUtil().setWidth(540)`, |
105 | 105 | ||
@@ -169,13 +169,13 @@ Column( | @@ -169,13 +169,13 @@ Column( | ||
169 | crossAxisAlignment: CrossAxisAlignment.start, | 169 | crossAxisAlignment: CrossAxisAlignment.start, |
170 | children: <Widget>[ | 170 | children: <Widget>[ |
171 | Text( | 171 | Text( |
172 | - 'My font size is 24px on the design draft and will not change with the system.', | 172 | + 'My font size is 24dp on the design draft and will not change with the system.', |
173 | style: TextStyle( | 173 | style: TextStyle( |
174 | color: Colors.black, | 174 | color: Colors.black, |
175 | fontSize: ScreenUtil().setSp(24), | 175 | fontSize: ScreenUtil().setSp(24), |
176 | )), | 176 | )), |
177 | Text( | 177 | Text( |
178 | - 'My font size is 24px on the design draft and will change with the system.', | 178 | + 'My font size is 24dp on the design draft and will change with the system.', |
179 | style: TextStyle( | 179 | style: TextStyle( |
180 | color: Colors.black, | 180 | color: Colors.black, |
181 | fontSize: ScreenUtil() | 181 | fontSize: ScreenUtil() |
1 | -# flutter_ScreenUtil | 1 | +# flutter_screenUtil |
2 | 2 | ||
3 | [](https://pub.dartlang.org/packages/flutter_screenutil) | 3 | [](https://pub.dartlang.org/packages/flutter_screenutil) |
4 | 4 | ||
@@ -28,7 +28,7 @@ dependencies: | @@ -28,7 +28,7 @@ dependencies: | ||
28 | flutter: | 28 | flutter: |
29 | sdk: flutter | 29 | sdk: flutter |
30 | # 添加依赖 | 30 | # 添加依赖 |
31 | - flutter_screenutil: ^4.0.0-beta3 | 31 | + flutter_screenutil: ^4.0.1 |
32 | ``` | 32 | ``` |
33 | ### 在每个使用的地方导入包: | 33 | ### 在每个使用的地方导入包: |
34 | ```dart | 34 | ```dart |
@@ -39,7 +39,7 @@ import 'package:flutter_screenutil/flutter_screenutil.dart'; | @@ -39,7 +39,7 @@ import 'package:flutter_screenutil/flutter_screenutil.dart'; | ||
39 | 39 | ||
40 | |属性|类型|默认值|描述| | 40 | |属性|类型|默认值|描述| |
41 | |:---|:---|:---|:---| | 41 | |:---|:---|:---|:---| |
42 | -|designSize|Size|Size(1080, 1920)|设计稿中设备的尺寸(单位随意,但在使用过程中必须保持一致)| | 42 | +|designSize|Size|Size(360, 690)|设计稿中设备的尺寸(单位随意,但在使用过程中必须保持一致)| |
43 | |allowFontScaling|bool|false|设置字体大小是否根据系统的“字体大小”辅助选项来进行缩放| | 43 | |allowFontScaling|bool|false|设置字体大小是否根据系统的“字体大小”辅助选项来进行缩放| |
44 | 44 | ||
45 | ### 初始化并设置适配尺寸及字体大小是否根据系统的“字体大小”辅助选项来进行缩放 | 45 | ### 初始化并设置适配尺寸及字体大小是否根据系统的“字体大小”辅助选项来进行缩放 |
@@ -65,21 +65,21 @@ class MyApp extends StatelessWidget { | @@ -65,21 +65,21 @@ class MyApp extends StatelessWidget { | ||
65 | } | 65 | } |
66 | } | 66 | } |
67 | 67 | ||
68 | -//默认 width : 1080px , height:1920px , allowFontScaling:false | 68 | +//默认 width : 360dp , height:690dp , allowFontScaling:false |
69 | ScreenUtil.init(constraints); | 69 | ScreenUtil.init(constraints); |
70 | 70 | ||
71 | -//假如设计稿是按iPhone6的尺寸设计的(iPhone6 750*1334) | ||
72 | -ScreenUtil.init(constraints, designSize: Size(750, 1334)); | 71 | +//传入设计稿的尺寸(例如(360,690)) |
72 | +ScreenUtil.init(constraints, designSize: Size(360,690)); | ||
73 | 73 | ||
74 | //设置字体大小根据系统的“字体大小”辅助选项来进行缩放,默认为false | 74 | //设置字体大小根据系统的“字体大小”辅助选项来进行缩放,默认为false |
75 | -ScreenUtil.init(constraints, designSize: Size(750, 1334), allowFontScaling: true); | 75 | +ScreenUtil.init(constraints, designSize: Size(360,690), allowFontScaling: true); |
76 | 76 | ||
77 | ``` | 77 | ``` |
78 | 78 | ||
79 | ### 使用 | 79 | ### 使用 |
80 | 80 | ||
81 | ### API | 81 | ### API |
82 | -#### 传入设计稿的px尺寸 px px px ! | 82 | +#### 传入设计稿的dp尺寸 |
83 | ```dart | 83 | ```dart |
84 | ScreenUtil().setWidth(540) (sdk>=2.6 : 540.w) //根据屏幕宽度适配尺寸 | 84 | ScreenUtil().setWidth(540) (sdk>=2.6 : 540.w) //根据屏幕宽度适配尺寸 |
85 | ScreenUtil().setHeight(200) (sdk>=2.6 : 200.h) //根据屏幕高度适配尺寸(一般根据宽度适配即可) | 85 | ScreenUtil().setHeight(200) (sdk>=2.6 : 200.h) //根据屏幕高度适配尺寸(一般根据宽度适配即可) |
@@ -94,8 +94,8 @@ ScreenUtil.init(constraints, designSize: Size(750, 1334), allowFontScaling: true | @@ -94,8 +94,8 @@ ScreenUtil.init(constraints, designSize: Size(750, 1334), allowFontScaling: true | ||
94 | ScreenUtil.statusBarHeight //状态栏高度 刘海屏会更高 | 94 | ScreenUtil.statusBarHeight //状态栏高度 刘海屏会更高 |
95 | ScreenUtil.textScaleFactor //系统字体缩放比例 | 95 | ScreenUtil.textScaleFactor //系统字体缩放比例 |
96 | 96 | ||
97 | - ScreenUtil().scaleWidth // 实际宽度的dp与设计稿宽度的比例 | ||
98 | - ScreenUtil().scaleHeight // 实际高度的dp与设计稿高度度的比例 | 97 | + ScreenUtil().scaleWidth // 实际宽度设计稿宽度的比例 |
98 | + ScreenUtil().scaleHeight // 实际高度与设计稿高度度的比例 | ||
99 | 99 | ||
100 | 0.2.sw //屏幕宽度的0.2倍 | 100 | 0.2.sw //屏幕宽度的0.2倍 |
101 | 0.5.sh //屏幕高度的50% | 101 | 0.5.sh //屏幕高度的50% |
@@ -169,12 +169,12 @@ ScreenUtil().setSp(24, allowFontScalingSelf: true) | @@ -169,12 +169,12 @@ ScreenUtil().setSp(24, allowFontScalingSelf: true) | ||
169 | Column( | 169 | Column( |
170 | crossAxisAlignment: CrossAxisAlignment.start, | 170 | crossAxisAlignment: CrossAxisAlignment.start, |
171 | children: <Widget>[ | 171 | children: <Widget>[ |
172 | - Text('我的文字大小在设计稿上是24px,不会随着系统的文字缩放比例变化', | 172 | + Text('我的文字大小在设计稿上是24dp,不会随着系统的文字缩放比例变化', |
173 | style: TextStyle( | 173 | style: TextStyle( |
174 | color: Colors.black, | 174 | color: Colors.black, |
175 | fontSize: ScreenUtil().setSp(24), | 175 | fontSize: ScreenUtil().setSp(24), |
176 | )), | 176 | )), |
177 | - Text('我的文字大小在设计稿上是24px,会随着系统的文字缩放比例变化', | 177 | + Text('我的文字大小在设计稿上是24dp,会随着系统的文字缩放比例变化', |
178 | style: TextStyle( | 178 | style: TextStyle( |
179 | color: Colors.black, | 179 | color: Colors.black, |
180 | fontSize: ScreenUtil() | 180 | fontSize: ScreenUtil() |
@@ -24,7 +24,7 @@ dependencies: | @@ -24,7 +24,7 @@ dependencies: | ||
24 | flutter: | 24 | flutter: |
25 | sdk: flutter | 25 | sdk: flutter |
26 | # add flutter_screenutil | 26 | # add flutter_screenutil |
27 | - flutter_screenutil: ^4.0.0-beta3 | 27 | + flutter_screenutil: ^4.0.1 |
28 | ``` | 28 | ``` |
29 | 29 | ||
30 | ### Adicione o seguinte import em seu código Dart: | 30 | ### Adicione o seguinte import em seu código Dart: |
@@ -36,8 +36,8 @@ import 'package:flutter_screenutil/flutter_screenutil.dart'; | @@ -36,8 +36,8 @@ import 'package:flutter_screenutil/flutter_screenutil.dart'; | ||
36 | 36 | ||
37 | |Propriedade|Tipo|Valor Padrão|Descrição| | 37 | |Propriedade|Tipo|Valor Padrão|Descrição| |
38 | |:---|:---|:---|:---| | 38 | |:---|:---|:---|:---| |
39 | -|width|double|1080px|A largura do dispositivo no protótipo de design, em px| | ||
40 | -|height|double|1920px|A altura do dispositivo no protótipo de design, em px| | 39 | +|width|double|360dp|A largura do dispositivo no protótipo de design, em dp| |
40 | +|height|double|690dp|A altura do dispositivo no protótipo de design, em dp| | ||
41 | |allowFontScaling|bool|false|Defina caso o tamanho da fonte seja dimensionado de acordo com a opção "tamanho de fonte" na acessibilidade do sistema| | 41 | |allowFontScaling|bool|false|Defina caso o tamanho da fonte seja dimensionado de acordo com a opção "tamanho de fonte" na acessibilidade do sistema| |
42 | 42 | ||
43 | ### Inicialize e defina o tamanho de ajuste e tamanho da fonte para dimensionar de acordo com a opção "tamanho de fonte" na acessibilidade do sistema | 43 | ### Inicialize e defina o tamanho de ajuste e tamanho da fonte para dimensionar de acordo com a opção "tamanho de fonte" na acessibilidade do sistema |
@@ -61,14 +61,14 @@ class MyApp extends StatelessWidget { | @@ -61,14 +61,14 @@ class MyApp extends StatelessWidget { | ||
61 | } | 61 | } |
62 | } | 62 | } |
63 | 63 | ||
64 | -//Valor padrão: width : 1080px , height:1920px , allowFontScaling:false | 64 | +//Valor padrão: width : 360dp , height:690dp , allowFontScaling:false |
65 | ScreenUtil.init(constraints); | 65 | ScreenUtil.init(constraints); |
66 | 66 | ||
67 | -//Se o design é baseado no iPhone6 (iPhone6 750*1334) | ||
68 | -ScreenUtil.init(constraints, designSize: Size(750, 1334)); | 67 | +//The size of the equipment in the design draft(360,690) |
68 | +ScreenUtil.init(constraints, designSize: Size(360,690)); | ||
69 | 69 | ||
70 | //Se você quer definir que o tamanho da fonte seja ajustado de acordo com a opção "tamanho da fonte" na acessibilidade do sistema | 70 | //Se você quer definir que o tamanho da fonte seja ajustado de acordo com a opção "tamanho da fonte" na acessibilidade do sistema |
71 | -ScreenUtil.init(constraints, designSize: Size(750, 1334), allowFontScaling: true); | 71 | +ScreenUtil.init(constraints, designSize: Size(360,690), allowFontScaling: true); |
72 | 72 | ||
73 | ``` | 73 | ``` |
74 | 74 | ||
@@ -87,11 +87,11 @@ ScreenUtil.init(constraints, designSize: Size(750, 1334), allowFontScaling: true | @@ -87,11 +87,11 @@ ScreenUtil.init(constraints, designSize: Size(750, 1334), allowFontScaling: true | ||
87 | ScreenUtil.screenWidth (sdk>=2.6 : 1.sw) //Device width | 87 | ScreenUtil.screenWidth (sdk>=2.6 : 1.sw) //Device width |
88 | ScreenUtil.screenHeight (sdk>=2.6 : 1.sh) //Device height | 88 | ScreenUtil.screenHeight (sdk>=2.6 : 1.sh) //Device height |
89 | ScreenUtil.bottomBarHeight //Bottom safe zone distance, suitable for buttons with full screen | 89 | ScreenUtil.bottomBarHeight //Bottom safe zone distance, suitable for buttons with full screen |
90 | - ScreenUtil.statusBarHeight //Status bar height , Notch will be higher Unit px | 90 | + ScreenUtil.statusBarHeight //Status bar height , Notch will be higher |
91 | ScreenUtil.textScaleFactor //System font scaling factor | 91 | ScreenUtil.textScaleFactor //System font scaling factor |
92 | 92 | ||
93 | - ScreenUtil().scaleWidth //Ratio of actual width dp to design draft px | ||
94 | - ScreenUtil().scaleHeight //Ratio of actual height dp to design draft px | 93 | + ScreenUtil().scaleWidth //The ratio of actual width to UI design |
94 | + ScreenUtil().scaleHeight //The ratio of actual height to UI design | ||
95 | 95 | ||
96 | 0.2.sw //0,2 vezes a largura da tela | 96 | 0.2.sw //0,2 vezes a largura da tela |
97 | 0.5.sh //50% altura da tela | 97 | 0.5.sh //50% altura da tela |
@@ -8,7 +8,7 @@ class MyApp extends StatelessWidget { | @@ -8,7 +8,7 @@ class MyApp extends StatelessWidget { | ||
8 | Widget build(BuildContext context) { | 8 | Widget build(BuildContext context) { |
9 | //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 iPhone6 (iPhone6 750*1334) | 9 | //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 iPhone6 (iPhone6 750*1334) |
10 | return ScreenUtilInit( | 10 | return ScreenUtilInit( |
11 | - designSize: Size(750, 1334), | 11 | + designSize: Size(360, 690), |
12 | allowFontScaling: false, | 12 | allowFontScaling: false, |
13 | child: MaterialApp( | 13 | child: MaterialApp( |
14 | debugShowCheckedModeBanner: false, | 14 | debugShowCheckedModeBanner: false, |
@@ -54,65 +54,63 @@ class _HomePageState extends State<HomePage> { | @@ -54,65 +54,63 @@ class _HomePageState extends State<HomePage> { | ||
54 | height: 200.h, | 54 | height: 200.h, |
55 | color: Colors.red, | 55 | color: Colors.red, |
56 | child: Text( | 56 | child: Text( |
57 | - 'My width:${0.5.sw}dp \n' | ||
58 | - 'My height:${200.h}dp', | 57 | + 'My actual width: ${0.5.sw}dp \n\n' |
58 | + 'My actual height: ${200.h}dp', | ||
59 | style: TextStyle( | 59 | style: TextStyle( |
60 | color: Colors.white, | 60 | color: Colors.white, |
61 | - fontSize: 24.sp, | 61 | + fontSize: 12.sp, |
62 | ), | 62 | ), |
63 | ), | 63 | ), |
64 | ), | 64 | ), |
65 | // Without using Extensions | 65 | // Without using Extensions |
66 | Container( | 66 | Container( |
67 | padding: EdgeInsets.all(ScreenUtil().setWidth(10)), | 67 | padding: EdgeInsets.all(ScreenUtil().setWidth(10)), |
68 | - width: ScreenUtil().screenWidth * 0.5, | 68 | + width: 180.w, |
69 | height: ScreenUtil().setHeight(200), | 69 | height: ScreenUtil().setHeight(200), |
70 | color: Colors.blue, | 70 | color: Colors.blue, |
71 | child: Text( | 71 | child: Text( |
72 | - 'My width:${ScreenUtil().screenWidth * 0.5}dp \n' | ||
73 | - 'My height:${ScreenUtil().setHeight(200)}dp', | 72 | + 'My design draft width: 180dp\n\n' |
73 | + 'My design draft height: 200dp', | ||
74 | style: TextStyle( | 74 | style: TextStyle( |
75 | color: Colors.white, | 75 | color: Colors.white, |
76 | - fontSize: ScreenUtil().setSp(24), | 76 | + fontSize: ScreenUtil().setSp(12), |
77 | ), | 77 | ), |
78 | ), | 78 | ), |
79 | ), | 79 | ), |
80 | ], | 80 | ], |
81 | ), | 81 | ), |
82 | - Text('Device width:${ScreenUtil().screenWidthPx}px'), | ||
83 | - Text('Device height:${ScreenUtil().screenHeightPx}px'), | ||
84 | Text('Device width:${ScreenUtil().screenWidth}dp'), | 82 | Text('Device width:${ScreenUtil().screenWidth}dp'), |
85 | Text('Device height:${ScreenUtil().screenHeight}dp'), | 83 | Text('Device height:${ScreenUtil().screenHeight}dp'), |
86 | Text('Device pixel density:${ScreenUtil().pixelRatio}'), | 84 | Text('Device pixel density:${ScreenUtil().pixelRatio}'), |
87 | Text('Bottom safe zone distance:${ScreenUtil().bottomBarHeight}dp'), | 85 | Text('Bottom safe zone distance:${ScreenUtil().bottomBarHeight}dp'), |
88 | Text('Status bar height:${ScreenUtil().statusBarHeight}dp'), | 86 | Text('Status bar height:${ScreenUtil().statusBarHeight}dp'), |
89 | Text( | 87 | Text( |
90 | - 'Ratio of actual width dp to design draft px:${ScreenUtil().scaleWidth}', | 88 | + 'The ratio of actual width to UI design:${ScreenUtil().scaleWidth}', |
91 | textAlign: TextAlign.center, | 89 | textAlign: TextAlign.center, |
92 | ), | 90 | ), |
93 | Text( | 91 | Text( |
94 | - 'Ratio of actual height dp to design draft px:${ScreenUtil().scaleHeight}', | 92 | + 'The ratio of actual height to UI design:${ScreenUtil().scaleHeight}', |
95 | textAlign: TextAlign.center, | 93 | textAlign: TextAlign.center, |
96 | ), | 94 | ), |
97 | SizedBox( | 95 | SizedBox( |
98 | - height: 5.h, | 96 | + height: 50.h, |
99 | ), | 97 | ), |
100 | Text('System font scaling factor:${ScreenUtil().textScaleFactor}'), | 98 | Text('System font scaling factor:${ScreenUtil().textScaleFactor}'), |
101 | Column( | 99 | Column( |
102 | crossAxisAlignment: CrossAxisAlignment.start, | 100 | crossAxisAlignment: CrossAxisAlignment.start, |
103 | children: <Widget>[ | 101 | children: <Widget>[ |
104 | Text( | 102 | Text( |
105 | - 'My font size is 24px on the design draft and will not change with the system.', | 103 | + 'My font size is 16sp on the design draft and will not change with the system.', |
106 | style: TextStyle( | 104 | style: TextStyle( |
107 | color: Colors.black, | 105 | color: Colors.black, |
108 | - fontSize: 24.sp, | 106 | + fontSize: 16.sp, |
109 | ), | 107 | ), |
110 | ), | 108 | ), |
111 | Text( | 109 | Text( |
112 | - 'My font size is 24px on the design draft and will change with the system.', | 110 | + 'My font size is 16sp on the design draft and will change with the system.', |
113 | style: TextStyle( | 111 | style: TextStyle( |
114 | color: Colors.black, | 112 | color: Colors.black, |
115 | - fontSize: 24.ssp, | 113 | + fontSize: 16.ssp, |
116 | ), | 114 | ), |
117 | ), | 115 | ), |
118 | ], | 116 | ], |
@@ -129,8 +127,8 @@ class _HomePageState extends State<HomePage> { | @@ -129,8 +127,8 @@ class _HomePageState extends State<HomePage> { | ||
129 | print('Device pixel density:${ScreenUtil().pixelRatio}'); | 127 | print('Device pixel density:${ScreenUtil().pixelRatio}'); |
130 | print('Bottom safe zone distance dp:${ScreenUtil().bottomBarHeight}dp'); | 128 | print('Bottom safe zone distance dp:${ScreenUtil().bottomBarHeight}dp'); |
131 | print('Status bar height dp:${ScreenUtil().statusBarHeight}dp'); | 129 | print('Status bar height dp:${ScreenUtil().statusBarHeight}dp'); |
132 | - print('Ratio of actual width dp to UI Design:${ScreenUtil().scaleWidth}'); | ||
133 | - print('Ratio of actual height dp to UI Design:${ScreenUtil().scaleHeight}'); | 130 | + print('The ratio of actual width to UI design:${ScreenUtil().scaleWidth}'); |
131 | + print('The ratio of actual height to UI design:${ScreenUtil().scaleHeight}'); | ||
134 | print('System font scaling:${ScreenUtil().textScaleFactor}'); | 132 | print('System font scaling:${ScreenUtil().textScaleFactor}'); |
135 | print('0.5 times the screen width:${0.5.sw}dp'); | 133 | print('0.5 times the screen width:${0.5.sw}dp'); |
136 | print('0.5 times the screen height:${0.5.sh}dp'); | 134 | print('0.5 times the screen height:${0.5.sh}dp'); |
@@ -51,57 +51,55 @@ class _HomePageState extends State<HomePage> { | @@ -51,57 +51,55 @@ class _HomePageState extends State<HomePage> { | ||
51 | height: ScreenUtil().setHeight(200), | 51 | height: ScreenUtil().setHeight(200), |
52 | color: Colors.red, | 52 | color: Colors.red, |
53 | child: Text( | 53 | child: Text( |
54 | - '我的宽度:${0.5.sw}dp \n' | ||
55 | - '我的高度:${ScreenUtil().setHeight(200)}dp', | ||
56 | - style: TextStyle(color: Colors.white, fontSize: ScreenUtil().setSp(24)), | 54 | + '我的实际宽度:${0.5.sw}dp \n' |
55 | + '我的实际高度:${ScreenUtil().setHeight(200)}dp', | ||
56 | + style: TextStyle(color: Colors.white, fontSize: ScreenUtil().setSp(12)), | ||
57 | ), | 57 | ), |
58 | ), | 58 | ), |
59 | Container( | 59 | Container( |
60 | padding: EdgeInsets.all(ScreenUtil().setWidth(10)), | 60 | padding: EdgeInsets.all(ScreenUtil().setWidth(10)), |
61 | - width: 375.w, | 61 | + width: 180.w, |
62 | height: 200.h, | 62 | height: 200.h, |
63 | color: Colors.blue, | 63 | color: Colors.blue, |
64 | child: Text( | 64 | child: Text( |
65 | - '我的宽度:${375.w}dp \n' | ||
66 | - '我的高度:${200.h}dp', | ||
67 | - style: TextStyle(color: Colors.white, fontSize: ScreenUtil().setSp(24))), | 65 | + '我的设计稿宽度: 180dp \n' |
66 | + '我的设计稿高度: 200dp', | ||
67 | + style: TextStyle(color: Colors.white, fontSize: ScreenUtil().setSp(12))), | ||
68 | ), | 68 | ), |
69 | ], | 69 | ], |
70 | ), | 70 | ), |
71 | - Text('设备宽度:${ScreenUtil().screenWidthPx}px'), | ||
72 | - Text('设备高度:${ScreenUtil().screenHeightPx}px'), | ||
73 | Text('设备宽度:${ScreenUtil().screenWidth}dp'), | 71 | Text('设备宽度:${ScreenUtil().screenWidth}dp'), |
74 | Text('设备高度:${ScreenUtil().screenHeight}dp'), | 72 | Text('设备高度:${ScreenUtil().screenHeight}dp'), |
75 | Text('设备的像素密度:${ScreenUtil().pixelRatio}'), | 73 | Text('设备的像素密度:${ScreenUtil().pixelRatio}'), |
76 | Text('底部安全区距离:${ScreenUtil().bottomBarHeight}dp'), | 74 | Text('底部安全区距离:${ScreenUtil().bottomBarHeight}dp'), |
77 | Text('状态栏高度:${ScreenUtil().statusBarHeight}dp'), | 75 | Text('状态栏高度:${ScreenUtil().statusBarHeight}dp'), |
78 | Text( | 76 | Text( |
79 | - '实际宽度的dp与设计稿px的比例:${ScreenUtil().scaleWidth}', | 77 | + '实际宽度与设计稿的比例:${ScreenUtil().scaleWidth}', |
80 | textAlign: TextAlign.center, | 78 | textAlign: TextAlign.center, |
81 | ), | 79 | ), |
82 | Text( | 80 | Text( |
83 | - '实际高度的dp与设计稿px的比例:${ScreenUtil().scaleHeight}', | 81 | + '实际高度与设计稿的比例:${ScreenUtil().scaleHeight}', |
84 | textAlign: TextAlign.center, | 82 | textAlign: TextAlign.center, |
85 | ), | 83 | ), |
86 | SizedBox( | 84 | SizedBox( |
87 | - height: 100.h, | 85 | + height: 50.h, |
88 | ), | 86 | ), |
89 | Text('系统的字体缩放比例:${ScreenUtil().textScaleFactor}'), | 87 | Text('系统的字体缩放比例:${ScreenUtil().textScaleFactor}'), |
90 | Column( | 88 | Column( |
91 | crossAxisAlignment: CrossAxisAlignment.start, | 89 | crossAxisAlignment: CrossAxisAlignment.start, |
92 | children: <Widget>[ | 90 | children: <Widget>[ |
93 | Text( | 91 | Text( |
94 | - '我的文字大小在设计稿上是24px,不会随着系统的文字缩放比例变化', | 92 | + '我的文字大小在设计稿上是16dp,不会随着系统的文字缩放比例变化', |
95 | style: TextStyle( | 93 | style: TextStyle( |
96 | color: Colors.black, | 94 | color: Colors.black, |
97 | - fontSize: 24.sp, | 95 | + fontSize: 16.sp, |
98 | ), | 96 | ), |
99 | ), | 97 | ), |
100 | Text( | 98 | Text( |
101 | - '我的文字大小在设计稿上是24px,会随着系统的文字缩放比例变化', | 99 | + '我的文字大小在设计稿上是16dp,会随着系统的文字缩放比例变化', |
102 | style: TextStyle( | 100 | style: TextStyle( |
103 | color: Colors.black, | 101 | color: Colors.black, |
104 | - fontSize: 24.ssp, | 102 | + fontSize: 16.ssp, |
105 | ), | 103 | ), |
106 | ), | 104 | ), |
107 | ], | 105 | ], |
@@ -4,10 +4,9 @@ | @@ -4,10 +4,9 @@ | ||
4 | */ | 4 | */ |
5 | 5 | ||
6 | import 'package:flutter/material.dart'; | 6 | import 'package:flutter/material.dart'; |
7 | -import 'dart:ui' as ui; | ||
8 | 7 | ||
9 | class ScreenUtil { | 8 | class ScreenUtil { |
10 | - static const Size defaultSize = Size(1080, 1920); | 9 | + static const Size defaultSize = Size(360, 690); |
11 | static ScreenUtil _instance; | 10 | static ScreenUtil _instance; |
12 | 11 | ||
13 | /// UI设计中手机尺寸 , px | 12 | /// UI设计中手机尺寸 , px |
@@ -47,7 +46,7 @@ class ScreenUtil { | @@ -47,7 +46,7 @@ class ScreenUtil { | ||
47 | _screenWidth = constraints.maxWidth; | 46 | _screenWidth = constraints.maxWidth; |
48 | _screenHeight = constraints.maxHeight; | 47 | _screenHeight = constraints.maxHeight; |
49 | 48 | ||
50 | - var mediaQuery = ui.window; | 49 | + var mediaQuery = WidgetsBinding.instance.window; |
51 | _pixelRatio = mediaQuery.devicePixelRatio; | 50 | _pixelRatio = mediaQuery.devicePixelRatio; |
52 | _statusBarHeight = mediaQuery.padding.top; | 51 | _statusBarHeight = mediaQuery.padding.top; |
53 | _bottomBarHeight = mediaQuery.padding.bottom; | 52 | _bottomBarHeight = mediaQuery.padding.bottom; |
@@ -70,14 +69,6 @@ class ScreenUtil { | @@ -70,14 +69,6 @@ class ScreenUtil { | ||
70 | ///The vertical extent of this size. dp | 69 | ///The vertical extent of this size. dp |
71 | double get screenHeight => _screenHeight; | 70 | double get screenHeight => _screenHeight; |
72 | 71 | ||
73 | - /// 当前设备宽度 px | ||
74 | - /// The vertical extent of this size. px | ||
75 | - double get screenWidthPx => _screenWidth * _pixelRatio; | ||
76 | - | ||
77 | - /// 当前设备高度 px | ||
78 | - /// The vertical extent of this size. px | ||
79 | - double get screenHeightPx => _screenHeight * _pixelRatio; | ||
80 | - | ||
81 | /// 状态栏高度 dp 刘海屏会更高 | 72 | /// 状态栏高度 dp 刘海屏会更高 |
82 | /// The offset from the top, in dp | 73 | /// The offset from the top, in dp |
83 | double get statusBarHeight => _statusBarHeight / _pixelRatio; | 74 | double get statusBarHeight => _statusBarHeight / _pixelRatio; |
@@ -86,10 +77,11 @@ class ScreenUtil { | @@ -86,10 +77,11 @@ class ScreenUtil { | ||
86 | /// The offset from the bottom, in dp | 77 | /// The offset from the bottom, in dp |
87 | double get bottomBarHeight => _bottomBarHeight / _pixelRatio; | 78 | double get bottomBarHeight => _bottomBarHeight / _pixelRatio; |
88 | 79 | ||
89 | - /// 实际的dp与UI设计px的比例 | ||
90 | - /// The ratio of the actual dp to the design draft px | 80 | + /// 实际尺寸与UI设计的比例 |
81 | + /// The ratio of actual width to UI design | ||
91 | double get scaleWidth => _screenWidth / uiSize.width; | 82 | double get scaleWidth => _screenWidth / uiSize.width; |
92 | 83 | ||
84 | + /// /// The ratio of actual height to UI design | ||
93 | double get scaleHeight => _screenHeight / uiSize.height; | 85 | double get scaleHeight => _screenHeight / uiSize.height; |
94 | 86 | ||
95 | double get scaleText => scaleWidth; | 87 | double get scaleText => scaleWidth; |
@@ -116,12 +108,12 @@ class ScreenUtil { | @@ -116,12 +108,12 @@ class ScreenUtil { | ||
116 | ///Font size adaptation method | 108 | ///Font size adaptation method |
117 | ///- [fontSize] The size of the font on the UI design, in px. | 109 | ///- [fontSize] The size of the font on the UI design, in px. |
118 | ///- [allowFontScaling] | 110 | ///- [allowFontScaling] |
119 | - double setSp(num fontSize, {bool allowFontScalingSelf}) => | ||
120 | - allowFontScalingSelf == null | ||
121 | - ? (allowFontScaling | ||
122 | - ? (fontSize * scaleText) | ||
123 | - : (fontSize * scaleText / _textScaleFactor)) | ||
124 | - : (allowFontScalingSelf | ||
125 | - ? (fontSize * scaleText) | ||
126 | - : (fontSize * scaleText / _textScaleFactor)); | 111 | + double setSp(num fontSize, {bool allowFontScalingSelf}) => allowFontScalingSelf == null |
112 | + ? (allowFontScaling ? (fontSize * scaleText) : (fontSize * scaleText / _textScaleFactor)) | ||
113 | + : (allowFontScalingSelf ? (fontSize * scaleText) : (fontSize * scaleText / _textScaleFactor)); | ||
114 | +} | ||
115 | + | ||
116 | +enum UnitType { | ||
117 | + px, | ||
118 | + dp, | ||
127 | } | 119 | } |
1 | name: flutter_screenutil | 1 | name: flutter_screenutil |
2 | description: A flutter plugin for adapting screen and font size.Guaranteed to look good on different models | 2 | description: A flutter plugin for adapting screen and font size.Guaranteed to look good on different models |
3 | -version: 4.0.0-beta3 | 3 | +version: 4.0.1 |
4 | homepage: https://github.com/OpenFlutter/flutter_screenutil | 4 | homepage: https://github.com/OpenFlutter/flutter_screenutil |
5 | 5 | ||
6 | environment: | 6 | environment: |
-
Please register or login to post a comment