李卓原

Merge branch 'v4'

null safety.1
  1 +
  2 +# 5.0.0-nullsafety.1
  3 +- merge 4.0.1 ,4.0.2 #183
  4 +
1 # 5.0.0-nullsafety.0 5 # 5.0.0-nullsafety.0
2 - Migrated flutter_screenutil to non-nullable 6 - Migrated flutter_screenutil to non-nullable
3 7
  8 +# 4.0.2
  9 +- add r(),adapt according to the smaller of width or height
  10 +
  11 +# 4.0.1
  12 +- Modify the initialization unit to dp
  13 +- delete screenWidthPx and screenHeightPx(No one use these method,I guess)
  14 +
4 # 4.0.0 15 # 4.0.0
5 -- Upgrade to 4.0.0 16 +- update to 4.0.0
6 17
7 # 4.0.0-beta3 18 # 4.0.0-beta3
8 - Optimize the way of initialization 19 - Optimize the way of initialization
@@ -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: ^5.0.0-nullsafety.0 26 + flutter_screenutil: ^5.0.0-nullsafety.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,11 +74,12 @@ ScreenUtil.init(constraints, designSize: Size(750, 1334), allowFontScaling: true @@ -74,11 +74,12 @@ 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
81 ScreenUtil().setHeight(200) (dart sdk>=2.6 : 200.h) //Adapted to screen height , under normal circumstances, the height still uses x.w 81 ScreenUtil().setHeight(200) (dart sdk>=2.6 : 200.h) //Adapted to screen height , under normal circumstances, the height still uses x.w
  82 + ScreenUtil().radius(200) (dart sdk>=2.6 : 200.r) //Adapt according to the smaller of width or height
82 ScreenUtil().setSp(24) (dart sdk>=2.6 : 24.sp) //Adapter font 83 ScreenUtil().setSp(24) (dart sdk>=2.6 : 24.sp) //Adapter font
83 ScreenUtil().setSp(24, allowFontScalingSelf: true) (dart sdk>=2.6 : 24.ssp) //Adapter font(fonts will scale to respect Text Size accessibility settings) 84 ScreenUtil().setSp(24, allowFontScalingSelf: true) (dart sdk>=2.6 : 24.ssp) //Adapter font(fonts will scale to respect Text Size accessibility settings)
84 ScreenUtil().setSp(24, allowFontScalingSelf: false) (dart sdk>=2.6 : 24.nsp) //Adapter font(fonts will not scale to respect Text Size accessibility settings) 85 ScreenUtil().setSp(24, allowFontScalingSelf: false) (dart sdk>=2.6 : 24.nsp) //Adapter font(fonts will not scale to respect Text Size accessibility settings)
@@ -87,11 +88,11 @@ ScreenUtil.init(constraints, designSize: Size(750, 1334), allowFontScaling: true @@ -87,11 +88,11 @@ ScreenUtil.init(constraints, designSize: Size(750, 1334), allowFontScaling: true
87 ScreenUtil().screenWidth (dart sdk>=2.6 : 1.sw) //Device width 88 ScreenUtil().screenWidth (dart sdk>=2.6 : 1.sw) //Device width
88 ScreenUtil().screenHeight (dart sdk>=2.6 : 1.sh) //Device height 89 ScreenUtil().screenHeight (dart sdk>=2.6 : 1.sh) //Device height
89 ScreenUtil().bottomBarHeight //Bottom safe zone distance, suitable for buttons with full screen 90 ScreenUtil().bottomBarHeight //Bottom safe zone distance, suitable for buttons with full screen
90 - ScreenUtil().statusBarHeight //Status bar height , Notch will be higher Unit px 91 + ScreenUtil().statusBarHeight //Status bar height , Notch will be higher
91 ScreenUtil().textScaleFactor //System font scaling factor 92 ScreenUtil().textScaleFactor //System font scaling factor
92 93
93 - ScreenUtil().scaleWidth //Ratio of actual width dp to ui design  
94 - ScreenUtil().scaleHeight //Ratio of actual height dp to ui design 94 + ScreenUtil().scaleWidth //The ratio of actual width to UI design
  95 + ScreenUtil().scaleHeight //The ratio of actual height to UI design
95 96
96 0.2.sw //0.2 times the screen width 97 0.2.sw //0.2 times the screen width
97 0.5.sh //50% of screen height 98 0.5.sh //50% of screen height
@@ -99,7 +100,7 @@ ScreenUtil.init(constraints, designSize: Size(750, 1334), allowFontScaling: true @@ -99,7 +100,7 @@ ScreenUtil.init(constraints, designSize: Size(750, 1334), allowFontScaling: true
99 100
100 #### Adapt screen size: 101 #### Adapt screen size:
101 102
102 -Pass the px size of the design draft((The unit is the same as the unit at initialization)): 103 +Pass the dp size of the design draft((The unit is the same as the unit at initialization)):
103 104
104 Adapted to screen width: `ScreenUtil().setWidth(540)`, 105 Adapted to screen width: `ScreenUtil().setWidth(540)`,
105 106
@@ -129,22 +130,30 @@ The height can also use setWidth to ensure that it is not deformed(when you want @@ -129,22 +130,30 @@ The height can also use setWidth to ensure that it is not deformed(when you want
129 130
130 setHeight method is mainly adapted in height, you want to control the height and actuality of a screen on the UIUsed when the same is displayed. 131 setHeight method is mainly adapted in height, you want to control the height and actuality of a screen on the UIUsed when the same is displayed.
131 132
  133 +Generally speaking, 50.w!=50.h.
  134 +
132 ```dart 135 ```dart
133 //for example: 136 //for example:
134 137
135 ///If you want to display a square: 138 ///If you want to display a square:
136 -///rectangle 139 +///The UI may show a rectangle:
137 Container( 140 Container(
138 - width: ScreenUtil().setWidth(375),  
139 - height: ScreenUtil().setWidth(200), 141 + width: 375.w,
  142 + height: 375.h,
140 ), 143 ),
141 144
142 ////If you want to display a square: 145 ////If you want to display a square:
143 Container( 146 Container(
144 - width: ScreenUtil().setWidth(300), 147 + width: 300.w,
145 height: 300.w, 148 height: 300.w,
146 ), 149 ),
147 150
  151 +or
  152 +
  153 +Container(
  154 + width: 300.r,
  155 + height: 300.r,
  156 + ),
148 ``` 157 ```
149 158
150 159
@@ -169,13 +178,13 @@ Column( @@ -169,13 +178,13 @@ Column(
169 crossAxisAlignment: CrossAxisAlignment.start, 178 crossAxisAlignment: CrossAxisAlignment.start,
170 children: <Widget>[ 179 children: <Widget>[
171 Text( 180 Text(
172 - 'My font size is 24px on the design draft and will not change with the system.', 181 + 'My font size is 24dp on the design draft and will not change with the system.',
173 style: TextStyle( 182 style: TextStyle(
174 color: Colors.black, 183 color: Colors.black,
175 fontSize: ScreenUtil().setSp(24), 184 fontSize: ScreenUtil().setSp(24),
176 )), 185 )),
177 Text( 186 Text(
178 - 'My font size is 24px on the design draft and will change with the system.', 187 + 'My font size is 24dp on the design draft and will change with the system.',
179 style: TextStyle( 188 style: TextStyle(
180 color: Colors.black, 189 color: Colors.black,
181 fontSize: ScreenUtil() 190 fontSize: ScreenUtil()
1 -# flutter_ScreenUtil 1 +# flutter_screenUtil
2 2
3 [![pub package](https://img.shields.io/pub/v/flutter_screenutil.svg)](https://pub.dartlang.org/packages/flutter_screenutil) 3 [![pub package](https://img.shields.io/pub/v/flutter_screenutil.svg)](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: ^5.0.0-nullsafety.0 31 + flutter_screenutil: ^5.0.0-nullsafety.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,24 +65,25 @@ class MyApp extends StatelessWidget { @@ -65,24 +65,25 @@ 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) //根据屏幕高度适配尺寸(一般根据宽度适配即可)
  86 + ScreenUtil().radius(200) (sdk>=2.6 : 200.r) //根据宽度或高度中的较小者进行调整
86 ScreenUtil().setSp(24) (sdk>=2.6 : 24.sp) //适配字体 87 ScreenUtil().setSp(24) (sdk>=2.6 : 24.sp) //适配字体
87 ScreenUtil().setSp(24, allowFontScalingSelf: true) (sdk>=2.6 : 24.ssp) //适配字体(根据系统的“字体大小”辅助选项来进行缩放) 88 ScreenUtil().setSp(24, allowFontScalingSelf: true) (sdk>=2.6 : 24.ssp) //适配字体(根据系统的“字体大小”辅助选项来进行缩放)
88 ScreenUtil().setSp(24, allowFontScalingSelf: false) (sdk>=2.6 : 24.nsp) //适配字体(不会根据系统的“字体大小”辅助选项来进行缩放) 89 ScreenUtil().setSp(24, allowFontScalingSelf: false) (sdk>=2.6 : 24.nsp) //适配字体(不会根据系统的“字体大小”辅助选项来进行缩放)
@@ -94,8 +95,8 @@ ScreenUtil.init(constraints, designSize: Size(750, 1334), allowFontScaling: true @@ -94,8 +95,8 @@ ScreenUtil.init(constraints, designSize: Size(750, 1334), allowFontScaling: true
94 ScreenUtil.statusBarHeight //状态栏高度 刘海屏会更高 95 ScreenUtil.statusBarHeight //状态栏高度 刘海屏会更高
95 ScreenUtil.textScaleFactor //系统字体缩放比例 96 ScreenUtil.textScaleFactor //系统字体缩放比例
96 97
97 - ScreenUtil().scaleWidth // 实际宽度的dp与设计稿宽度的比例  
98 - ScreenUtil().scaleHeight // 实际高度的dp与设计稿高度度的比例 98 + ScreenUtil().scaleWidth // 实际宽度设计稿宽度的比例
  99 + ScreenUtil().scaleHeight // 实际高度与设计稿高度度的比例
99 100
100 0.2.sw //屏幕宽度的0.2倍 101 0.2.sw //屏幕宽度的0.2倍
101 0.5.sh //屏幕高度的50% 102 0.5.sh //屏幕高度的50%
@@ -110,6 +111,8 @@ ScreenUtil.init(constraints, designSize: Size(750, 1334), allowFontScaling: true @@ -110,6 +111,8 @@ ScreenUtil.init(constraints, designSize: Size(750, 1334), allowFontScaling: true
110 111
111 根据屏幕高度适配 `height: ScreenUtil().setHeight(200)`, 一般来说,控件高度也根据宽度进行适配 112 根据屏幕高度适配 `height: ScreenUtil().setHeight(200)`, 一般来说,控件高度也根据宽度进行适配
112 113
  114 +一般来说,50.w!=50.h
  115 +
113 **注意** 116 **注意**
114 117
115 高度也根据setWidth来做适配可以保证不变形(当你想要一个正方形的时候) 118 高度也根据setWidth来做适配可以保证不变形(当你想要一个正方形的时候)
@@ -119,16 +122,16 @@ setHeight譁ケ豕穂クサ隕∵弍蝨ィ鬮伜コヲ荳願ソ幄。碁る, 蝨ィ菴諠ウ謗ァ蛻カUI荳贋ク螻冗噪 @@ -119,16 +122,16 @@ setHeight譁ケ豕穂クサ隕∵弍蝨ィ鬮伜コヲ荳願ソ幄。碁る, 蝨ィ菴諠ウ謗ァ蛻カUI荳贋ク螻冗噪
119 例如: 122 例如:
120 123
121 ```dart 124 ```dart
122 -//UI上是长方形: 125 +//UI可能显示长方形:
123 Container( 126 Container(
124 - width: ScreenUtil().setWidth(375),  
125 - height: ScreenUtil().setHeight(375), 127 + width: 375.w,
  128 + height: 375.h,
126 ), 129 ),
127 130
128 //如果你想显示一个正方形: 131 //如果你想显示一个正方形:
129 Container( 132 Container(
130 - width: ScreenUtil().setWidth(300),  
131 - height: ScreenUtil().setWidth(300), 133 + width: 300.r,
  134 + height: 300.r,
132 ), 135 ),
133 ``` 136 ```
134 137
@@ -169,12 +172,12 @@ ScreenUtil().setSp(24, allowFontScalingSelf: true) @@ -169,12 +172,12 @@ ScreenUtil().setSp(24, allowFontScalingSelf: true)
169 Column( 172 Column(
170 crossAxisAlignment: CrossAxisAlignment.start, 173 crossAxisAlignment: CrossAxisAlignment.start,
171 children: <Widget>[ 174 children: <Widget>[
172 - Text('我的文字大小在设计稿上是24px,不会随着系统的文字缩放比例变化', 175 + Text('我的文字大小在设计稿上是24dp,不会随着系统的文字缩放比例变化',
173 style: TextStyle( 176 style: TextStyle(
174 color: Colors.black, 177 color: Colors.black,
175 fontSize: ScreenUtil().setSp(24), 178 fontSize: ScreenUtil().setSp(24),
176 )), 179 )),
177 - Text('我的文字大小在设计稿上是24px,会随着系统的文字缩放比例变化', 180 + Text('我的文字大小在设计稿上是24dp,会随着系统的文字缩放比例变化',
178 style: TextStyle( 181 style: TextStyle(
179 color: Colors.black, 182 color: Colors.black,
180 fontSize: ScreenUtil() 183 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: ^5.0.0-nullsafety.0 27 + flutter_screenutil: ^5.0.0-nullsafety.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
@@ -79,6 +79,7 @@ ScreenUtil.init(constraints, designSize: Size(750, 1334), allowFontScaling: true @@ -79,6 +79,7 @@ ScreenUtil.init(constraints, designSize: Size(750, 1334), allowFontScaling: true
79 ```dart 79 ```dart
80 ScreenUtil().setWidth(540) (sdk>=2.6 : 540.w) //Adapted to screen width 80 ScreenUtil().setWidth(540) (sdk>=2.6 : 540.w) //Adapted to screen width
81 ScreenUtil().setHeight(200) (sdk>=2.6 : 200.h) //Adapted to screen height 81 ScreenUtil().setHeight(200) (sdk>=2.6 : 200.h) //Adapted to screen height
  82 + ScreenUtil().radius(200) (dart sdk>=2.6 : 200.r) //Adapt according to the smaller of width or height
82 ScreenUtil().setSp(24) (sdk>=2.6 : 24.sp) //Adapter font 83 ScreenUtil().setSp(24) (sdk>=2.6 : 24.sp) //Adapter font
83 ScreenUtil().setSp(24, allowFontScalingSelf: true) (sdk>=2.6 : 24.ssp) //Adapter font(fonts will scale to respect Text Size accessibility settings) 84 ScreenUtil().setSp(24, allowFontScalingSelf: true) (sdk>=2.6 : 24.ssp) //Adapter font(fonts will scale to respect Text Size accessibility settings)
84 ScreenUtil().setSp(24, allowFontScalingSelf: false) (sdk>=2.6 : 24.nsp) //Adapter font(fonts will not scale to respect Text Size accessibility settings) 85 ScreenUtil().setSp(24, allowFontScalingSelf: false) (sdk>=2.6 : 24.nsp) //Adapter font(fonts will not scale to respect Text Size accessibility settings)
@@ -87,11 +88,11 @@ ScreenUtil.init(constraints, designSize: Size(750, 1334), allowFontScaling: true @@ -87,11 +88,11 @@ ScreenUtil.init(constraints, designSize: Size(750, 1334), allowFontScaling: true
87 ScreenUtil.screenWidth (sdk>=2.6 : 1.sw) //Device width 88 ScreenUtil.screenWidth (sdk>=2.6 : 1.sw) //Device width
88 ScreenUtil.screenHeight (sdk>=2.6 : 1.sh) //Device height 89 ScreenUtil.screenHeight (sdk>=2.6 : 1.sh) //Device height
89 ScreenUtil.bottomBarHeight //Bottom safe zone distance, suitable for buttons with full screen 90 ScreenUtil.bottomBarHeight //Bottom safe zone distance, suitable for buttons with full screen
90 - ScreenUtil.statusBarHeight //Status bar height , Notch will be higher Unit px 91 + ScreenUtil.statusBarHeight //Status bar height , Notch will be higher
91 ScreenUtil.textScaleFactor //System font scaling factor 92 ScreenUtil.textScaleFactor //System font scaling factor
92 93
93 - ScreenUtil().scaleWidth //Ratio of actual width dp to design draft px  
94 - ScreenUtil().scaleHeight //Ratio of actual height dp to design draft px 94 + ScreenUtil().scaleWidth //The ratio of actual width to UI design
  95 + ScreenUtil().scaleHeight //The ratio of actual height to UI design
95 96
96 0.2.sw //0,2 vezes a largura da tela 97 0.2.sw //0,2 vezes a largura da tela
97 0.5.sh //50% altura da tela 98 0.5.sh //50% altura da tela
@@ -129,19 +130,21 @@ Altura também é adaptada de acordo com o setWidth para garantir que não tenha @@ -129,19 +130,21 @@ Altura também é adaptada de acordo com o setWidth para garantir que não tenha
129 130
130 O método setHeight é a principal forma de adaptar a altura, se quiser controlar a altura e a realidade de uma tela na UiUsed quando a mesma for exibida. 131 O método setHeight é a principal forma de adaptar a altura, se quiser controlar a altura e a realidade de uma tela na UiUsed quando a mesma for exibida.
131 132
  133 +Generally speaking, 50.w!=50.h.
  134 +
132 ```dart 135 ```dart
133 //Exemplo: 136 //Exemplo:
134 //Retângulo 137 //Retângulo
135 Container( 138 Container(
136 - width: ScreenUtil().setWidth(375),  
137 - height: ScreenUtil().setHeight(200), 139 + width: 375.w,
  140 + height: 200.w,
138 ... 141 ...
139 ), 142 ),
140 143
141 ////Se quiser exibir um quadrado: 144 ////Se quiser exibir um quadrado:
142 Container( 145 Container(
143 - width: ScreenUtil().setWidth(300),  
144 - height: ScreenUtil().setWidth(300), 146 + width: 300.r,
  147 + height: 300.r,
145 ), 148 ),
146 149
147 ``` 150 ```
@@ -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,78 @@ class _HomePageState extends State<HomePage> { @@ -54,65 +54,78 @@ 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'), 82 + Container(
  83 + padding: EdgeInsets.all(ScreenUtil().setWidth(10)),
  84 + width: 100.r,
  85 + height: 100.r,
  86 + color: Colors.green,
  87 + child: Text('I am a square with a side length of 100',
  88 + style: TextStyle(
  89 + color: Colors.white,
  90 + fontSize: ScreenUtil().setSp(12),
  91 + ),
  92 + ),
  93 + ),
84 Text('Device width:${ScreenUtil().screenWidth}dp'), 94 Text('Device width:${ScreenUtil().screenWidth}dp'),
85 Text('Device height:${ScreenUtil().screenHeight}dp'), 95 Text('Device height:${ScreenUtil().screenHeight}dp'),
86 Text('Device pixel density:${ScreenUtil().pixelRatio}'), 96 Text('Device pixel density:${ScreenUtil().pixelRatio}'),
87 Text('Bottom safe zone distance:${ScreenUtil().bottomBarHeight}dp'), 97 Text('Bottom safe zone distance:${ScreenUtil().bottomBarHeight}dp'),
88 Text('Status bar height:${ScreenUtil().statusBarHeight}dp'), 98 Text('Status bar height:${ScreenUtil().statusBarHeight}dp'),
89 Text( 99 Text(
90 - 'Ratio of actual width dp to design draft px:${ScreenUtil().scaleWidth}', 100 + 'The ratio of actual width to UI design:${ScreenUtil().scaleWidth}',
91 textAlign: TextAlign.center, 101 textAlign: TextAlign.center,
92 ), 102 ),
93 Text( 103 Text(
94 - 'Ratio of actual height dp to design draft px:${ScreenUtil().scaleHeight}', 104 + 'The ratio of actual height to UI design:${ScreenUtil().scaleHeight}',
95 textAlign: TextAlign.center, 105 textAlign: TextAlign.center,
96 ), 106 ),
97 SizedBox( 107 SizedBox(
98 - height: 5.h, 108 + height: 50.h,
99 ), 109 ),
100 Text('System font scaling factor:${ScreenUtil().textScaleFactor}'), 110 Text('System font scaling factor:${ScreenUtil().textScaleFactor}'),
101 Column( 111 Column(
102 crossAxisAlignment: CrossAxisAlignment.start, 112 crossAxisAlignment: CrossAxisAlignment.start,
103 children: <Widget>[ 113 children: <Widget>[
104 - Text(  
105 - 'My font size is 24px on the design draft and will not change with the system.', 114 + Container(
  115 + height: 32.h,
  116 + child: Text(
  117 + 'My font size is 16sp on the design draft and will not change with the system.',
106 style: TextStyle( 118 style: TextStyle(
107 color: Colors.black, 119 color: Colors.black,
108 - fontSize: 24.sp, 120 + fontSize: 16.sp,
  121 + ),
109 ), 122 ),
110 ), 123 ),
111 Text( 124 Text(
112 - 'My font size is 24px on the design draft and will change with the system.', 125 + 'My font size is 16sp on the design draft and will change with the system.',
113 style: TextStyle( 126 style: TextStyle(
114 color: Colors.black, 127 color: Colors.black,
115 - fontSize: 24.ssp, 128 + fontSize: 16.ssp,
116 ), 129 ),
117 ), 130 ),
118 ], 131 ],
@@ -129,8 +142,8 @@ class _HomePageState extends State<HomePage> { @@ -129,8 +142,8 @@ class _HomePageState extends State<HomePage> {
129 print('Device pixel density:${ScreenUtil().pixelRatio}'); 142 print('Device pixel density:${ScreenUtil().pixelRatio}');
130 print('Bottom safe zone distance dp:${ScreenUtil().bottomBarHeight}dp'); 143 print('Bottom safe zone distance dp:${ScreenUtil().bottomBarHeight}dp');
131 print('Status bar height dp:${ScreenUtil().statusBarHeight}dp'); 144 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}'); 145 + print('The ratio of actual width to UI design:${ScreenUtil().scaleWidth}');
  146 + print('The ratio of actual height to UI design:${ScreenUtil().scaleHeight}');
134 print('System font scaling:${ScreenUtil().textScaleFactor}'); 147 print('System font scaling:${ScreenUtil().textScaleFactor}');
135 print('0.5 times the screen width:${0.5.sw}dp'); 148 print('0.5 times the screen width:${0.5.sw}dp');
136 print('0.5 times the screen height:${0.5.sh}dp'); 149 print('0.5 times the screen height:${0.5.sh}dp');
@@ -51,57 +51,68 @@ class _HomePageState extends State<HomePage> { @@ -51,57 +51,68 @@ 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 ),
71 - Text('设备宽度:${ScreenUtil().screenWidthPx}px'),  
72 - Text('设备高度:${ScreenUtil().screenHeightPx}px'), 72 + Container(
  73 + padding: EdgeInsets.all(ScreenUtil().setWidth(10)),
  74 + width: 100.r,
  75 + height: 100.r,
  76 + color: Colors.green,
  77 + child: Text('我是正方形,边长是100',
  78 + style: TextStyle(
  79 + color: Colors.white,
  80 + fontSize: ScreenUtil().setSp(12),
  81 + ),
  82 + ),
  83 + ),
73 Text('设备宽度:${ScreenUtil().screenWidth}dp'), 84 Text('设备宽度:${ScreenUtil().screenWidth}dp'),
74 Text('设备高度:${ScreenUtil().screenHeight}dp'), 85 Text('设备高度:${ScreenUtil().screenHeight}dp'),
75 Text('设备的像素密度:${ScreenUtil().pixelRatio}'), 86 Text('设备的像素密度:${ScreenUtil().pixelRatio}'),
76 Text('底部安全区距离:${ScreenUtil().bottomBarHeight}dp'), 87 Text('底部安全区距离:${ScreenUtil().bottomBarHeight}dp'),
77 Text('状态栏高度:${ScreenUtil().statusBarHeight}dp'), 88 Text('状态栏高度:${ScreenUtil().statusBarHeight}dp'),
78 Text( 89 Text(
79 - '实际宽度的dp与设计稿px的比例:${ScreenUtil().scaleWidth}', 90 + '实际宽度与设计稿的比例:${ScreenUtil().scaleWidth}',
80 textAlign: TextAlign.center, 91 textAlign: TextAlign.center,
81 ), 92 ),
82 Text( 93 Text(
83 - '实际高度的dp与设计稿px的比例:${ScreenUtil().scaleHeight}', 94 + '实际高度与设计稿的比例:${ScreenUtil().scaleHeight}',
84 textAlign: TextAlign.center, 95 textAlign: TextAlign.center,
85 ), 96 ),
86 SizedBox( 97 SizedBox(
87 - height: 100.h, 98 + height: 50.h,
88 ), 99 ),
89 Text('系统的字体缩放比例:${ScreenUtil().textScaleFactor}'), 100 Text('系统的字体缩放比例:${ScreenUtil().textScaleFactor}'),
90 Column( 101 Column(
91 crossAxisAlignment: CrossAxisAlignment.start, 102 crossAxisAlignment: CrossAxisAlignment.start,
92 children: <Widget>[ 103 children: <Widget>[
93 Text( 104 Text(
94 - '我的文字大小在设计稿上是24px,不会随着系统的文字缩放比例变化', 105 + '我的文字大小在设计稿上是16dp,不会随着系统的文字缩放比例变化',
95 style: TextStyle( 106 style: TextStyle(
96 color: Colors.black, 107 color: Colors.black,
97 - fontSize: 24.sp, 108 + fontSize: 16.sp,
98 ), 109 ),
99 ), 110 ),
100 Text( 111 Text(
101 - '我的文字大小在设计稿上是24px,会随着系统的文字缩放比例变化', 112 + '我的文字大小在设计稿上是16dp,会随着系统的文字缩放比例变化',
102 style: TextStyle( 113 style: TextStyle(
103 color: Colors.black, 114 color: Colors.black,
104 - fontSize: 24.ssp, 115 + fontSize: 16.ssp,
105 ), 116 ),
106 ), 117 ),
107 ], 118 ],
@@ -5,6 +5,8 @@ @@ -5,6 +5,8 @@
5 5
6 import 'dart:ui' as ui; 6 import 'dart:ui' as ui;
7 7
  8 +import 'dart:math';
  9 +
8 import 'package:flutter/material.dart'; 10 import 'package:flutter/material.dart';
9 11
10 class ScreenUtil { 12 class ScreenUtil {
@@ -44,11 +46,11 @@ class ScreenUtil { @@ -44,11 +46,11 @@ class ScreenUtil {
44 _screenWidth = constraints.maxWidth; 46 _screenWidth = constraints.maxWidth;
45 _screenHeight = constraints.maxHeight; 47 _screenHeight = constraints.maxHeight;
46 48
47 - var mediaQuery = WidgetsBinding.instance?.window ?? ui.window;  
48 - _pixelRatio = mediaQuery.devicePixelRatio;  
49 - _statusBarHeight = mediaQuery.padding.top;  
50 - _bottomBarHeight = mediaQuery.padding.bottom;  
51 - _textScaleFactor = mediaQuery.textScaleFactor; 49 + var window = WidgetsBinding.instance?.window ?? ui.window;
  50 + _pixelRatio = window.devicePixelRatio;
  51 + _statusBarHeight = window.padding.top;
  52 + _bottomBarHeight = window.padding.bottom;
  53 + _textScaleFactor = window.textScaleFactor;
52 } 54 }
53 55
54 /// 每个逻辑像素的字体像素数,字体的缩放比例 56 /// 每个逻辑像素的字体像素数,字体的缩放比例
@@ -67,14 +69,6 @@ class ScreenUtil { @@ -67,14 +69,6 @@ class ScreenUtil {
67 ///The vertical extent of this size. dp 69 ///The vertical extent of this size. dp
68 double get screenHeight => _screenHeight; 70 double get screenHeight => _screenHeight;
69 71
70 - /// 当前设备宽度 px  
71 - /// The vertical extent of this size. px  
72 - double get screenWidthPx => _screenWidth * _pixelRatio;  
73 -  
74 - /// 当前设备高度 px  
75 - /// The vertical extent of this size. px  
76 - double get screenHeightPx => _screenHeight * _pixelRatio;  
77 -  
78 /// 状态栏高度 dp 刘海屏会更高 72 /// 状态栏高度 dp 刘海屏会更高
79 /// The offset from the top, in dp 73 /// The offset from the top, in dp
80 double get statusBarHeight => _statusBarHeight / _pixelRatio; 74 double get statusBarHeight => _statusBarHeight / _pixelRatio;
@@ -83,13 +77,14 @@ class ScreenUtil { @@ -83,13 +77,14 @@ class ScreenUtil {
83 /// The offset from the bottom, in dp 77 /// The offset from the bottom, in dp
84 double get bottomBarHeight => _bottomBarHeight / _pixelRatio; 78 double get bottomBarHeight => _bottomBarHeight / _pixelRatio;
85 79
86 - /// 实际的dp与UI设计px的比例  
87 - /// The ratio of the actual dp to the design draft px 80 + /// 实际尺寸与UI设计的比例
  81 + /// The ratio of actual width to UI design
88 double get scaleWidth => _screenWidth / uiSize.width; 82 double get scaleWidth => _screenWidth / uiSize.width;
89 83
  84 + /// /// The ratio of actual height to UI design
90 double get scaleHeight => _screenHeight / uiSize.height; 85 double get scaleHeight => _screenHeight / uiSize.height;
91 86
92 - double get scaleText => scaleWidth; 87 + double get scaleText => min(scaleWidth, scaleHeight);
93 88
94 /// 根据UI设计的设备宽度适配 89 /// 根据UI设计的设备宽度适配
95 /// 高度也可以根据这个来做适配可以保证不变形,比如你先要一个正方形的时候. 90 /// 高度也可以根据这个来做适配可以保证不变形,比如你先要一个正方形的时候.
@@ -108,6 +103,9 @@ class ScreenUtil { @@ -108,6 +103,9 @@ class ScreenUtil {
108 /// does not match the current style effect, or if there is a difference in shape. 103 /// does not match the current style effect, or if there is a difference in shape.
109 double setHeight(num height) => height * scaleHeight; 104 double setHeight(num height) => height * scaleHeight;
110 105
  106 + ///Adapt according to the smaller of width or height
  107 + double radius(num r) => r * scaleText;
  108 +
111 ///字体大小适配方法 109 ///字体大小适配方法
112 ///- [fontSize] UI设计上字体的大小,单位px. 110 ///- [fontSize] UI设计上字体的大小,单位px.
113 ///Font size adaptation method 111 ///Font size adaptation method
@@ -7,6 +7,9 @@ extension SizeExtension on num { @@ -7,6 +7,9 @@ extension SizeExtension on num {
7 ///[ScreenUtil.setHeight] 7 ///[ScreenUtil.setHeight]
8 double get h => ScreenUtil().setHeight(this); 8 double get h => ScreenUtil().setHeight(this);
9 9
  10 + ///[ScreenUtil.radius]
  11 + double get r => ScreenUtil().radius(this);
  12 +
10 ///[ScreenUtil.setSp] 13 ///[ScreenUtil.setSp]
11 double get sp => ScreenUtil().setSp(this); 14 double get sp => ScreenUtil().setSp(this);
12 15
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: 5.0.0-nullsafety.0 3 +version: 5.0.0-nullsafety.1
4 homepage: https://github.com/OpenFlutter/flutter_screenutil 4 homepage: https://github.com/OpenFlutter/flutter_screenutil
5 5
6 environment: 6 environment: