Showing
8 changed files
with
309 additions
and
348 deletions
| @@ -5,7 +5,12 @@ | @@ -5,7 +5,12 @@ | ||
| 5 | * @LastEditTime: 2020年6月20日 11:20:02 | 5 | * @LastEditTime: 2020年6月20日 11:20:02 |
| 6 | * @Description: Update log | 6 | * @Description: Update log |
| 7 | --> | 7 | --> |
| 8 | - | 8 | +# 3.0.0 |
| 9 | +**BREAKING CHANGES** | ||
| 10 | +- `BuildContext` is no more required while initializing. i.e. ScreenUtil.init(~~context~~) | ||
| 11 | +- Initialize size of design draft using `designSize` instead of width & height. | ||
| 12 | +- All the static methods are now member methods. | ||
| 13 | + | ||
| 9 | # 2.3.1 | 14 | # 2.3.1 |
| 10 | - add textStyle Example. | 15 | - add textStyle Example. |
| 11 | 16 |
| @@ -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: ^2.3.0 | 27 | + flutter_screenutil: ^3.0.0 |
| 28 | ``` | 28 | ``` |
| 29 | 29 | ||
| 30 | ### Add the following imports to your Dart code: | 30 | ### Add the following imports to your Dart code: |
| @@ -36,26 +36,25 @@ import 'package:flutter_screenutil/flutter_screenutil.dart'; | @@ -36,26 +36,25 @@ import 'package:flutter_screenutil/flutter_screenutil.dart'; | ||
| 36 | 36 | ||
| 37 | |Property|Type|Default Value|Description| | 37 | |Property|Type|Default Value|Description| |
| 38 | |:---|:---|:---|:---| | 38 | |:---|:---|:---|:---| |
| 39 | -|width|double|1080px|The width of the device in the design draft, in px| | ||
| 40 | -|height|double|1920px|The height of the device in the design draft, in px| | 39 | +|designSize|Size|Size(1080, 1920)|The size of the device in the design draft, in px| |
| 41 | |allowFontScaling|bool|false|Sets whether the font size is scaled according to the system's "font size" assist option| | 40 | |allowFontScaling|bool|false|Sets whether the font size is scaled according to the system's "font size" assist option| |
| 42 | 41 | ||
| 43 | ### Initialize and set the fit size and font size to scale according to the system's "font size" accessibility option | 42 | ### Initialize and set the fit size and font size to scale according to the system's "font size" accessibility option |
| 44 | -Please set the width and height of the design draft before use, the width and height of the design draft (unit px). | ||
| 45 | -Be sure to set the page in the MaterialApp's home/initialRoute(ie the entry file, just set it once) to ensure that the fit size is set before each use: | 43 | +Please set the size of the design draft before use, the width and height of the design draft (unit px). |
| 44 | + | ||
| 46 | 45 | ||
| 47 | ```dart | 46 | ```dart |
| 48 | 47 | ||
| 49 | //fill in the screen size of the device in the design | 48 | //fill in the screen size of the device in the design |
| 50 | 49 | ||
| 51 | //default value : width : 1080px , height:1920px , allowFontScaling:false | 50 | //default value : width : 1080px , height:1920px , allowFontScaling:false |
| 52 | -ScreenUtil.init(context); | 51 | +ScreenUtil.init(); |
| 53 | 52 | ||
| 54 | //If the design is based on the size of the iPhone6 (iPhone6 750*1334) | 53 | //If the design is based on the size of the iPhone6 (iPhone6 750*1334) |
| 55 | -ScreenUtil.init(context, width: 750, height: 1334); | 54 | +ScreenUtil.init(designSize: Size(750, 1334)); |
| 56 | 55 | ||
| 57 | //If you want to set the font size is scaled according to the system's "font size" assist option | 56 | //If you want to set the font size is scaled according to the system's "font size" assist option |
| 58 | -ScreenUtil.init(context, width: 750, height: 1334, allowFontScaling: true); | 57 | +ScreenUtil.init(designSize: Size(750, 1334), allowFontScaling: true); |
| 59 | 58 | ||
| 60 | ``` | 59 | ``` |
| 61 | 60 | ||
| @@ -72,12 +71,12 @@ ScreenUtil.init(context, width: 750, height: 1334, allowFontScaling: true); | @@ -72,12 +71,12 @@ ScreenUtil.init(context, width: 750, height: 1334, allowFontScaling: true); | ||
| 72 | ScreenUtil().setSp(24, allowFontScalingSelf: true) (sdk>=2.6 : 24.ssp) //Adapter font(fonts will scale to respect Text Size accessibility settings) | 71 | ScreenUtil().setSp(24, allowFontScalingSelf: true) (sdk>=2.6 : 24.ssp) //Adapter font(fonts will scale to respect Text Size accessibility settings) |
| 73 | ScreenUtil().setSp(24, allowFontScalingSelf: false) (sdk>=2.6 : 24.nsp) //Adapter font(fonts will not scale to respect Text Size accessibility settings) | 72 | ScreenUtil().setSp(24, allowFontScalingSelf: false) (sdk>=2.6 : 24.nsp) //Adapter font(fonts will not scale to respect Text Size accessibility settings) |
| 74 | 73 | ||
| 75 | - ScreenUtil.pixelRatio //Device pixel density | ||
| 76 | - ScreenUtil.screenWidth (sdk>=2.6 : 1.wp) //Device width | ||
| 77 | - ScreenUtil.screenHeight (sdk>=2.6 : 1.hp) //Device height | ||
| 78 | - ScreenUtil.bottomBarHeight //Bottom safe zone distance, suitable for buttons with full screen | ||
| 79 | - ScreenUtil.statusBarHeight //Status bar height , Notch will be higher Unit px | ||
| 80 | - ScreenUtil.textScaleFactor //System font scaling factor | 74 | + ScreenUtil().pixelRatio //Device pixel density |
| 75 | + ScreenUtil().screenWidth (sdk>=2.6 : 1.wp) //Device width | ||
| 76 | + ScreenUtil().screenHeight (sdk>=2.6 : 1.hp) //Device height | ||
| 77 | + ScreenUtil().bottomBarHeight //Bottom safe zone distance, suitable for buttons with full screen | ||
| 78 | + ScreenUtil().statusBarHeight //Status bar height , Notch will be higher Unit px | ||
| 79 | + ScreenUtil().textScaleFactor //System font scaling factor | ||
| 81 | 80 | ||
| 82 | ScreenUtil().scaleWidth //Ratio of actual width dp to design draft px | 81 | ScreenUtil().scaleWidth //Ratio of actual width dp to design draft px |
| 83 | ScreenUtil().scaleHeight //Ratio of actual height dp to design draft px | 82 | ScreenUtil().scaleHeight //Ratio of actual height dp to design draft px |
| @@ -166,167 +165,11 @@ Column( | @@ -166,167 +165,11 @@ Column( | ||
| 166 | ) | 165 | ) |
| 167 | ``` | 166 | ``` |
| 168 | 167 | ||
| 169 | -```dart | ||
| 170 | -//import | ||
| 171 | -import 'package:flutter/material.dart'; | ||
| 172 | -import 'package:flutter_screenutil/flutter_screenutil.dart'; | ||
| 173 | - | ||
| 174 | -void main() => runApp(MyApp()); | ||
| 175 | - | ||
| 176 | -class MyApp extends StatelessWidget { | ||
| 177 | - @override | ||
| 178 | - Widget build(BuildContext context) { | ||
| 179 | - return MaterialApp( | ||
| 180 | - debugShowCheckedModeBanner: false, | ||
| 181 | - title: 'Flutter_ScreenUtil', | ||
| 182 | - theme: ThemeData( | ||
| 183 | - primarySwatch: Colors.blue, | ||
| 184 | - ), | ||
| 185 | - home: MyHomePage(), | ||
| 186 | - ); | ||
| 187 | - } | ||
| 188 | -} | ||
| 189 | - | ||
| 190 | -class MyHomePage extends StatefulWidget { | ||
| 191 | - @override | ||
| 192 | - _MyHomePageState createState() => _MyHomePageState(); | ||
| 193 | -} | ||
| 194 | - | ||
| 195 | -class _MyHomePageState extends State<MyHomePage> { | ||
| 196 | - @override | ||
| 197 | - Widget build(BuildContext context) { | ||
| 198 | - //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) | ||
| 199 | - ScreenUtil.init(width: 750, height: 1334, allowFontScaling: false); | ||
| 200 | - | ||
| 201 | - return ExampleWidget(title: 'FlutterScreenUtil Demo'); | ||
| 202 | - } | ||
| 203 | -} | ||
| 204 | - | ||
| 205 | -class ExampleWidget extends StatefulWidget { | ||
| 206 | - const ExampleWidget({Key key, this.title}) : super(key: key); | ||
| 207 | - | ||
| 208 | - final String title; | ||
| 209 | - | ||
| 210 | - @override | ||
| 211 | - _ExampleWidgetState createState() => _ExampleWidgetState(); | ||
| 212 | -} | ||
| 213 | - | ||
| 214 | -class _ExampleWidgetState extends State<ExampleWidget> { | ||
| 215 | - @override | ||
| 216 | - Widget build(BuildContext context) { | ||
| 217 | - printScreenInformation(); | ||
| 218 | - return Scaffold( | ||
| 219 | - appBar: AppBar( | ||
| 220 | - title: Text(widget.title), | ||
| 221 | - ), | ||
| 222 | - body: SingleChildScrollView( | ||
| 223 | - child: Column( | ||
| 224 | - crossAxisAlignment: CrossAxisAlignment.center, | ||
| 225 | - children: <Widget>[ | ||
| 226 | - Row( | ||
| 227 | - children: <Widget>[ | ||
| 228 | - Container( | ||
| 229 | - padding: EdgeInsets.all(ScreenUtil().setWidth(10)), | ||
| 230 | - width: ScreenUtil().setWidth(375), | ||
| 231 | - height: ScreenUtil().setHeight(200), | ||
| 232 | - color: Colors.red, | ||
| 233 | - child: Text( | ||
| 234 | - 'My width:${ScreenUtil().setWidth(375)}dp \n' | ||
| 235 | - 'My height:${ScreenUtil().setHeight(200)}dp', | ||
| 236 | - style: TextStyle( | ||
| 237 | - color: Colors.white, fontSize: ScreenUtil().setSp(24)), | ||
| 238 | - ), | ||
| 239 | - ), | ||
| 240 | - Container( | ||
| 241 | - padding: EdgeInsets.all(ScreenUtil().setWidth(10)), | ||
| 242 | - width: ScreenUtil().setWidth(375), | ||
| 243 | - height: ScreenUtil().setHeight(200), | ||
| 244 | - color: Colors.blue, | ||
| 245 | - child: Text( | ||
| 246 | - 'My width:${ScreenUtil().setWidth(375)}dp \n' | ||
| 247 | - 'My height:${ScreenUtil().setHeight(200)}dp', | ||
| 248 | - style: TextStyle( | ||
| 249 | - color: Colors.white, | ||
| 250 | - fontSize: ScreenUtil().setSp(24))), | ||
| 251 | - ), | ||
| 252 | - ], | ||
| 253 | - ), | ||
| 254 | - Text('Device width:${ScreenUtil.screenWidth}dp'), | ||
| 255 | - Text('Device height:${ScreenUtil.screenHeight}dp'), | ||
| 256 | - Text('Device width:${ScreenUtil.screenWidthPx}px'), | ||
| 257 | - Text('Device height:${ScreenUtil.screenHeightPx}px'), | ||
| 258 | - Text('Device pixel density:${ScreenUtil.pixelRatio}'), | ||
| 259 | - Text('Bottom safe zone distance:${ScreenUtil.bottomBarHeight}dp'), | ||
| 260 | - Text('Status bar height:${ScreenUtil.statusBarHeight}dp'), | ||
| 261 | - Text( | ||
| 262 | - 'Ratio of actual width dp to design draft px:${ScreenUtil().scaleWidth}', | ||
| 263 | - textAlign: TextAlign.center, | ||
| 264 | - ), | ||
| 265 | - Text( | ||
| 266 | - 'Ratio of actual height dp to design draft px:${ScreenUtil().scaleHeight}', | ||
| 267 | - textAlign: TextAlign.center, | ||
| 268 | - ), | ||
| 269 | - SizedBox( | ||
| 270 | - height: ScreenUtil().setHeight(100), | ||
| 271 | - ), | ||
| 272 | - Text('System font scaling factor:${ScreenUtil.textScaleFactor}'), | ||
| 273 | - Column( | ||
| 274 | - crossAxisAlignment: CrossAxisAlignment.start, | ||
| 275 | - children: <Widget>[ | ||
| 276 | - Text( | ||
| 277 | - 'My font size is 24px on the design draft and will not change with the system.', | ||
| 278 | - style: TextStyle( | ||
| 279 | - color: Colors.black, | ||
| 280 | - fontSize: ScreenUtil().setSp(24), | ||
| 281 | - )), | ||
| 282 | - Text( | ||
| 283 | - 'My font size is 24px on the design draft and will change with the system.', | ||
| 284 | - style: TextStyle( | ||
| 285 | - color: Colors.black, | ||
| 286 | - fontSize: ScreenUtil() | ||
| 287 | - .setSp(24, allowFontScalingSelf: true))), | ||
| 288 | - ], | ||
| 289 | - ) | ||
| 290 | - ], | ||
| 291 | - ), | ||
| 292 | - ), | ||
| 293 | - floatingActionButton: FloatingActionButton( | ||
| 294 | - child: Icon(Icons.title), | ||
| 295 | - onPressed: () { | ||
| 296 | - ScreenUtil.init(width: 1500, height: 1334, allowFontScaling: false); | ||
| 297 | - setState(() {}); | ||
| 298 | - }, | ||
| 299 | - ), | ||
| 300 | - ); | ||
| 301 | - } | ||
| 302 | - | ||
| 303 | - void printScreenInformation() { | ||
| 304 | - print('Device width dp:${ScreenUtil.screenWidth}'); //Device width | ||
| 305 | - print('Device height dp:${ScreenUtil.screenHeight}'); //Device height | ||
| 306 | - print( | ||
| 307 | - 'Device pixel density:${ScreenUtil.pixelRatio}'); //Device pixel density | ||
| 308 | - print( | ||
| 309 | - 'Bottom safe zone distance dp:${ScreenUtil.bottomBarHeight}'); //Bottom safe zone distance,suitable for buttons with full screen | ||
| 310 | - print( | ||
| 311 | - 'Status bar height dp:${ScreenUtil.statusBarHeight}dp'); //Status bar height , Notch will be higher Unit dp | ||
| 312 | - print( | ||
| 313 | - 'Ratio of actual width dp to design draft px:${ScreenUtil().scaleWidth}'); | ||
| 314 | - print( | ||
| 315 | - 'Ratio of actual height dp to design draft px:${ScreenUtil().scaleHeight}'); | ||
| 316 | - print( | ||
| 317 | - 'The ratio of font and width to the size of the design:${ScreenUtil().scaleWidth * ScreenUtil.pixelRatio}'); | ||
| 318 | - print( | ||
| 319 | - 'The ratio of height width to the size of the design:${ScreenUtil().scaleHeight * ScreenUtil.pixelRatio}'); | ||
| 320 | - } | ||
| 321 | -} | ||
| 322 | - | ||
| 323 | -``` | ||
| 324 | - | ||
| 325 | -### example: | 168 | +### Example: |
| 326 | 169 | ||
| 327 | [example demo](/example/lib/main.dart) | 170 | [example demo](/example/lib/main.dart) |
| 328 | 171 | ||
| 329 | -effect: | 172 | +### Effect: |
| 330 | 173 | ||
| 331 |  | 174 |  |
| 332 |  | 175 |  |
| 1 | -# example | ||
| 2 | - | ||
| 3 | -flutter_screenutil example | 1 | +# Example |
| 4 | 2 | ||
| 5 |  | 3 |  |
| 6 |  | 4 |  |
| 7 | 5 | ||
| 8 |  | 6 |  |
| 9 |  | 7 |  |
| 10 | -## Getting Started | 8 | + |
| 9 | +```dart | ||
| 10 | +void main() { | ||
| 11 | + WidgetsFlutterBinding.ensureInitialized(); | ||
| 12 | + //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) | ||
| 13 | + ScreenUtil.init(designSize: Size(750, 1334), allowFontScaling: false); | ||
| 14 | + runApp(MyApp()); | ||
| 15 | +} | ||
| 16 | + | ||
| 17 | +class MyApp extends StatelessWidget { | ||
| 18 | + @override | ||
| 19 | + Widget build(BuildContext context) { | ||
| 20 | + return MaterialApp( | ||
| 21 | + debugShowCheckedModeBanner: false, | ||
| 22 | + title: 'Flutter_ScreenUtil', | ||
| 23 | + theme: ThemeData( | ||
| 24 | + primarySwatch: Colors.blue, | ||
| 25 | + ), | ||
| 26 | + home: ExampleWidget(title: 'FlutterScreenUtil Demo'), | ||
| 27 | + ); | ||
| 28 | + } | ||
| 29 | +} | ||
| 30 | + | ||
| 31 | +class ExampleWidget extends StatefulWidget { | ||
| 32 | + const ExampleWidget({Key key, this.title}) : super(key: key); | ||
| 33 | + | ||
| 34 | + final String title; | ||
| 35 | + | ||
| 36 | + @override | ||
| 37 | + _ExampleWidgetState createState() => _ExampleWidgetState(); | ||
| 38 | +} | ||
| 39 | + | ||
| 40 | +class _ExampleWidgetState extends State<ExampleWidget> { | ||
| 41 | + @override | ||
| 42 | + Widget build(BuildContext context) { | ||
| 43 | + printScreenInformation(); | ||
| 44 | + return Scaffold( | ||
| 45 | + appBar: AppBar( | ||
| 46 | + title: Text(widget.title), | ||
| 47 | + ), | ||
| 48 | + body: SingleChildScrollView( | ||
| 49 | + child: Column( | ||
| 50 | + crossAxisAlignment: CrossAxisAlignment.center, | ||
| 51 | + children: <Widget>[ | ||
| 52 | + Row( | ||
| 53 | + children: <Widget>[ | ||
| 54 | + // Using Extensions | ||
| 55 | + Container( | ||
| 56 | + padding: EdgeInsets.all(10.w), | ||
| 57 | + width: 0.5.wp, | ||
| 58 | + height: 200.h, | ||
| 59 | + color: Colors.red, | ||
| 60 | + child: Text( | ||
| 61 | + 'My width:${0.5.wp}dp \n' | ||
| 62 | + 'My height:${200.h}dp', | ||
| 63 | + style: TextStyle( | ||
| 64 | + color: Colors.white, | ||
| 65 | + fontSize: 24.sp, | ||
| 66 | + ), | ||
| 67 | + ), | ||
| 68 | + ), | ||
| 69 | + // Without using Extensions | ||
| 70 | + Container( | ||
| 71 | + padding: EdgeInsets.all(ScreenUtil().setWidth(10)), | ||
| 72 | + width: ScreenUtil().screenWidth * 0.5, | ||
| 73 | + height: ScreenUtil().setHeight(200), | ||
| 74 | + color: Colors.blue, | ||
| 75 | + child: Text( | ||
| 76 | + 'My width:${ScreenUtil().screenWidth * 0.5}dp \n' | ||
| 77 | + 'My height:${ScreenUtil().setHeight(200)}dp', | ||
| 78 | + style: TextStyle( | ||
| 79 | + color: Colors.white, | ||
| 80 | + fontSize: ScreenUtil().setSp(24), | ||
| 81 | + ), | ||
| 82 | + ), | ||
| 83 | + ), | ||
| 84 | + ], | ||
| 85 | + ), | ||
| 86 | + Text('Device width:${ScreenUtil().screenWidthPx}px'), | ||
| 87 | + Text('Device height:${ScreenUtil().screenHeightPx}px'), | ||
| 88 | + Text('Device width:${ScreenUtil().screenWidth}dp'), | ||
| 89 | + Text('Device height:${ScreenUtil().screenHeight}dp'), | ||
| 90 | + Text('Device pixel density:${ScreenUtil().pixelRatio}'), | ||
| 91 | + Text('Bottom safe zone distance:${ScreenUtil().bottomBarHeight}dp'), | ||
| 92 | + Text('Status bar height:${ScreenUtil().statusBarHeight}dp'), | ||
| 93 | + Text( | ||
| 94 | + 'Ratio of actual width dp to design draft px:${ScreenUtil().scaleWidth}', | ||
| 95 | + textAlign: TextAlign.center, | ||
| 96 | + ), | ||
| 97 | + Text( | ||
| 98 | + 'Ratio of actual height dp to design draft px:${ScreenUtil().scaleHeight}', | ||
| 99 | + textAlign: TextAlign.center, | ||
| 100 | + ), | ||
| 101 | + SizedBox( | ||
| 102 | + height: ScreenUtil().setHeight(100), | ||
| 103 | + ), | ||
| 104 | + Text('System font scaling factor:${ScreenUtil().textScaleFactor}'), | ||
| 105 | + Column( | ||
| 106 | + crossAxisAlignment: CrossAxisAlignment.start, | ||
| 107 | + children: <Widget>[ | ||
| 108 | + Text( | ||
| 109 | + 'My font size is 24px on the design draft and will not change with the system.', | ||
| 110 | + style: TextStyle( | ||
| 111 | + color: Colors.black, | ||
| 112 | + fontSize: 24.sp, | ||
| 113 | + ), | ||
| 114 | + ), | ||
| 115 | + Text( | ||
| 116 | + 'My font size is 24px on the design draft and will change with the system.', | ||
| 117 | + style: ts.t1, | ||
| 118 | + ), | ||
| 119 | + ], | ||
| 120 | + ) | ||
| 121 | + ], | ||
| 122 | + ), | ||
| 123 | + ), | ||
| 124 | + floatingActionButton: FloatingActionButton( | ||
| 125 | + child: Icon(Icons.title), | ||
| 126 | + onPressed: () { | ||
| 127 | + ScreenUtil.init( | ||
| 128 | + designSize: Size(1500, 1334), | ||
| 129 | + allowFontScaling: false, | ||
| 130 | + ); | ||
| 131 | + setState(() {}); | ||
| 132 | + }, | ||
| 133 | + ), | ||
| 134 | + ); | ||
| 135 | + } | ||
| 136 | + | ||
| 137 | + void printScreenInformation() { | ||
| 138 | + print('Device width dp:${ScreenUtil().screenWidth}'); //Device width | ||
| 139 | + print('Device height dp:${ScreenUtil().screenHeight}'); //Device height | ||
| 140 | + print( | ||
| 141 | + 'Device pixel density:${ScreenUtil().pixelRatio}'); //Device pixel density | ||
| 142 | + print( | ||
| 143 | + 'Bottom safe zone distance dp:${ScreenUtil().bottomBarHeight}'); //Bottom safe zone distance,suitable for buttons with full screen | ||
| 144 | + print( | ||
| 145 | + 'Status bar height px:${ScreenUtil().statusBarHeight}dp'); //Status bar height , Notch will be higher Unit px | ||
| 146 | + print( | ||
| 147 | + 'Ratio of actual width dp to design draft px:${ScreenUtil().scaleWidth}'); | ||
| 148 | + print( | ||
| 149 | + 'Ratio of actual height dp to design draft px:${ScreenUtil().scaleHeight}'); | ||
| 150 | + print( | ||
| 151 | + 'The ratio of font and width to the size of the design:${ScreenUtil().scaleWidth * ScreenUtil().pixelRatio}'); | ||
| 152 | + print( | ||
| 153 | + 'The ratio of height width to the size of the design:${ScreenUtil().scaleHeight * ScreenUtil().pixelRatio}'); | ||
| 154 | + print('System font scaling:${ScreenUtil().textScaleFactor}'); | ||
| 155 | + print('0.5 times the screen width:${0.5.wp}'); | ||
| 156 | + print('0.5 times the screen height:${0.5.hp}'); | ||
| 157 | + } | ||
| 158 | +} | ||
| 159 | +``` | ||
| 11 | 160 |
| 1 | import 'dart:ui'; | 1 | import 'dart:ui'; |
| 2 | 2 | ||
| 3 | -import 'package:example/text_style.dart'; | ||
| 4 | import 'package:flutter/material.dart'; | 3 | import 'package:flutter/material.dart'; |
| 5 | import 'package:flutter_screenutil/flutter_screenutil.dart'; | 4 | import 'package:flutter_screenutil/flutter_screenutil.dart'; |
| 6 | 5 | ||
| 7 | -void main() => runApp(MyApp()); | 6 | +import 'text_style.dart'; |
| 7 | + | ||
| 8 | +void main() { | ||
| 9 | + WidgetsFlutterBinding.ensureInitialized(); | ||
| 10 | + //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) | ||
| 11 | + ScreenUtil.init(designSize: Size(750, 1334), allowFontScaling: false); | ||
| 12 | + runApp(MyApp()); | ||
| 13 | +} | ||
| 8 | 14 | ||
| 9 | class MyApp extends StatelessWidget { | 15 | class MyApp extends StatelessWidget { |
| 10 | @override | 16 | @override |
| @@ -15,20 +21,11 @@ class MyApp extends StatelessWidget { | @@ -15,20 +21,11 @@ class MyApp extends StatelessWidget { | ||
| 15 | theme: ThemeData( | 21 | theme: ThemeData( |
| 16 | primarySwatch: Colors.blue, | 22 | primarySwatch: Colors.blue, |
| 17 | ), | 23 | ), |
| 18 | - home: MyHomePage(), | 24 | + home: ExampleWidget(title: 'FlutterScreenUtil Demo'), |
| 19 | ); | 25 | ); |
| 20 | } | 26 | } |
| 21 | } | 27 | } |
| 22 | 28 | ||
| 23 | -class MyHomePage extends StatelessWidget { | ||
| 24 | - @override | ||
| 25 | - Widget build(BuildContext context) { | ||
| 26 | - //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) | ||
| 27 | - ScreenUtil.init(context, width: 750, height: 1334, allowFontScaling: false); | ||
| 28 | - return ExampleWidget(title: 'FlutterScreenUtil Demo'); | ||
| 29 | - } | ||
| 30 | -} | ||
| 31 | - | ||
| 32 | class ExampleWidget extends StatefulWidget { | 29 | class ExampleWidget extends StatefulWidget { |
| 33 | const ExampleWidget({Key key, this.title}) : super(key: key); | 30 | const ExampleWidget({Key key, this.title}) : super(key: key); |
| 34 | 31 | ||
| @@ -52,39 +49,45 @@ class _ExampleWidgetState extends State<ExampleWidget> { | @@ -52,39 +49,45 @@ class _ExampleWidgetState extends State<ExampleWidget> { | ||
| 52 | children: <Widget>[ | 49 | children: <Widget>[ |
| 53 | Row( | 50 | Row( |
| 54 | children: <Widget>[ | 51 | children: <Widget>[ |
| 52 | + // Using Extensions | ||
| 55 | Container( | 53 | Container( |
| 56 | - padding: EdgeInsets.all(ScreenUtil().setWidth(10)), | ||
| 57 | - width: 375.w, | 54 | + padding: EdgeInsets.all(10.w), |
| 55 | + width: 0.5.wp, | ||
| 58 | height: 200.h, | 56 | height: 200.h, |
| 59 | color: Colors.red, | 57 | color: Colors.red, |
| 60 | child: Text( | 58 | child: Text( |
| 61 | - 'My width:${375.w}dp \n' | 59 | + 'My width:${0.5.wp}dp \n' |
| 62 | 'My height:${200.h}dp', | 60 | 'My height:${200.h}dp', |
| 63 | style: TextStyle( | 61 | style: TextStyle( |
| 64 | - color: Colors.white, fontSize: ScreenUtil().setSp(24)), | 62 | + color: Colors.white, |
| 63 | + fontSize: 24.sp, | ||
| 64 | + ), | ||
| 65 | ), | 65 | ), |
| 66 | ), | 66 | ), |
| 67 | + // Without using Extensions | ||
| 67 | Container( | 68 | Container( |
| 68 | padding: EdgeInsets.all(ScreenUtil().setWidth(10)), | 69 | padding: EdgeInsets.all(ScreenUtil().setWidth(10)), |
| 69 | - width: ScreenUtil().setWidth(375), | 70 | + width: ScreenUtil().screenWidth * 0.5, |
| 70 | height: ScreenUtil().setHeight(200), | 71 | height: ScreenUtil().setHeight(200), |
| 71 | color: Colors.blue, | 72 | color: Colors.blue, |
| 72 | child: Text( | 73 | child: Text( |
| 73 | - 'My width:${0.5.wp}dp \n' | ||
| 74 | - 'My height:${ScreenUtil().setHeight(200)}dp', | ||
| 75 | - style: TextStyle( | ||
| 76 | - color: Colors.white, | ||
| 77 | - fontSize: ScreenUtil().setSp(24))), | 74 | + 'My width:${ScreenUtil().screenWidth * 0.5}dp \n' |
| 75 | + 'My height:${ScreenUtil().setHeight(200)}dp', | ||
| 76 | + style: TextStyle( | ||
| 77 | + color: Colors.white, | ||
| 78 | + fontSize: ScreenUtil().setSp(24), | ||
| 79 | + ), | ||
| 80 | + ), | ||
| 78 | ), | 81 | ), |
| 79 | ], | 82 | ], |
| 80 | ), | 83 | ), |
| 81 | - Text('Device width:${ScreenUtil.screenWidthPx}px'), | ||
| 82 | - Text('Device height:${ScreenUtil.screenHeightPx}px'), | ||
| 83 | - Text('Device width:${ScreenUtil.screenWidth}dp'), | ||
| 84 | - Text('Device height:${ScreenUtil.screenHeight}dp'), | ||
| 85 | - Text('Device pixel density:${ScreenUtil.pixelRatio}'), | ||
| 86 | - Text('Bottom safe zone distance:${ScreenUtil.bottomBarHeight}dp'), | ||
| 87 | - Text('Status bar height:${ScreenUtil.statusBarHeight}dp'), | 84 | + Text('Device width:${ScreenUtil().screenWidthPx}px'), |
| 85 | + Text('Device height:${ScreenUtil().screenHeightPx}px'), | ||
| 86 | + Text('Device width:${ScreenUtil().screenWidth}dp'), | ||
| 87 | + Text('Device height:${ScreenUtil().screenHeight}dp'), | ||
| 88 | + Text('Device pixel density:${ScreenUtil().pixelRatio}'), | ||
| 89 | + Text('Bottom safe zone distance:${ScreenUtil().bottomBarHeight}dp'), | ||
| 90 | + Text('Status bar height:${ScreenUtil().statusBarHeight}dp'), | ||
| 88 | Text( | 91 | Text( |
| 89 | 'Ratio of actual width dp to design draft px:${ScreenUtil().scaleWidth}', | 92 | 'Ratio of actual width dp to design draft px:${ScreenUtil().scaleWidth}', |
| 90 | textAlign: TextAlign.center, | 93 | textAlign: TextAlign.center, |
| @@ -96,19 +99,21 @@ class _ExampleWidgetState extends State<ExampleWidget> { | @@ -96,19 +99,21 @@ class _ExampleWidgetState extends State<ExampleWidget> { | ||
| 96 | SizedBox( | 99 | SizedBox( |
| 97 | height: ScreenUtil().setHeight(100), | 100 | height: ScreenUtil().setHeight(100), |
| 98 | ), | 101 | ), |
| 99 | - Text('System font scaling factor:${ScreenUtil.textScaleFactor}'), | 102 | + Text('System font scaling factor:${ScreenUtil().textScaleFactor}'), |
| 100 | Column( | 103 | Column( |
| 101 | crossAxisAlignment: CrossAxisAlignment.start, | 104 | crossAxisAlignment: CrossAxisAlignment.start, |
| 102 | children: <Widget>[ | 105 | children: <Widget>[ |
| 103 | Text( | 106 | Text( |
| 104 | - 'My font size is 24px on the design draft and will not change with the system.', | ||
| 105 | - style: TextStyle( | ||
| 106 | - color: Colors.black, | ||
| 107 | - fontSize: 24.sp, | ||
| 108 | - )), | 107 | + 'My font size is 24px on the design draft and will not change with the system.', |
| 108 | + style: TextStyle( | ||
| 109 | + color: Colors.black, | ||
| 110 | + fontSize: 24.sp, | ||
| 111 | + ), | ||
| 112 | + ), | ||
| 109 | Text( | 113 | Text( |
| 110 | - 'My font size is 24px on the design draft and will change with the system.', | ||
| 111 | - style: ts.t1), | 114 | + 'My font size is 24px on the design draft and will change with the system.', |
| 115 | + style: ts.t1, | ||
| 116 | + ), | ||
| 112 | ], | 117 | ], |
| 113 | ) | 118 | ) |
| 114 | ], | 119 | ], |
| @@ -117,8 +122,10 @@ class _ExampleWidgetState extends State<ExampleWidget> { | @@ -117,8 +122,10 @@ class _ExampleWidgetState extends State<ExampleWidget> { | ||
| 117 | floatingActionButton: FloatingActionButton( | 122 | floatingActionButton: FloatingActionButton( |
| 118 | child: Icon(Icons.title), | 123 | child: Icon(Icons.title), |
| 119 | onPressed: () { | 124 | onPressed: () { |
| 120 | - ScreenUtil.init(context, | ||
| 121 | - width: 1500, height: 1334, allowFontScaling: false); | 125 | + ScreenUtil.init( |
| 126 | + designSize: Size(1500, 1334), | ||
| 127 | + allowFontScaling: false, | ||
| 128 | + ); | ||
| 122 | setState(() {}); | 129 | setState(() {}); |
| 123 | }, | 130 | }, |
| 124 | ), | 131 | ), |
| @@ -126,23 +133,23 @@ class _ExampleWidgetState extends State<ExampleWidget> { | @@ -126,23 +133,23 @@ class _ExampleWidgetState extends State<ExampleWidget> { | ||
| 126 | } | 133 | } |
| 127 | 134 | ||
| 128 | void printScreenInformation() { | 135 | void printScreenInformation() { |
| 129 | - print('Device width dp:${ScreenUtil.screenWidth}'); //Device width | ||
| 130 | - print('Device height dp:${ScreenUtil.screenHeight}'); //Device height | 136 | + print('Device width dp:${ScreenUtil().screenWidth}'); //Device width |
| 137 | + print('Device height dp:${ScreenUtil().screenHeight}'); //Device height | ||
| 131 | print( | 138 | print( |
| 132 | - 'Device pixel density:${ScreenUtil.pixelRatio}'); //Device pixel density | 139 | + 'Device pixel density:${ScreenUtil().pixelRatio}'); //Device pixel density |
| 133 | print( | 140 | print( |
| 134 | - 'Bottom safe zone distance dp:${ScreenUtil.bottomBarHeight}'); //Bottom safe zone distance,suitable for buttons with full screen | 141 | + 'Bottom safe zone distance dp:${ScreenUtil().bottomBarHeight}'); //Bottom safe zone distance,suitable for buttons with full screen |
| 135 | print( | 142 | print( |
| 136 | - 'Status bar height px:${ScreenUtil.statusBarHeight}dp'); //Status bar height , Notch will be higher Unit px | 143 | + 'Status bar height px:${ScreenUtil().statusBarHeight}dp'); //Status bar height , Notch will be higher Unit px |
| 137 | print( | 144 | print( |
| 138 | 'Ratio of actual width dp to design draft px:${ScreenUtil().scaleWidth}'); | 145 | 'Ratio of actual width dp to design draft px:${ScreenUtil().scaleWidth}'); |
| 139 | print( | 146 | print( |
| 140 | 'Ratio of actual height dp to design draft px:${ScreenUtil().scaleHeight}'); | 147 | 'Ratio of actual height dp to design draft px:${ScreenUtil().scaleHeight}'); |
| 141 | print( | 148 | print( |
| 142 | - 'The ratio of font and width to the size of the design:${ScreenUtil().scaleWidth * ScreenUtil.pixelRatio}'); | 149 | + 'The ratio of font and width to the size of the design:${ScreenUtil().scaleWidth * ScreenUtil().pixelRatio}'); |
| 143 | print( | 150 | print( |
| 144 | - 'The ratio of height width to the size of the design:${ScreenUtil().scaleHeight * ScreenUtil.pixelRatio}'); | ||
| 145 | - print('System font scaling:${ScreenUtil.textScaleFactor}'); | 151 | + 'The ratio of height width to the size of the design:${ScreenUtil().scaleHeight * ScreenUtil().pixelRatio}'); |
| 152 | + print('System font scaling:${ScreenUtil().textScaleFactor}'); | ||
| 146 | print('0.5 times the screen width:${0.5.wp}'); | 153 | print('0.5 times the screen width:${0.5.wp}'); |
| 147 | print('0.5 times the screen height:${0.5.hp}'); | 154 | print('0.5 times the screen height:${0.5.hp}'); |
| 148 | } | 155 | } |
| 1 | -import 'package:example/text_style.dart'; | ||
| 2 | import 'package:flutter/material.dart'; | 1 | import 'package:flutter/material.dart'; |
| 3 | import 'package:flutter_screenutil/flutter_screenutil.dart'; | 2 | import 'package:flutter_screenutil/flutter_screenutil.dart'; |
| 4 | 3 | ||
| 5 | -void main() => runApp(MyApp()); | 4 | +import 'text_style.dart'; |
| 5 | + | ||
| 6 | +void main() { | ||
| 7 | + WidgetsFlutterBinding.ensureInitialized(); | ||
| 8 | + //设置适配尺寸 (填入设计稿中设备的屏幕尺寸) 此处假如设计稿是按iPhone6的尺寸设计的(iPhone6 750*1334) | ||
| 9 | + ScreenUtil.init(designSize: Size(750, 1334), allowFontScaling: false); | ||
| 10 | + runApp(MyApp()); | ||
| 11 | +} | ||
| 6 | 12 | ||
| 7 | class MyApp extends StatelessWidget { | 13 | class MyApp extends StatelessWidget { |
| 8 | @override | 14 | @override |
| @@ -13,31 +19,11 @@ class MyApp extends StatelessWidget { | @@ -13,31 +19,11 @@ class MyApp extends StatelessWidget { | ||
| 13 | theme: ThemeData( | 19 | theme: ThemeData( |
| 14 | primarySwatch: Colors.blue, | 20 | primarySwatch: Colors.blue, |
| 15 | ), | 21 | ), |
| 16 | - home: MyHomePage(), | 22 | + home: ExampleWidget(title: 'FlutterScreenUtil示例'), |
| 17 | ); | 23 | ); |
| 18 | } | 24 | } |
| 19 | } | 25 | } |
| 20 | 26 | ||
| 21 | -class MyHomePage extends StatefulWidget { | ||
| 22 | - MyHomePage({Key key, this.title}) : super(key: key); | ||
| 23 | - | ||
| 24 | - final String title; | ||
| 25 | - | ||
| 26 | - @override | ||
| 27 | - _MyHomePageState createState() => _MyHomePageState(); | ||
| 28 | -} | ||
| 29 | - | ||
| 30 | -class _MyHomePageState extends State<MyHomePage> { | ||
| 31 | - @override | ||
| 32 | - Widget build(BuildContext context) { | ||
| 33 | - //设置适配尺寸 (填入设计稿中设备的屏幕尺寸) 此处假如设计稿是按iPhone6的尺寸设计的(iPhone6 750*1334) | ||
| 34 | - | ||
| 35 | - ScreenUtil.init(context, width: 750, height: 1334, allowFontScaling: false); | ||
| 36 | - | ||
| 37 | - return ExampleWidget(title: 'FlutterScreenUtil示例'); | ||
| 38 | - } | ||
| 39 | -} | ||
| 40 | - | ||
| 41 | class ExampleWidget extends StatefulWidget { | 27 | class ExampleWidget extends StatefulWidget { |
| 42 | const ExampleWidget({Key key, this.title}) : super(key: key); | 28 | const ExampleWidget({Key key, this.title}) : super(key: key); |
| 43 | 29 | ||
| @@ -87,13 +73,13 @@ class _ExampleWidgetState extends State<ExampleWidget> { | @@ -87,13 +73,13 @@ class _ExampleWidgetState extends State<ExampleWidget> { | ||
| 87 | ), | 73 | ), |
| 88 | ], | 74 | ], |
| 89 | ), | 75 | ), |
| 90 | - Text('设备宽度:${ScreenUtil.screenWidthPx}px'), | ||
| 91 | - Text('设备高度:${ScreenUtil.screenHeightPx}px'), | ||
| 92 | - Text('设备宽度:${ScreenUtil.screenWidth}dp'), | ||
| 93 | - Text('设备高度:${ScreenUtil.screenHeight}dp'), | ||
| 94 | - Text('设备的像素密度:${ScreenUtil.pixelRatio}'), | ||
| 95 | - Text('底部安全区距离:${ScreenUtil.bottomBarHeight}dp'), | ||
| 96 | - Text('状态栏高度:${ScreenUtil.statusBarHeight}dp'), | 76 | + Text('设备宽度:${ScreenUtil().screenWidthPx}px'), |
| 77 | + Text('设备高度:${ScreenUtil().screenHeightPx}px'), | ||
| 78 | + Text('设备宽度:${ScreenUtil().screenWidth}dp'), | ||
| 79 | + Text('设备高度:${ScreenUtil().screenHeight}dp'), | ||
| 80 | + Text('设备的像素密度:${ScreenUtil().pixelRatio}'), | ||
| 81 | + Text('底部安全区距离:${ScreenUtil().bottomBarHeight}dp'), | ||
| 82 | + Text('状态栏高度:${ScreenUtil().statusBarHeight}dp'), | ||
| 97 | Text( | 83 | Text( |
| 98 | '实际宽度的dp与设计稿px的比例:${ScreenUtil().scaleWidth}', | 84 | '实际宽度的dp与设计稿px的比例:${ScreenUtil().scaleWidth}', |
| 99 | textAlign: TextAlign.center, | 85 | textAlign: TextAlign.center, |
| @@ -105,7 +91,7 @@ class _ExampleWidgetState extends State<ExampleWidget> { | @@ -105,7 +91,7 @@ class _ExampleWidgetState extends State<ExampleWidget> { | ||
| 105 | SizedBox( | 91 | SizedBox( |
| 106 | height: 100.h, | 92 | height: 100.h, |
| 107 | ), | 93 | ), |
| 108 | - Text('系统的字体缩放比例:${ScreenUtil.textScaleFactor}'), | 94 | + Text('系统的字体缩放比例:${ScreenUtil().textScaleFactor}'), |
| 109 | Column( | 95 | Column( |
| 110 | crossAxisAlignment: CrossAxisAlignment.start, | 96 | crossAxisAlignment: CrossAxisAlignment.start, |
| 111 | children: <Widget>[ | 97 | children: <Widget>[ |
| @@ -125,8 +111,10 @@ class _ExampleWidgetState extends State<ExampleWidget> { | @@ -125,8 +111,10 @@ class _ExampleWidgetState extends State<ExampleWidget> { | ||
| 125 | floatingActionButton: FloatingActionButton( | 111 | floatingActionButton: FloatingActionButton( |
| 126 | child: Icon(Icons.title), | 112 | child: Icon(Icons.title), |
| 127 | onPressed: () { | 113 | onPressed: () { |
| 128 | - ScreenUtil.init(context, | ||
| 129 | - width: 1500, height: 1334, allowFontScaling: false); | 114 | + ScreenUtil.init( |
| 115 | + designSize: Size(1500, 1334), | ||
| 116 | + allowFontScaling: false, | ||
| 117 | + ); | ||
| 130 | setState(() {}); | 118 | setState(() {}); |
| 131 | }, | 119 | }, |
| 132 | ), | 120 | ), |
| @@ -134,21 +122,26 @@ class _ExampleWidgetState extends State<ExampleWidget> { | @@ -134,21 +122,26 @@ class _ExampleWidgetState extends State<ExampleWidget> { | ||
| 134 | } | 122 | } |
| 135 | 123 | ||
| 136 | void printScreenInformation() { | 124 | void printScreenInformation() { |
| 137 | - print('设备宽度:${ScreenUtil.screenWidth}'); //Device width | ||
| 138 | - print('设备高度:${ScreenUtil.screenHeight}'); //Device height | ||
| 139 | - print('设备的像素密度:${ScreenUtil.pixelRatio}'); //Device pixel density | 125 | + print('设备宽度:${ScreenUtil().screenWidth}'); //Device width |
| 126 | + print('设备高度:${ScreenUtil().screenHeight}'); //Device height | ||
| 127 | + print('设备的像素密度:${ScreenUtil().pixelRatio}'); //Device pixel density | ||
| 140 | print( | 128 | print( |
| 141 | - '底部安全区距离:${ScreenUtil.bottomBarHeight}dp'); //Bottom safe zone distance,suitable for buttons with full screen | 129 | + '底部安全区距离:${ScreenUtil().bottomBarHeight}dp', |
| 130 | + ); //Bottom safe zone distance,suitable for buttons with full screen | ||
| 142 | print( | 131 | print( |
| 143 | - '状态栏高度:${ScreenUtil.statusBarHeight}dp'); //Status bar height , Notch will be higher Unit px | 132 | + '状态栏高度:${ScreenUtil().statusBarHeight}dp', |
| 133 | + ); //Status bar height , Notch will be higher Unit px | ||
| 144 | 134 | ||
| 145 | print('实际宽度的dp与设计稿px的比例:${ScreenUtil().scaleWidth}'); | 135 | print('实际宽度的dp与设计稿px的比例:${ScreenUtil().scaleWidth}'); |
| 146 | print('实际高度的dp与设计稿px的比例:${ScreenUtil().scaleHeight}'); | 136 | print('实际高度的dp与设计稿px的比例:${ScreenUtil().scaleHeight}'); |
| 147 | 137 | ||
| 148 | print( | 138 | print( |
| 149 | - '宽度和字体相对于设计稿放大的比例:${ScreenUtil().scaleWidth * ScreenUtil.pixelRatio}'); | ||
| 150 | - print('高度相对于设计稿放大的比例:${ScreenUtil().scaleHeight * ScreenUtil.pixelRatio}'); | ||
| 151 | - print('系统的字体缩放比例:${ScreenUtil.textScaleFactor}'); | 139 | + '宽度和字体相对于设计稿放大的比例:${ScreenUtil().scaleWidth * ScreenUtil().pixelRatio}', |
| 140 | + ); | ||
| 141 | + print( | ||
| 142 | + '高度相对于设计稿放大的比例:${ScreenUtil().scaleHeight * ScreenUtil().pixelRatio}', | ||
| 143 | + ); | ||
| 144 | + print('系统的字体缩放比例:${ScreenUtil().textScaleFactor}'); | ||
| 152 | 145 | ||
| 153 | print('屏幕宽度的0.5:${0.5.wp}'); | 146 | print('屏幕宽度的0.5:${0.5.wp}'); |
| 154 | print('屏幕高度的0.5:${0.5.hp}'); | 147 | print('屏幕高度的0.5:${0.5.hp}'); |
| @@ -4,91 +4,90 @@ | @@ -4,91 +4,90 @@ | ||
| 4 | */ | 4 | */ |
| 5 | 5 | ||
| 6 | import 'package:flutter/material.dart'; | 6 | import 'package:flutter/material.dart'; |
| 7 | +import 'package:flutter/scheduler.dart'; | ||
| 7 | 8 | ||
| 8 | class ScreenUtil { | 9 | class ScreenUtil { |
| 9 | static ScreenUtil _instance; | 10 | static ScreenUtil _instance; |
| 10 | - static const int defaultWidth = 1080; | ||
| 11 | - static const int defaultHeight = 1920; | 11 | + static const Size defaultSize = Size(1080, 1920); |
| 12 | 12 | ||
| 13 | /// UI设计中手机尺寸 , px | 13 | /// UI设计中手机尺寸 , px |
| 14 | /// Size of the phone in UI Design , px | 14 | /// Size of the phone in UI Design , px |
| 15 | - num uiWidthPx; | ||
| 16 | - num uiHeightPx; | 15 | + Size uiSize = defaultSize; |
| 17 | 16 | ||
| 18 | /// 控制字体是否要根据系统的“字体大小”辅助选项来进行缩放。默认值为false。 | 17 | /// 控制字体是否要根据系统的“字体大小”辅助选项来进行缩放。默认值为false。 |
| 19 | /// allowFontScaling Specifies whether fonts should scale to respect Text Size accessibility settings. The default is false. | 18 | /// allowFontScaling Specifies whether fonts should scale to respect Text Size accessibility settings. The default is false. |
| 20 | - bool allowFontScaling; | ||
| 21 | - | ||
| 22 | - static double _screenWidth; | ||
| 23 | - static double _screenHeight; | ||
| 24 | - static double _pixelRatio; | ||
| 25 | - static double _statusBarHeight; | ||
| 26 | - static double _bottomBarHeight; | ||
| 27 | - static double _textScaleFactor; | ||
| 28 | - | ||
| 29 | - ScreenUtil._(); | ||
| 30 | - | ||
| 31 | - factory ScreenUtil() { | ||
| 32 | - return _instance; | 19 | + bool allowFontScaling = false; |
| 20 | + | ||
| 21 | + double _pixelRatio; | ||
| 22 | + double _screenWidth; | ||
| 23 | + double _screenHeight; | ||
| 24 | + double _statusBarHeight; | ||
| 25 | + double _bottomBarHeight; | ||
| 26 | + double _textScaleFactor; | ||
| 27 | + | ||
| 28 | + ScreenUtil._() { | ||
| 29 | + final window = SchedulerBinding.instance?.window; | ||
| 30 | + assert( | ||
| 31 | + window != null, | ||
| 32 | + '\nYou need to explicitly call the `WidgetsFlutterBinding.ensureInitialized()`, before initializing ScreenUtil.', | ||
| 33 | + ); | ||
| 34 | + _pixelRatio = window.devicePixelRatio; | ||
| 35 | + _screenWidth = window.physicalSize.width / _pixelRatio; | ||
| 36 | + _screenHeight = window.physicalSize.height / _pixelRatio; | ||
| 37 | + _statusBarHeight = window.padding.top; | ||
| 38 | + _bottomBarHeight = window.padding.bottom; | ||
| 39 | + _textScaleFactor = window.textScaleFactor; | ||
| 33 | } | 40 | } |
| 34 | 41 | ||
| 35 | - static void init(BuildContext context, | ||
| 36 | - {num width = defaultWidth, | ||
| 37 | - num height = defaultHeight, | ||
| 38 | - bool allowFontScaling = false}) { | ||
| 39 | - if (_instance == null) { | ||
| 40 | - _instance = ScreenUtil._(); | ||
| 41 | - } | ||
| 42 | - _instance.uiWidthPx = width; | ||
| 43 | - _instance.uiHeightPx = height; | ||
| 44 | - _instance.allowFontScaling = allowFontScaling; | ||
| 45 | - | ||
| 46 | - MediaQueryData mediaQuery = MediaQuery.of(context); | ||
| 47 | - _pixelRatio = mediaQuery.devicePixelRatio; | ||
| 48 | - _screenWidth = mediaQuery.size.width; | ||
| 49 | - _screenHeight = mediaQuery.size.height; | ||
| 50 | - _statusBarHeight = mediaQuery.padding.top; | ||
| 51 | - _bottomBarHeight = mediaQuery.padding.bottom; | ||
| 52 | - _textScaleFactor = mediaQuery.textScaleFactor; | 42 | + factory ScreenUtil() => _instance; |
| 43 | + | ||
| 44 | + static void init({ | ||
| 45 | + Size designSize = defaultSize, | ||
| 46 | + bool allowFontScaling = false, | ||
| 47 | + }) { | ||
| 48 | + _instance ??= ScreenUtil._(); | ||
| 49 | + _instance | ||
| 50 | + ..uiSize = designSize | ||
| 51 | + ..allowFontScaling = allowFontScaling; | ||
| 53 | } | 52 | } |
| 54 | 53 | ||
| 55 | /// 每个逻辑像素的字体像素数,字体的缩放比例 | 54 | /// 每个逻辑像素的字体像素数,字体的缩放比例 |
| 56 | /// The number of font pixels for each logical pixel. | 55 | /// The number of font pixels for each logical pixel. |
| 57 | - static double get textScaleFactor => _textScaleFactor; | 56 | + double get textScaleFactor => _textScaleFactor; |
| 58 | 57 | ||
| 59 | /// 设备的像素密度 | 58 | /// 设备的像素密度 |
| 60 | /// The size of the media in logical pixels (e.g, the size of the screen). | 59 | /// The size of the media in logical pixels (e.g, the size of the screen). |
| 61 | - static double get pixelRatio => _pixelRatio; | 60 | + double get pixelRatio => _pixelRatio; |
| 62 | 61 | ||
| 63 | /// 当前设备宽度 dp | 62 | /// 当前设备宽度 dp |
| 64 | /// The horizontal extent of this size. | 63 | /// The horizontal extent of this size. |
| 65 | - static double get screenWidth => _screenWidth; | 64 | + double get screenWidth => _screenWidth; |
| 66 | 65 | ||
| 67 | ///当前设备高度 dp | 66 | ///当前设备高度 dp |
| 68 | ///The vertical extent of this size. dp | 67 | ///The vertical extent of this size. dp |
| 69 | - static double get screenHeight => _screenHeight; | 68 | + double get screenHeight => _screenHeight; |
| 70 | 69 | ||
| 71 | /// 当前设备宽度 px | 70 | /// 当前设备宽度 px |
| 72 | /// The vertical extent of this size. px | 71 | /// The vertical extent of this size. px |
| 73 | - static double get screenWidthPx => _screenWidth * _pixelRatio; | 72 | + double get screenWidthPx => _screenWidth * _pixelRatio; |
| 74 | 73 | ||
| 75 | /// 当前设备高度 px | 74 | /// 当前设备高度 px |
| 76 | /// The vertical extent of this size. px | 75 | /// The vertical extent of this size. px |
| 77 | - static double get screenHeightPx => _screenHeight * _pixelRatio; | 76 | + double get screenHeightPx => _screenHeight * _pixelRatio; |
| 78 | 77 | ||
| 79 | /// 状态栏高度 dp 刘海屏会更高 | 78 | /// 状态栏高度 dp 刘海屏会更高 |
| 80 | /// The offset from the top | 79 | /// The offset from the top |
| 81 | - static double get statusBarHeight => _statusBarHeight; | 80 | + double get statusBarHeight => _statusBarHeight; |
| 82 | 81 | ||
| 83 | /// 底部安全区距离 dp | 82 | /// 底部安全区距离 dp |
| 84 | /// The offset from the bottom. | 83 | /// The offset from the bottom. |
| 85 | - static double get bottomBarHeight => _bottomBarHeight; | 84 | + double get bottomBarHeight => _bottomBarHeight; |
| 86 | 85 | ||
| 87 | /// 实际的dp与UI设计px的比例 | 86 | /// 实际的dp与UI设计px的比例 |
| 88 | /// The ratio of the actual dp to the design draft px | 87 | /// The ratio of the actual dp to the design draft px |
| 89 | - double get scaleWidth => _screenWidth / uiWidthPx; | 88 | + double get scaleWidth => _screenWidth / uiSize.width; |
| 90 | 89 | ||
| 91 | - double get scaleHeight => _screenHeight / uiHeightPx; | 90 | + double get scaleHeight => _screenHeight / uiSize.height; |
| 92 | 91 | ||
| 93 | double get scaleText => scaleWidth; | 92 | double get scaleText => scaleWidth; |
| 94 | 93 |
| @@ -18,9 +18,9 @@ extension SizeExtension on num { | @@ -18,9 +18,9 @@ extension SizeExtension on num { | ||
| 18 | 18 | ||
| 19 | ///屏幕宽度的倍数 | 19 | ///屏幕宽度的倍数 |
| 20 | ///Multiple of screen width | 20 | ///Multiple of screen width |
| 21 | - num get wp => ScreenUtil.screenWidth * this; | 21 | + num get wp => ScreenUtil().screenWidth * this; |
| 22 | 22 | ||
| 23 | ///屏幕高度的倍数 | 23 | ///屏幕高度的倍数 |
| 24 | ///Multiple of screen height | 24 | ///Multiple of screen height |
| 25 | - num get hp => ScreenUtil.screenHeight * this; | 25 | + num get hp => ScreenUtil().screenHeight * this; |
| 26 | } | 26 | } |
| 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: 2.3.1 | 3 | +version: 3.0.0 |
| 4 | homepage: https://github.com/OpenFlutter/flutter_screenutil | 4 | homepage: https://github.com/OpenFlutter/flutter_screenutil |
| 5 | 5 | ||
| 6 | environment: | 6 | environment: |
| @@ -13,38 +13,3 @@ dependencies: | @@ -13,38 +13,3 @@ dependencies: | ||
| 13 | dev_dependencies: | 13 | dev_dependencies: |
| 14 | flutter_test: | 14 | flutter_test: |
| 15 | sdk: flutter | 15 | sdk: flutter |
| 16 | - | ||
| 17 | -# For information on the generic Dart part of this file, see the | ||
| 18 | -# following page: https://www.dartlang.org/tools/pub/pubspec | ||
| 19 | - | ||
| 20 | -# The following section is specific to Flutter. | ||
| 21 | -flutter: | ||
| 22 | - # To add assets to your package, add an assets section, like this: | ||
| 23 | - # assets: | ||
| 24 | - # - images/a_dot_burr.jpeg | ||
| 25 | - # - images/a_dot_ham.jpeg | ||
| 26 | - # | ||
| 27 | - # For details regarding assets in packages, see | ||
| 28 | - # https://flutter.io/assets-and-images/#from-packages | ||
| 29 | - # | ||
| 30 | - # An image asset can refer to one or more resolution-specific "variants", see | ||
| 31 | - # https://flutter.io/assets-and-images/#resolution-aware. | ||
| 32 | - # To add custom fonts to your package, add a fonts section here, | ||
| 33 | - # in this "flutter" section. Each entry in this list should have a | ||
| 34 | - # "family" key with the font family name, and a "fonts" key with a | ||
| 35 | - # list giving the asset and other descriptors for the font. For | ||
| 36 | - # example: | ||
| 37 | - # fonts: | ||
| 38 | - # - family: Schyler | ||
| 39 | - # fonts: | ||
| 40 | - # - asset: fonts/Schyler-Regular.ttf | ||
| 41 | - # - asset: fonts/Schyler-Italic.ttf | ||
| 42 | - # style: italic | ||
| 43 | - # - family: Trajan Pro | ||
| 44 | - # fonts: | ||
| 45 | - # - asset: fonts/TrajanPro.ttf | ||
| 46 | - # - asset: fonts/TrajanPro_Bold.ttf | ||
| 47 | - # weight: 700 | ||
| 48 | - # | ||
| 49 | - # For details regarding fonts in packages, see | ||
| 50 | - # https://flutter.io/custom-fonts/#from-packages |
-
Please register or login to post a comment