flutter_package / flutter_screenutil

Go to a project
Toggle navigation Toggle navigation pinning
sarbagyastha
65367c4e 1 parent 1fe49f6a

BuildContext not required anymore

Inline Side-by-side
Showing 8 changed files with 309 additions and 348 deletions
... ... @@ -5,7 +5,12 @@
* @LastEditTime: 2020年6月20日 11:20:02
* @Description: Update log
-->
# 3.0.0
**BREAKING CHANGES**
- `BuildContext` is no more required while initializing. i.e. ScreenUtil.init(~~context~~)
- Initialize size of design draft using `designSize` instead of width & height.
- All the static methods are now member methods.
# 2.3.1
- add textStyle Example.
... ...
... ... @@ -24,7 +24,7 @@ dependencies:
flutter:
sdk: flutter
# add flutter_screenutil
flutter_screenutil: ^2.3.0
flutter_screenutil: ^3.0.0
```
### Add the following imports to your Dart code:
... ... @@ -36,26 +36,25 @@ import 'package:flutter_screenutil/flutter_screenutil.dart';
|Property|Type|Default Value|Description|
|:---|:---|:---|:---|
|width|double|1080px|The width of the device in the design draft, in px|
|height|double|1920px|The height of the device in the design draft, in px|
|designSize|Size|Size(1080, 1920)|The size of the device in the design draft, in px|
|allowFontScaling|bool|false|Sets whether the font size is scaled according to the system's "font size" assist option|
### Initialize and set the fit size and font size to scale according to the system's "font size" accessibility option
Please set the width and height of the design draft before use, the width and height of the design draft (unit px).
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:
Please set the size of the design draft before use, the width and height of the design draft (unit px).
```dart
//fill in the screen size of the device in the design
//default value : width : 1080px , height:1920px , allowFontScaling:false
ScreenUtil.init(context);
ScreenUtil.init();
//If the design is based on the size of the iPhone6 ​​(iPhone6 ​​750*1334)
ScreenUtil.init(context, width: 750, height: 1334);
ScreenUtil.init(designSize: Size(750, 1334));
//If you want to set the font size is scaled according to the system's "font size" assist option
ScreenUtil.init(context, width: 750, height: 1334, allowFontScaling: true);
ScreenUtil.init(designSize: Size(750, 1334), allowFontScaling: true);
```
... ... @@ -72,12 +71,12 @@ ScreenUtil.init(context, width: 750, height: 1334, allowFontScaling: true);
ScreenUtil().setSp(24, allowFontScalingSelf: true) (sdk>=2.6 : 24.ssp) //Adapter font(fonts will scale to respect Text Size accessibility settings)
ScreenUtil().setSp(24, allowFontScalingSelf: false) (sdk>=2.6 : 24.nsp) //Adapter font(fonts will not scale to respect Text Size accessibility settings)
ScreenUtil.pixelRatio //Device pixel density
ScreenUtil.screenWidth (sdk>=2.6 : 1.wp) //Device width
ScreenUtil.screenHeight (sdk>=2.6 : 1.hp) //Device height
ScreenUtil.bottomBarHeight //Bottom safe zone distance, suitable for buttons with full screen
ScreenUtil.statusBarHeight //Status bar height , Notch will be higher Unit px
ScreenUtil.textScaleFactor //System font scaling factor
ScreenUtil().pixelRatio //Device pixel density
ScreenUtil().screenWidth (sdk>=2.6 : 1.wp) //Device width
ScreenUtil().screenHeight (sdk>=2.6 : 1.hp) //Device height
ScreenUtil().bottomBarHeight //Bottom safe zone distance, suitable for buttons with full screen
ScreenUtil().statusBarHeight //Status bar height , Notch will be higher Unit px
ScreenUtil().textScaleFactor //System font scaling factor
ScreenUtil().scaleWidth //Ratio of actual width dp to design draft px
ScreenUtil().scaleHeight //Ratio of actual height dp to design draft px
... ... @@ -166,167 +165,11 @@ Column(
)
```
```dart
//import
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter_ScreenUtil',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
//Set the fit size (fill in the screen size of the device in the design) If the design is based on the size of the iPhone6 ​​(iPhone6 ​​750*1334)
ScreenUtil.init(width: 750, height: 1334, allowFontScaling: false);
return ExampleWidget(title: 'FlutterScreenUtil Demo');
}
}
class ExampleWidget extends StatefulWidget {
const ExampleWidget({Key key, this.title}) : super(key: key);
final String title;
@override
_ExampleWidgetState createState() => _ExampleWidgetState();
}
class _ExampleWidgetState extends State<ExampleWidget> {
@override
Widget build(BuildContext context) {
printScreenInformation();
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Row(
children: <Widget>[
Container(
padding: EdgeInsets.all(ScreenUtil().setWidth(10)),
width: ScreenUtil().setWidth(375),
height: ScreenUtil().setHeight(200),
color: Colors.red,
child: Text(
'My width:${ScreenUtil().setWidth(375)}dp \n'
'My height:${ScreenUtil().setHeight(200)}dp',
style: TextStyle(
color: Colors.white, fontSize: ScreenUtil().setSp(24)),
),
),
Container(
padding: EdgeInsets.all(ScreenUtil().setWidth(10)),
width: ScreenUtil().setWidth(375),
height: ScreenUtil().setHeight(200),
color: Colors.blue,
child: Text(
'My width:${ScreenUtil().setWidth(375)}dp \n'
'My height:${ScreenUtil().setHeight(200)}dp',
style: TextStyle(
color: Colors.white,
fontSize: ScreenUtil().setSp(24))),
),
],
),
Text('Device width:${ScreenUtil.screenWidth}dp'),
Text('Device height:${ScreenUtil.screenHeight}dp'),
Text('Device width:${ScreenUtil.screenWidthPx}px'),
Text('Device height:${ScreenUtil.screenHeightPx}px'),
Text('Device pixel density:${ScreenUtil.pixelRatio}'),
Text('Bottom safe zone distance:${ScreenUtil.bottomBarHeight}dp'),
Text('Status bar height:${ScreenUtil.statusBarHeight}dp'),
Text(
'Ratio of actual width dp to design draft px:${ScreenUtil().scaleWidth}',
textAlign: TextAlign.center,
),
Text(
'Ratio of actual height dp to design draft px:${ScreenUtil().scaleHeight}',
textAlign: TextAlign.center,
),
SizedBox(
height: ScreenUtil().setHeight(100),
),
Text('System font scaling factor:${ScreenUtil.textScaleFactor}'),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'My font size is 24px on the design draft and will not change with the system.',
style: TextStyle(
color: Colors.black,
fontSize: ScreenUtil().setSp(24),
)),
Text(
'My font size is 24px on the design draft and will change with the system.',
style: TextStyle(
color: Colors.black,
fontSize: ScreenUtil()
.setSp(24, allowFontScalingSelf: true))),
],
)
],
),
),
floatingActionButton: FloatingActionButton(
child: Icon(Icons.title),
onPressed: () {
ScreenUtil.init(width: 1500, height: 1334, allowFontScaling: false);
setState(() {});
},
),
);
}
void printScreenInformation() {
print('Device width dp:${ScreenUtil.screenWidth}'); //Device width
print('Device height dp:${ScreenUtil.screenHeight}'); //Device height
print(
'Device pixel density:${ScreenUtil.pixelRatio}'); //Device pixel density
print(
'Bottom safe zone distance dp:${ScreenUtil.bottomBarHeight}'); //Bottom safe zone distance，suitable for buttons with full screen
print(
'Status bar height dp:${ScreenUtil.statusBarHeight}dp'); //Status bar height , Notch will be higher Unit dp
print(
'Ratio of actual width dp to design draft px:${ScreenUtil().scaleWidth}');
print(
'Ratio of actual height dp to design draft px:${ScreenUtil().scaleHeight}');
print(
'The ratio of font and width to the size of the design:${ScreenUtil().scaleWidth * ScreenUtil.pixelRatio}');
print(
'The ratio of height width to the size of the design:${ScreenUtil().scaleHeight * ScreenUtil.pixelRatio}');
}
}
```
### example:
### Example:
[example demo](/example/lib/main.dart)
effect:
### Effect:
![effect](demo_en.png)
![tablet effect](demo_tablet_en.png)
... ...
# example
flutter_screenutil example
# Example
![手机效果](../demo_zh.png)
![phone effect](../demo_en.png)
![平板效果](../demo_tablet_zh.png)
![tablet effect](../demo_tablet_en.png)
## Getting Started
```dart
void main() {
WidgetsFlutterBinding.ensureInitialized();
//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)
ScreenUtil.init(designSize: Size(750, 1334), allowFontScaling: false);
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter_ScreenUtil',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: ExampleWidget(title: 'FlutterScreenUtil Demo'),
);
}
}
class ExampleWidget extends StatefulWidget {
const ExampleWidget({Key key, this.title}) : super(key: key);
final String title;
@override
_ExampleWidgetState createState() => _ExampleWidgetState();
}
class _ExampleWidgetState extends State<ExampleWidget> {
@override
Widget build(BuildContext context) {
printScreenInformation();
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Row(
children: <Widget>[
// Using Extensions
Container(
padding: EdgeInsets.all(10.w),
width: 0.5.wp,
height: 200.h,
color: Colors.red,
child: Text(
'My width:${0.5.wp}dp \n'
'My height:${200.h}dp',
style: TextStyle(
color: Colors.white,
fontSize: 24.sp,
),
),
),
// Without using Extensions
Container(
padding: EdgeInsets.all(ScreenUtil().setWidth(10)),
width: ScreenUtil().screenWidth * 0.5,
height: ScreenUtil().setHeight(200),
color: Colors.blue,
child: Text(
'My width:${ScreenUtil().screenWidth * 0.5}dp \n'
'My height:${ScreenUtil().setHeight(200)}dp',
style: TextStyle(
color: Colors.white,
fontSize: ScreenUtil().setSp(24),
),
),
),
],
),
Text('Device width:${ScreenUtil().screenWidthPx}px'),
Text('Device height:${ScreenUtil().screenHeightPx}px'),
Text('Device width:${ScreenUtil().screenWidth}dp'),
Text('Device height:${ScreenUtil().screenHeight}dp'),
Text('Device pixel density:${ScreenUtil().pixelRatio}'),
Text('Bottom safe zone distance:${ScreenUtil().bottomBarHeight}dp'),
Text('Status bar height:${ScreenUtil().statusBarHeight}dp'),
Text(
'Ratio of actual width dp to design draft px:${ScreenUtil().scaleWidth}',
textAlign: TextAlign.center,
),
Text(
'Ratio of actual height dp to design draft px:${ScreenUtil().scaleHeight}',
textAlign: TextAlign.center,
),
SizedBox(
height: ScreenUtil().setHeight(100),
),
Text('System font scaling factor:${ScreenUtil().textScaleFactor}'),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'My font size is 24px on the design draft and will not change with the system.',
style: TextStyle(
color: Colors.black,
fontSize: 24.sp,
),
),
Text(
'My font size is 24px on the design draft and will change with the system.',
style: ts.t1,
),
],
)
],
),
),
floatingActionButton: FloatingActionButton(
child: Icon(Icons.title),
onPressed: () {
ScreenUtil.init(
designSize: Size(1500, 1334),
allowFontScaling: false,
);
setState(() {});
},
),
);
}
void printScreenInformation() {
print('Device width dp:${ScreenUtil().screenWidth}'); //Device width
print('Device height dp:${ScreenUtil().screenHeight}'); //Device height
print(
'Device pixel density:${ScreenUtil().pixelRatio}'); //Device pixel density
print(
'Bottom safe zone distance dp:${ScreenUtil().bottomBarHeight}'); //Bottom safe zone distance，suitable for buttons with full screen
print(
'Status bar height px:${ScreenUtil().statusBarHeight}dp'); //Status bar height , Notch will be higher Unit px
print(
'Ratio of actual width dp to design draft px:${ScreenUtil().scaleWidth}');
print(
'Ratio of actual height dp to design draft px:${ScreenUtil().scaleHeight}');
print(
'The ratio of font and width to the size of the design:${ScreenUtil().scaleWidth * ScreenUtil().pixelRatio}');
print(
'The ratio of height width to the size of the design:${ScreenUtil().scaleHeight * ScreenUtil().pixelRatio}');
print('System font scaling:${ScreenUtil().textScaleFactor}');
print('0.5 times the screen width:${0.5.wp}');
print('0.5 times the screen height:${0.5.hp}');
}
}
```
... ...
import 'dart:ui';
import 'package:example/text_style.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
void main() => runApp(MyApp());
import 'text_style.dart';
void main() {
WidgetsFlutterBinding.ensureInitialized();
//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)
ScreenUtil.init(designSize: Size(750, 1334), allowFontScaling: false);
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
... ... @@ -15,20 +21,11 @@ class MyApp extends StatelessWidget {
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
home: ExampleWidget(title: 'FlutterScreenUtil Demo'),
);
}
}
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
//Set the fit size (fill in the screen size of the device in the design) If the design is based on the size of the iPhone6 ​​(iPhone6 ​​750*1334)
ScreenUtil.init(context, width: 750, height: 1334, allowFontScaling: false);
return ExampleWidget(title: 'FlutterScreenUtil Demo');
}
}
class ExampleWidget extends StatefulWidget {
const ExampleWidget({Key key, this.title}) : super(key: key);
... ... @@ -52,39 +49,45 @@ class _ExampleWidgetState extends State<ExampleWidget> {
children: <Widget>[
Row(
children: <Widget>[
// Using Extensions
Container(
padding: EdgeInsets.all(ScreenUtil().setWidth(10)),
width: 375.w,
padding: EdgeInsets.all(10.w),
width: 0.5.wp,
height: 200.h,
color: Colors.red,
child: Text(
'My width:${375.w}dp \n'
'My width:${0.5.wp}dp \n'
'My height:${200.h}dp',
style: TextStyle(
color: Colors.white, fontSize: ScreenUtil().setSp(24)),
color: Colors.white,
fontSize: 24.sp,
),
),
),
// Without using Extensions
Container(
padding: EdgeInsets.all(ScreenUtil().setWidth(10)),
width: ScreenUtil().setWidth(375),
width: ScreenUtil().screenWidth * 0.5,
height: ScreenUtil().setHeight(200),
color: Colors.blue,
child: Text(
'My width:${0.5.wp}dp \n'
'My height:${ScreenUtil().setHeight(200)}dp',
style: TextStyle(
color: Colors.white,
fontSize: ScreenUtil().setSp(24))),
'My width:${ScreenUtil().screenWidth * 0.5}dp \n'
'My height:${ScreenUtil().setHeight(200)}dp',
style: TextStyle(
color: Colors.white,
fontSize: ScreenUtil().setSp(24),
),
),
),
],
),
Text('Device width:${ScreenUtil.screenWidthPx}px'),
Text('Device height:${ScreenUtil.screenHeightPx}px'),
Text('Device width:${ScreenUtil.screenWidth}dp'),
Text('Device height:${ScreenUtil.screenHeight}dp'),
Text('Device pixel density:${ScreenUtil.pixelRatio}'),
Text('Bottom safe zone distance:${ScreenUtil.bottomBarHeight}dp'),
Text('Status bar height:${ScreenUtil.statusBarHeight}dp'),
Text('Device width:${ScreenUtil().screenWidthPx}px'),
Text('Device height:${ScreenUtil().screenHeightPx}px'),
Text('Device width:${ScreenUtil().screenWidth}dp'),
Text('Device height:${ScreenUtil().screenHeight}dp'),
Text('Device pixel density:${ScreenUtil().pixelRatio}'),
Text('Bottom safe zone distance:${ScreenUtil().bottomBarHeight}dp'),
Text('Status bar height:${ScreenUtil().statusBarHeight}dp'),
Text(
'Ratio of actual width dp to design draft px:${ScreenUtil().scaleWidth}',
textAlign: TextAlign.center,
... ... @@ -96,19 +99,21 @@ class _ExampleWidgetState extends State<ExampleWidget> {
SizedBox(
height: ScreenUtil().setHeight(100),
),
Text('System font scaling factor:${ScreenUtil.textScaleFactor}'),
Text('System font scaling factor:${ScreenUtil().textScaleFactor}'),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'My font size is 24px on the design draft and will not change with the system.',
style: TextStyle(
color: Colors.black,
fontSize: 24.sp,
)),
'My font size is 24px on the design draft and will not change with the system.',
style: TextStyle(
color: Colors.black,
fontSize: 24.sp,
),
),
Text(
'My font size is 24px on the design draft and will change with the system.',
style: ts.t1),
'My font size is 24px on the design draft and will change with the system.',
style: ts.t1,
),
],
)
],
... ... @@ -117,8 +122,10 @@ class _ExampleWidgetState extends State<ExampleWidget> {
floatingActionButton: FloatingActionButton(
child: Icon(Icons.title),
onPressed: () {
ScreenUtil.init(context,
width: 1500, height: 1334, allowFontScaling: false);
ScreenUtil.init(
designSize: Size(1500, 1334),
allowFontScaling: false,
);
setState(() {});
},
),
... ... @@ -126,23 +133,23 @@ class _ExampleWidgetState extends State<ExampleWidget> {
}
void printScreenInformation() {
print('Device width dp:${ScreenUtil.screenWidth}'); //Device width
print('Device height dp:${ScreenUtil.screenHeight}'); //Device height
print('Device width dp:${ScreenUtil().screenWidth}'); //Device width
print('Device height dp:${ScreenUtil().screenHeight}'); //Device height
print(
'Device pixel density:${ScreenUtil.pixelRatio}'); //Device pixel density
'Device pixel density:${ScreenUtil().pixelRatio}'); //Device pixel density
print(
'Bottom safe zone distance dp:${ScreenUtil.bottomBarHeight}'); //Bottom safe zone distance，suitable for buttons with full screen
'Bottom safe zone distance dp:${ScreenUtil().bottomBarHeight}'); //Bottom safe zone distance，suitable for buttons with full screen
print(
'Status bar height px:${ScreenUtil.statusBarHeight}dp'); //Status bar height , Notch will be higher Unit px
'Status bar height px:${ScreenUtil().statusBarHeight}dp'); //Status bar height , Notch will be higher Unit px
print(
'Ratio of actual width dp to design draft px:${ScreenUtil().scaleWidth}');
print(
'Ratio of actual height dp to design draft px:${ScreenUtil().scaleHeight}');
print(
'The ratio of font and width to the size of the design:${ScreenUtil().scaleWidth * ScreenUtil.pixelRatio}');
'The ratio of font and width to the size of the design:${ScreenUtil().scaleWidth * ScreenUtil().pixelRatio}');
print(
'The ratio of height width to the size of the design:${ScreenUtil().scaleHeight * ScreenUtil.pixelRatio}');
print('System font scaling:${ScreenUtil.textScaleFactor}');
'The ratio of height width to the size of the design:${ScreenUtil().scaleHeight * ScreenUtil().pixelRatio}');
print('System font scaling:${ScreenUtil().textScaleFactor}');
print('0.5 times the screen width:${0.5.wp}');
print('0.5 times the screen height:${0.5.hp}');
}
... ...
import 'package:example/text_style.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
void main() => runApp(MyApp());
import 'text_style.dart';
void main() {
WidgetsFlutterBinding.ensureInitialized();
//设置适配尺寸 (填入设计稿中设备的屏幕尺寸) 此处假如设计稿是按iPhone6的尺寸设计的(iPhone6 750*1334)
ScreenUtil.init(designSize: Size(750, 1334), allowFontScaling: false);
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
... ... @@ -13,31 +19,11 @@ class MyApp extends StatelessWidget {
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
home: ExampleWidget(title: 'FlutterScreenUtil示例'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
//设置适配尺寸 (填入设计稿中设备的屏幕尺寸) 此处假如设计稿是按iPhone6的尺寸设计的(iPhone6 750*1334)
ScreenUtil.init(context, width: 750, height: 1334, allowFontScaling: false);
return ExampleWidget(title: 'FlutterScreenUtil示例');
}
}
class ExampleWidget extends StatefulWidget {
const ExampleWidget({Key key, this.title}) : super(key: key);
... ... @@ -87,13 +73,13 @@ class _ExampleWidgetState extends State<ExampleWidget> {
),
],
),
Text('设备宽度:${ScreenUtil.screenWidthPx}px'),
Text('设备高度:${ScreenUtil.screenHeightPx}px'),
Text('设备宽度:${ScreenUtil.screenWidth}dp'),
Text('设备高度:${ScreenUtil.screenHeight}dp'),
Text('设备的像素密度:${ScreenUtil.pixelRatio}'),
Text('底部安全区距离:${ScreenUtil.bottomBarHeight}dp'),
Text('状态栏高度:${ScreenUtil.statusBarHeight}dp'),
Text('设备宽度:${ScreenUtil().screenWidthPx}px'),
Text('设备高度:${ScreenUtil().screenHeightPx}px'),
Text('设备宽度:${ScreenUtil().screenWidth}dp'),
Text('设备高度:${ScreenUtil().screenHeight}dp'),
Text('设备的像素密度:${ScreenUtil().pixelRatio}'),
Text('底部安全区距离:${ScreenUtil().bottomBarHeight}dp'),
Text('状态栏高度:${ScreenUtil().statusBarHeight}dp'),
Text(
'实际宽度的dp与设计稿px的比例:${ScreenUtil().scaleWidth}',
textAlign: TextAlign.center,
... ... @@ -105,7 +91,7 @@ class _ExampleWidgetState extends State<ExampleWidget> {
SizedBox(
height: 100.h,
),
Text('系统的字体缩放比例:${ScreenUtil.textScaleFactor}'),
Text('系统的字体缩放比例:${ScreenUtil().textScaleFactor}'),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
... ... @@ -125,8 +111,10 @@ class _ExampleWidgetState extends State<ExampleWidget> {
floatingActionButton: FloatingActionButton(
child: Icon(Icons.title),
onPressed: () {
ScreenUtil.init(context,
width: 1500, height: 1334, allowFontScaling: false);
ScreenUtil.init(
designSize: Size(1500, 1334),
allowFontScaling: false,
);
setState(() {});
},
),
... ... @@ -134,21 +122,26 @@ class _ExampleWidgetState extends State<ExampleWidget> {
}
void printScreenInformation() {
print('设备宽度:${ScreenUtil.screenWidth}'); //Device width
print('设备高度:${ScreenUtil.screenHeight}'); //Device height
print('设备的像素密度:${ScreenUtil.pixelRatio}'); //Device pixel density
print('设备宽度:${ScreenUtil().screenWidth}'); //Device width
print('设备高度:${ScreenUtil().screenHeight}'); //Device height
print('设备的像素密度:${ScreenUtil().pixelRatio}'); //Device pixel density
print(
'底部安全区距离:${ScreenUtil.bottomBarHeight}dp'); //Bottom safe zone distance，suitable for buttons with full screen
'底部安全区距离:${ScreenUtil().bottomBarHeight}dp',
); //Bottom safe zone distance，suitable for buttons with full screen
print(
'状态栏高度:${ScreenUtil.statusBarHeight}dp'); //Status bar height , Notch will be higher Unit px
'状态栏高度:${ScreenUtil().statusBarHeight}dp',
); //Status bar height , Notch will be higher Unit px
print('实际宽度的dp与设计稿px的比例:${ScreenUtil().scaleWidth}');
print('实际高度的dp与设计稿px的比例:${ScreenUtil().scaleHeight}');
print(
'宽度和字体相对于设计稿放大的比例:${ScreenUtil().scaleWidth * ScreenUtil.pixelRatio}');
print('高度相对于设计稿放大的比例:${ScreenUtil().scaleHeight * ScreenUtil.pixelRatio}');
print('系统的字体缩放比例:${ScreenUtil.textScaleFactor}');
'宽度和字体相对于设计稿放大的比例:${ScreenUtil().scaleWidth * ScreenUtil().pixelRatio}',
);
print(
'高度相对于设计稿放大的比例:${ScreenUtil().scaleHeight * ScreenUtil().pixelRatio}',
);
print('系统的字体缩放比例:${ScreenUtil().textScaleFactor}');
print('屏幕宽度的0.5:${0.5.wp}');
print('屏幕高度的0.5:${0.5.hp}');
... ...
... ... @@ -4,91 +4,90 @@
*/
import 'package:flutter/material.dart';
import 'package:flutter/scheduler.dart';
class ScreenUtil {
static ScreenUtil _instance;
static const int defaultWidth = 1080;
static const int defaultHeight = 1920;
static const Size defaultSize = Size(1080, 1920);
/// UI设计中手机尺寸 , px
/// Size of the phone in UI Design , px
num uiWidthPx;
num uiHeightPx;
Size uiSize = defaultSize;
/// 控制字体是否要根据系统的“字体大小”辅助选项来进行缩放。默认值为false。
/// allowFontScaling Specifies whether fonts should scale to respect Text Size accessibility settings. The default is false.
bool allowFontScaling;
static double _screenWidth;
static double _screenHeight;
static double _pixelRatio;
static double _statusBarHeight;
static double _bottomBarHeight;
static double _textScaleFactor;
ScreenUtil._();
factory ScreenUtil() {
return _instance;
bool allowFontScaling = false;
double _pixelRatio;
double _screenWidth;
double _screenHeight;
double _statusBarHeight;
double _bottomBarHeight;
double _textScaleFactor;
ScreenUtil._() {
final window = SchedulerBinding.instance?.window;
assert(
window != null,
'\nYou need to explicitly call the `WidgetsFlutterBinding.ensureInitialized()`, before initializing ScreenUtil.',
);
_pixelRatio = window.devicePixelRatio;
_screenWidth = window.physicalSize.width / _pixelRatio;
_screenHeight = window.physicalSize.height / _pixelRatio;
_statusBarHeight = window.padding.top;
_bottomBarHeight = window.padding.bottom;
_textScaleFactor = window.textScaleFactor;
}
static void init(BuildContext context,
{num width = defaultWidth,
num height = defaultHeight,
bool allowFontScaling = false}) {
if (_instance == null) {
_instance = ScreenUtil._();
}
_instance.uiWidthPx = width;
_instance.uiHeightPx = height;
_instance.allowFontScaling = allowFontScaling;
MediaQueryData mediaQuery = MediaQuery.of(context);
_pixelRatio = mediaQuery.devicePixelRatio;
_screenWidth = mediaQuery.size.width;
_screenHeight = mediaQuery.size.height;
_statusBarHeight = mediaQuery.padding.top;
_bottomBarHeight = mediaQuery.padding.bottom;
_textScaleFactor = mediaQuery.textScaleFactor;
factory ScreenUtil() => _instance;
static void init({
Size designSize = defaultSize,
bool allowFontScaling = false,
}) {
_instance ??= ScreenUtil._();
_instance
..uiSize = designSize
..allowFontScaling = allowFontScaling;
}
/// 每个逻辑像素的字体像素数，字体的缩放比例
/// The number of font pixels for each logical pixel.
static double get textScaleFactor => _textScaleFactor;
double get textScaleFactor => _textScaleFactor;
/// 设备的像素密度
/// The size of the media in logical pixels (e.g, the size of the screen).
static double get pixelRatio => _pixelRatio;
double get pixelRatio => _pixelRatio;
/// 当前设备宽度 dp
/// The horizontal extent of this size.
static double get screenWidth => _screenWidth;
double get screenWidth => _screenWidth;
///当前设备高度 dp
///The vertical extent of this size. dp
static double get screenHeight => _screenHeight;
double get screenHeight => _screenHeight;
/// 当前设备宽度 px
/// The vertical extent of this size. px
static double get screenWidthPx => _screenWidth * _pixelRatio;
double get screenWidthPx => _screenWidth * _pixelRatio;
/// 当前设备高度 px
/// The vertical extent of this size. px
static double get screenHeightPx => _screenHeight * _pixelRatio;
double get screenHeightPx => _screenHeight * _pixelRatio;
/// 状态栏高度 dp 刘海屏会更高
/// The offset from the top
static double get statusBarHeight => _statusBarHeight;
double get statusBarHeight => _statusBarHeight;
/// 底部安全区距离 dp
/// The offset from the bottom.
static double get bottomBarHeight => _bottomBarHeight;
double get bottomBarHeight => _bottomBarHeight;
/// 实际的dp与UI设计px的比例
/// The ratio of the actual dp to the design draft px
double get scaleWidth => _screenWidth / uiWidthPx;
double get scaleWidth => _screenWidth / uiSize.width;
double get scaleHeight => _screenHeight / uiHeightPx;
double get scaleHeight => _screenHeight / uiSize.height;
double get scaleText => scaleWidth;
... ...
... ... @@ -18,9 +18,9 @@ extension SizeExtension on num {
///屏幕宽度的倍数
///Multiple of screen width
num get wp => ScreenUtil.screenWidth * this;
num get wp => ScreenUtil().screenWidth * this;
///屏幕高度的倍数
///Multiple of screen height
num get hp => ScreenUtil.screenHeight * this;
num get hp => ScreenUtil().screenHeight * this;
}
... ...
name: flutter_screenutil
description: A flutter plugin for adapting screen and font size.Guaranteed to look good on different models
version: 2.3.1
version: 3.0.0
homepage: https://github.com/OpenFlutter/flutter_screenutil
environment:
... ... @@ -13,38 +13,3 @@ dependencies:
dev_dependencies:
flutter_test:
sdk: flutter
# For information on the generic Dart part of this file, see the
# following page: https://www.dartlang.org/tools/pub/pubspec
# The following section is specific to Flutter.
flutter:
# To add assets to your package, add an assets section, like this:
# assets:
# - images/a_dot_burr.jpeg
# - images/a_dot_ham.jpeg
#
# For details regarding assets in packages, see
# https://flutter.io/assets-and-images/#from-packages
#
# An image asset can refer to one or more resolution-specific "variants", see
# https://flutter.io/assets-and-images/#resolution-aware.
# To add custom fonts to your package, add a fonts section here,
# in this "flutter" section. Each entry in this list should have a
# "family" key with the font family name, and a "fonts" key with a
# list giving the asset and other descriptors for the font. For
# example:
# fonts:
# - family: Schyler
# fonts:
# - asset: fonts/Schyler-Regular.ttf
# - asset: fonts/Schyler-Italic.ttf
# style: italic
# - family: Trajan Pro
# fonts:
# - asset: fonts/TrajanPro.ttf
# - asset: fonts/TrajanPro_Bold.ttf
# weight: 700
#
# For details regarding fonts in packages, see
# https://flutter.io/custom-fonts/#from-packages
... ...