flutter_package / flutter_screenutil

Go to a project
Toggle navigation Toggle navigation pinning
lizhuoyuan
80a660c9 1 parent 36df9678

1.0.0 

fix #68
fix #87
Inline Side-by-side
Showing 18 changed files with 652 additions and 397 deletions
# Generated by pub on 2019-11-29 11:43:17.634960.
async:file:///D:/flutter/.pub-cache/hosted/pub.flutter-io.cn/async-2.3.0/lib/
boolean_selector:file:///D:/flutter/.pub-cache/hosted/pub.flutter-io.cn/boolean_selector-1.0.5/lib/
charcode:file:///D:/flutter/.pub-cache/hosted/pub.flutter-io.cn/charcode-1.1.2/lib/
collection:file:///D:/flutter/.pub-cache/hosted/pub.flutter-io.cn/collection-1.14.11/lib/
# Generated by pub on 2020-01-06 16:51:35.863956.
archive:file:///D:/flutter/.pub-cache/hosted/pub.dartlang.org/archive-2.0.11/lib/
args:file:///D:/flutter/.pub-cache/hosted/pub.dartlang.org/args-1.5.2/lib/
async:file:///D:/flutter/.pub-cache/hosted/pub.dartlang.org/async-2.4.0/lib/
boolean_selector:file:///D:/flutter/.pub-cache/hosted/pub.dartlang.org/boolean_selector-1.0.5/lib/
charcode:file:///D:/flutter/.pub-cache/hosted/pub.dartlang.org/charcode-1.1.2/lib/
collection:file:///D:/flutter/.pub-cache/hosted/pub.dartlang.org/collection-1.14.11/lib/
convert:file:///D:/flutter/.pub-cache/hosted/pub.dartlang.org/convert-2.1.1/lib/
crypto:file:///D:/flutter/.pub-cache/hosted/pub.dartlang.org/crypto-2.1.3/lib/
flutter:file:///D:/flutter/packages/flutter/lib/
flutter_test:file:///D:/flutter/packages/flutter_test/lib/
matcher:file:///D:/flutter/.pub-cache/hosted/pub.flutter-io.cn/matcher-0.12.5/lib/
meta:file:///D:/flutter/.pub-cache/hosted/pub.flutter-io.cn/meta-1.1.7/lib/
path:file:///D:/flutter/.pub-cache/hosted/pub.flutter-io.cn/path-1.6.4/lib/
pedantic:file:///D:/flutter/.pub-cache/hosted/pub.flutter-io.cn/pedantic-1.8.0+1/lib/
quiver:file:///D:/flutter/.pub-cache/hosted/pub.flutter-io.cn/quiver-2.0.5/lib/
image:file:///D:/flutter/.pub-cache/hosted/pub.dartlang.org/image-2.1.4/lib/
matcher:file:///D:/flutter/.pub-cache/hosted/pub.dartlang.org/matcher-0.12.6/lib/
meta:file:///D:/flutter/.pub-cache/hosted/pub.dartlang.org/meta-1.1.8/lib/
path:file:///D:/flutter/.pub-cache/hosted/pub.dartlang.org/path-1.6.4/lib/
pedantic:file:///D:/flutter/.pub-cache/hosted/pub.dartlang.org/pedantic-1.8.0+1/lib/
petitparser:file:///D:/flutter/.pub-cache/hosted/pub.dartlang.org/petitparser-2.4.0/lib/
quiver:file:///D:/flutter/.pub-cache/hosted/pub.dartlang.org/quiver-2.0.5/lib/
sky_engine:file:///D:/flutter/bin/cache/pkg/sky_engine/lib/
source_span:file:///D:/flutter/.pub-cache/hosted/pub.flutter-io.cn/source_span-1.5.5/lib/
stack_trace:file:///D:/flutter/.pub-cache/hosted/pub.flutter-io.cn/stack_trace-1.9.3/lib/
stream_channel:file:///D:/flutter/.pub-cache/hosted/pub.flutter-io.cn/stream_channel-2.0.0/lib/
string_scanner:file:///D:/flutter/.pub-cache/hosted/pub.flutter-io.cn/string_scanner-1.0.5/lib/
term_glyph:file:///D:/flutter/.pub-cache/hosted/pub.flutter-io.cn/term_glyph-1.1.0/lib/
test_api:file:///D:/flutter/.pub-cache/hosted/pub.flutter-io.cn/test_api-0.2.5/lib/
typed_data:file:///D:/flutter/.pub-cache/hosted/pub.flutter-io.cn/typed_data-1.1.6/lib/
vector_math:file:///D:/flutter/.pub-cache/hosted/pub.flutter-io.cn/vector_math-2.0.8/lib/
source_span:file:///D:/flutter/.pub-cache/hosted/pub.dartlang.org/source_span-1.5.5/lib/
stack_trace:file:///D:/flutter/.pub-cache/hosted/pub.dartlang.org/stack_trace-1.9.3/lib/
stream_channel:file:///D:/flutter/.pub-cache/hosted/pub.dartlang.org/stream_channel-2.0.0/lib/
string_scanner:file:///D:/flutter/.pub-cache/hosted/pub.dartlang.org/string_scanner-1.0.5/lib/
term_glyph:file:///D:/flutter/.pub-cache/hosted/pub.dartlang.org/term_glyph-1.1.0/lib/
test_api:file:///D:/flutter/.pub-cache/hosted/pub.dartlang.org/test_api-0.2.11/lib/
typed_data:file:///D:/flutter/.pub-cache/hosted/pub.dartlang.org/typed_data-1.1.6/lib/
vector_math:file:///D:/flutter/.pub-cache/hosted/pub.dartlang.org/vector_math-2.0.8/lib/
xml:file:///D:/flutter/.pub-cache/hosted/pub.dartlang.org/xml-3.5.0/lib/
flutter_screenutil:lib/
... ...
... ... @@ -2,10 +2,19 @@
* @Author: zhuoyuan93@gmail.com
* @Date: 2018-10-16 19:43:03
* @LastEditors: zhuoyuan93@gmail.com
* @LastEditTime: 2019-11-29 11:42
* @LastEditTime: 2020年1月6日 16:41:02
* @Description: Update log
-->
#1.0.0
- Rebuild code, change API
- Modify the initialization method
- Fix #68
- CompileSdkVersion change to 28
- Change example code
If there is significant impact, please return to 0.7.0
#0.7.0
- Replace textScaleFactory with textScaleFactor , It's a typo.
... ...
... ... @@ -23,7 +23,7 @@ dependencies:
flutter:
sdk: flutter
# add flutter_screenutil
flutter_screenutil: ^0.7.0
flutter_screenutil: ^1.0.0
```
### Add the following imports to your Dart code:
... ... @@ -48,13 +48,13 @@ Be sure to set the page in the MaterialApp's home(ie the entry file, just set it
//fill in the screen size of the device in the design
//default value : width : 1080px , height:1920px , allowFontScaling:false
ScreenUtil.instance = ScreenUtil.getInstance()..init(context);
ScreenUtil.init(context);
//If the design is based on the size of the iPhone6 ​​(iPhone6 ​​750*1334)
ScreenUtil.instance = ScreenUtil(width: 750, height: 1334)..init(context);
ScreenUtil.init(context, width: 750, height: 1334);
//If you want to set the font size is scaled according to the system's "font size" assist option
ScreenUtil.instance = ScreenUtil(width: 750, height: 1334, allowFontScaling: true)..init(context);
ScreenUtil.init(context, width: 750, height: 1334, allowFontScaling: true);
```
... ... @@ -64,12 +64,9 @@ ScreenUtil.instance = ScreenUtil(width: 750, height: 1334, allowFontScaling: tru
Pass the px size of the design draft：
Adapted to screen width: `ScreenUtil.getInstance().setWidth(540)`,
Adapted to screen width: `ScreenUtil().setWidth(540)`,
Adapted to screen height: `ScreenUtil.getInstance().setHeight(200)`,
You can also use `ScreenUtil()` instead of `ScreenUtil.getInstance()`,
for example:`ScreenUtil().setHeight(200)`
Adapted to screen height: `ScreenUtil().setHeight(200)`,
**Note**
... ... @@ -81,15 +78,15 @@ setHeight method is mainly adapted in height, you want to control the height and
//for example:
//rectangle
Container(
width: ScreenUtil.getInstance().setWidth(375),
height: ScreenUtil.getInstance().setHeight(200),
width: ScreenUtil().setWidth(375),
height: ScreenUtil().setHeight(200),
...
),
////If you want to display a square:
Container(
width: ScreenUtil.getInstance().setWidth(300),
height: ScreenUtil.getInstance().setWidth(300),
width: ScreenUtil().setWidth(300),
height: ScreenUtil().setWidth(300),
),
```
... ... @@ -98,11 +95,11 @@ Container(
``` dart
//Incoming font size，the unit is pixel, fonts will not scale to respect Text Size accessibility settings
//(AllowallowFontScaling when initializing ScreenUtil)
ScreenUtil.getInstance().setSp(28)
ScreenUtil().setSp(28)
//Incoming font size，the unit is pixel，fonts will scale to respect Text Size accessibility settings
//(If somewhere does not follow the global allowFontScaling setting)
ScreenUtil(allowFontScaling: true).setSp(28)
ScreenUtil().setSp(24, allowFontScalingSelf: true)
//for example:
... ... @@ -113,18 +110,16 @@ Column(
'My font size is 24px on the design draft and will not change with the system.',
style: TextStyle(
color: Colors.black,
fontSize: ScreenUtil.getInstance().setSp(24),
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(allowFontScaling: true).setSp(24),
)),
color: Colors.black,
fontSize: ScreenUtil()
.setSp(24, allowFontScalingSelf: true))),
],
)
```
#### Other related apis：
... ... @@ -136,39 +131,60 @@ Column(
ScreenUtil.statusBarHeight //Status bar height , Notch will be higher Unit px
ScreenUtil.textScaleFactor //System font scaling factor
ScreenUtil.getInstance().scaleWidth //Ratio of actual width dp to design draft px
ScreenUtil.getInstance().scaleHeight //Ratio of actual height dp to design draft px
ScreenUtil().scaleWidth //Ratio of actual width dp to design draft px
ScreenUtil().scaleHeight //Ratio of actual height dp to design draft px
```
```dart
//import
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
...
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
///Set the fit size (fill in the screen size of the device in the design) If the design is based on the size of the iPhone6 ​​(iPhone6 ​​750*1334)
ScreenUtil.instance = ScreenUtil(width: 750, height: 1334)..init(context);
print('Device width:${ScreenUtil.screenWidth}'); //Device width
print('Device height:${ScreenUtil.screenHeight}'); //Device height
print(
'Device pixel density:${ScreenUtil.pixelRatio}'); //Device pixel density
print(
'Bottom safe zone distance:${ScreenUtil.bottomBarHeight}'); //Bottom safe zone distance，suitable for buttons with full screen
print(
'Status bar height:${ScreenUtil.statusBarHeight}px'); //Status bar height , Notch will be higher Unit px
print(
'Ratio of actual width dp to design draft px:${ScreenUtil.getInstance().scaleWidth}');
print(
'Ratio of actual height dp to design draft px:${ScreenUtil.getInstance().scaleHeight}');
print(
'The ratio of font and width to the size of the design:${ScreenUtil.getInstance().scaleWidth * ScreenUtil.pixelRatio}');
print(
'The ratio of height width to the size of the design:${ScreenUtil.getInstance().scaleHeight * ScreenUtil.pixelRatio}');
return new MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter_ScreenUtil',
theme: new ThemeData(
primarySwatch: Colors.blue,
),
home: new MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => new _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(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);
final String title;
@override
_ExampleWidgetState createState() => _ExampleWidgetState();
}
class _ExampleWidgetState extends State<ExampleWidget> {
@override
Widget build(BuildContext context) {
printScreenInformation();
return new Scaffold(
appBar: new AppBar(
title: new Text(widget.title),
... ... @@ -180,52 +196,48 @@ import 'package:flutter_screenutil/flutter_screenutil.dart';
Row(
children: <Widget>[
Container(
padding: EdgeInsets.all(ScreenUtil.getInstance().setWidth(10)),
width: ScreenUtil.getInstance().setWidth(375),
height: ScreenUtil.getInstance().setHeight(200),
padding: EdgeInsets.all(ScreenUtil().setWidth(10)),
width: ScreenUtil().setWidth(375),
height: ScreenUtil().setHeight(200),
color: Colors.red,
child: Text(
'My width:${ScreenUtil.getInstance().setWidth(375)}dp',
'My width:${ScreenUtil().setWidth(375)}dp \n'
'My height:${ScreenUtil().setHeight(200)}dp',
style: TextStyle(
color: Colors.white,
fontSize: ScreenUtil.getInstance().setSp(12)),
color: Colors.white, fontSize: ScreenUtil().setSp(24)),
),
),
Container(
padding: EdgeInsets.all(ScreenUtil.getInstance().setWidth(10)),
width: ScreenUtil.getInstance().setWidth(375),
height: ScreenUtil.getInstance().setHeight(200),
padding: EdgeInsets.all(ScreenUtil().setWidth(10)),
width: ScreenUtil().setWidth(375),
height: ScreenUtil().setHeight(200),
color: Colors.blue,
child: Text('My width:${ScreenUtil.getInstance().setWidth(375)}dp',
child: Text(
'My width:${ScreenUtil().setWidth(375)}dp \n'
'My height:${ScreenUtil().setHeight(200)}dp',
style: TextStyle(
color: Colors.white,
fontSize: ScreenUtil.getInstance().setSp(12))),
fontSize: ScreenUtil().setSp(24))),
),
],
),
Text('Device width:${ScreenUtil.screenWidth}px'),
Text('Device height:${ScreenUtil.screenHeight}px'),
Text('Device width:${ScreenUtil.screenWidthDp}dp'),
Text('Device height:${ScreenUtil.screenHeightDp}dp'),
Text('Device pixel density:${ScreenUtil.pixelRatio}'),
Text('Bottom safe zone distance:${ScreenUtil.bottomBarHeight}px'),
Text('Status bar height:${ScreenUtil.statusBarHeight}px'),
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.getInstance().scaleWidth}',
'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.getInstance().scaleHeight}',
textAlign: TextAlign.center,
),
Text(
'The ratio of font and width to the size of the design:${ScreenUtil.getInstance().scaleWidth * ScreenUtil.pixelRatio}',
textAlign: TextAlign.center,
),
Text(
'The ratio of height width to the size of the design:${ScreenUtil.getInstance().scaleHeight * ScreenUtil.pixelRatio}',
'Ratio of actual height dp to design draft px:${ScreenUtil().scaleHeight}',
textAlign: TextAlign.center,
),
SizedBox(
height: ScreenUtil.getInstance().setHeight(100),
height: ScreenUtil().setHeight(100),
),
Text('System font scaling factor:${ScreenUtil.textScaleFactor}'),
Column(
... ... @@ -235,27 +247,57 @@ import 'package:flutter_screenutil/flutter_screenutil.dart';
'My font size is 24px on the design draft and will not change with the system.',
style: TextStyle(
color: Colors.black,
fontSize: ScreenUtil.getInstance().setSp(24),
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(allowFontScaling: true).setSp(24),
)),
color: Colors.black,
fontSize: ScreenUtil()
.setSp(24, allowFontScalingSelf: true))),
],
)
],
),
),
floatingActionButton: FloatingActionButton(
child: Icon(Icons.title),
onPressed: () {
ScreenUtil.init(context,
width: 1500, height: 1334, allowFontScaling: false);
setState(() {});
},
),
);
}
void printScreenInformation() {
print('Device width px:${ScreenUtil.screenWidth}'); //Device width
print('Device height px:${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}');
}
}
```
### example:
[example demo](/example/lib/main_zh.dart)
[example demo](/example/lib/main.dart)
effect:
![效果](demo_en.png)
![effect](demo_en.png)
![tablet effect](demo_tablet_en.png)
\ No newline at end of file
... ...
... ... @@ -27,7 +27,7 @@ dependencies:
flutter:
sdk: flutter
# 添加依赖
flutter_screenutil: ^0.7.0
flutter_screenutil: ^1.0.0
```
### 在每个使用的地方导入包：
... ... @@ -51,13 +51,13 @@ import 'package:flutter_screenutil/flutter_screenutil.dart';
//填入设计稿中设备的屏幕尺寸
//默认 width : 1080px , height:1920px , allowFontScaling:false
ScreenUtil.instance = ScreenUtil.getInstance()..init(context);
ScreenUtil.init(context);
//假如设计稿是按iPhone6的尺寸设计的(iPhone6 750*1334)
ScreenUtil.instance = ScreenUtil(width: 750, height: 1334)..init(context);
ScreenUtil.init(context, width: 750, height: 1334);
//设置字体大小根据系统的“字体大小”辅助选项来进行缩放,默认为false
ScreenUtil.instance = ScreenUtil(width: 750, height: 1334, allowFontScaling: true)..init(context);
ScreenUtil.init(context, width: 750, height: 1334, allowFontScaling: true);
```
... ... @@ -67,12 +67,9 @@ ScreenUtil.instance = ScreenUtil(width: 750, height: 1334, allowFontScaling: tru
传入设计稿的px尺寸：
根据屏幕宽度适配 `width: ScreenUtil.getInstance().setWidth(540)`,
根据屏幕宽度适配 `width: ScreenUtil().setWidth(540)`,
根据屏幕高度适配 `height: ScreenUtil.getInstance().setHeight(200)`,
也可以使用 `ScreenUtil()` 替代 `ScreenUtil.getInstance()`,
例如：`ScreenUtil().setHeight(200)`
根据屏幕高度适配 `height: ScreenUtil().setHeight(200)`,
**注意**
... ... @@ -83,16 +80,16 @@ setHeight譁ｹ豕穂ｸｻ隕∵弍蝨ｨ鬮伜ｺｦ荳願ｿ幄｡碁る, 蝨ｨ菴諠ｳ謗ｧ蛻ｶUI荳贋ｸ螻冗噪
例如:
```
//长方形:
//UI上是长方形:
Container(
width: ScreenUtil.getInstance().setWidth(375),
height: ScreenUtil.getInstance().setHeight(200),
width: ScreenUtil().setWidth(375),
height: ScreenUtil().setHeight(200),
),
//如果你想显示一个正方形:
Container(
width: ScreenUtil.getInstance().setWidth(300),
height: ScreenUtil.getInstance().setWidth(300),
width: ScreenUtil().setWidth(300),
height: ScreenUtil().setWidth(300),
),
```
... ... @@ -101,26 +98,28 @@ Container(
```
//传入字体大小，默认不根据系统的“字体大小”辅助选项来进行缩放(可在初始化ScreenUtil时设置allowFontScaling)
ScreenUtil.getInstance().setSp(28)
ScreenUtil().setSp(28)
//传入字体大小，根据系统的“字体大小”辅助选项来进行缩放(如果某个地方不遵循全局的allowFontScaling设置)
ScreenUtil(allowFontScaling: true).setSp(28)
//传入字体大小，根据系统的“字体大小”辅助选项来进行缩放(如果某个地方不遵循全局的allowFontScaling设置)
ScreenUtil().setSp(24, allowFontScalingSelf: true)
//for example:
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text('我的文字大小在设计稿上是25px，不会随着系统的文字缩放比例变化',
Text('我的文字大小在设计稿上是24px，不会随着系统的文字缩放比例变化',
style: TextStyle(
color: Colors.black, fontSize: ScreenUtil.getInstance().setSp(24))),
Text('我的文字大小在设计稿上是25px，会随着系统的文字缩放比例变化',
color: Colors.black,
fontSize: ScreenUtil().setSp(24),
)),
Text('我的文字大小在设计稿上是24px，会随着系统的文字缩放比例变化',
style: TextStyle(
color: Colors.black, fontSize: ScreenUtil(allowFontScaling: true).setSp(24))),
color: Colors.black,
fontSize: ScreenUtil()
.setSp(24, allowFontScalingSelf: true))),
],
)
```
#### 其他相关api：
... ... @@ -132,39 +131,65 @@ Column(
ScreenUtil.statusBarHeight //状态栏高度 刘海屏会更高 单位px
ScreenUtil.textScaleFactor //系统字体缩放比例
ScreenUtil.getInstance().scaleWidth // 实际宽度的dp与设计稿px的比例
ScreenUtil.getInstance().scaleHeight // 实际高度的dp与设计稿px的比例
ScreenUtil().scaleWidth // 实际宽度的dp与设计稿px的比例
ScreenUtil().scaleHeight // 实际高度的dp与设计稿px的比例
```
```dart
//导入
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
...
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
//设置适配尺寸 (填入设计稿中设备的屏幕尺寸) 假如设计稿是按iPhone6的尺寸设计的(iPhone6 750*1334)
ScreenUtil.instance = ScreenUtil(width: 750, height: 1334)..init(context);
print('设备宽度:${ScreenUtil.screenWidth}'); //Device width
print('设备高度:${ScreenUtil.screenHeight}'); //Device height
print('设备的像素密度:${ScreenUtil.pixelRatio}'); //Device pixel density
print(
'底部安全区距离:${ScreenUtil.bottomBarHeight}'); //Bottom safe zone distance，suitable for buttons with full screen
print(
'状态栏高度:${ScreenUtil.statusBarHeight}px'); //Status bar height , Notch will be higher Unit px
return new MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter_ScreenUtil',
theme: new ThemeData(
primarySwatch: Colors.blue,
),
home: new MyHomePage(),
);
}
}
print('实际宽度的dp与设计稿px的比例:${ScreenUtil.getInstance().scaleWidth}');
print('实际高度的dp与设计稿px的比例:${ScreenUtil.getInstance().scaleHeight}');
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
print(
'宽度和字体相对于设计稿放大的比例:${ScreenUtil.getInstance().scaleWidth * ScreenUtil.pixelRatio}');
print(
'高度相对于设计稿放大的比例:${ScreenUtil.getInstance().scaleHeight * ScreenUtil.pixelRatio}');
print('系统的字体缩放比例:${ScreenUtil.textScaleFactor}');
final String title;
@override
_MyHomePageState createState() => new _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
//设置适配尺寸 (填入设计稿中设备的屏幕尺寸) 此处假如设计稿是按iPhone6的尺寸设计的(iPhone6 750*1334)
ScreenUtil.init(context, width: 750, height: 1334, allowFontScaling: false);
ScreenUtil.init(context);
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);
final String title;
@override
_ExampleWidgetState createState() => _ExampleWidgetState();
}
class _ExampleWidgetState extends State<ExampleWidget> {
@override
Widget build(BuildContext context) {
printScreenInformation();
return new Scaffold(
appBar: new AppBar(
title: new Text(widget.title),
... ... @@ -176,72 +201,98 @@ import 'package:flutter_screenutil/flutter_screenutil.dart';
Row(
children: <Widget>[
Container(
padding: EdgeInsets.all(ScreenUtil.getInstance().setWidth(10)),
width: ScreenUtil.getInstance().setWidth(375),
height: ScreenUtil.getInstance().setHeight(200),
padding: EdgeInsets.all(ScreenUtil().setWidth(10)),
width: ScreenUtil().setWidth(375),
height: ScreenUtil().setHeight(200),
color: Colors.red,
child: Text(
'我的宽度:${ScreenUtil.getInstance().setWidth(375)}dp',
'我的宽度:${ScreenUtil().setWidth(375)}dp \n'
'我的高度:${ScreenUtil().setHeight(200)}dp',
style: TextStyle(
color: Colors.white,
fontSize: ScreenUtil.getInstance().setSp(12),
),
color: Colors.white, fontSize: ScreenUtil().setSp(24)),
),
),
Container(
padding: EdgeInsets.all(ScreenUtil.getInstance().setWidth(10)),
width: ScreenUtil.getInstance().setWidth(375),
height: ScreenUtil.getInstance().setHeight(200),
padding: EdgeInsets.all(ScreenUtil().setWidth(10)),
width: ScreenUtil().setWidth(375),
height: ScreenUtil().setHeight(200),
color: Colors.blue,
child: Text('我的宽度:${ScreenUtil.getInstance().setWidth(375)}dp',
child: Text(
'我的宽度:${ScreenUtil().setWidth(375)}dp \n'
'我的高度:${ScreenUtil().setHeight(200)}dp',
style: TextStyle(
color: Colors.white,
fontSize: ScreenUtil.getInstance().setSp(12),
)),
color: Colors.white,
fontSize: ScreenUtil().setSp(24))),
),
],
),
Text('设备宽度:${ScreenUtil.screenWidth}px'),
Text('设备高度:${ScreenUtil.screenHeight}px'),
Text('设备宽度:${ScreenUtil.screenWidthDp}dp'),
Text('设备高度:${ScreenUtil.screenHeightDp}dp'),
Text('设备的像素密度:${ScreenUtil.pixelRatio}'),
Text('底部安全区距离:${ScreenUtil.bottomBarHeight}px'),
Text('状态栏高度:${ScreenUtil.statusBarHeight}px'),
Text(
'实际高度的dp与设计稿px的比例:${ScreenUtil.getInstance().scaleHeight}',
textAlign: TextAlign.center,
),
Text('底部安全区距离:${ScreenUtil.bottomBarHeight}dp'),
Text('状态栏高度:${ScreenUtil.statusBarHeight}dp'),
Text(
'实际高度的dp与设计稿px的比例:${ScreenUtil.getInstance().scaleHeight}',
'实际宽度的dp与设计稿px的比例:${ScreenUtil().scaleWidth}',
textAlign: TextAlign.center,
),
Text(
'宽度和字体相对于设计稿放大的比例:${ScreenUtil.getInstance().scaleWidth * ScreenUtil.pixelRatio}',
textAlign: TextAlign.center,
),
Text(
'高度相对于设计稿放大的比例:${ScreenUtil.getInstance().scaleHeight * ScreenUtil.pixelRatio}',
'实际高度的dp与设计稿px的比例:${ScreenUtil().scaleHeight}',
textAlign: TextAlign.center,
),
SizedBox(
height: ScreenUtil.getInstance().setHeight(100),
height: ScreenUtil().setHeight(100),
),
Text('系统的字体缩放比例:${ScreenUtil.textScaleFactor}'),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text('我的文字大小在设计稿上是24px，不会随着系统的文字缩放比例变化',
style: TextStyle(
color: Colors.black, fontSize: ScreenUtil.getInstance().setSp(24))),
Text('我的文字大小在设计稿上是24px，会随着系统的文字缩放比例变化',
style: TextStyle(
color: Colors.black, fontSize: ScreenUtil(allowFontScaling: true).setSp(24))),
],
)
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text('我的文字大小在设计稿上是24px，不会随着系统的文字缩放比例变化',
style: TextStyle(
color: Colors.black,
fontSize: ScreenUtil().setSp(24),
)),
Text('我的文字大小在设计稿上是24px，会随着系统的文字缩放比例变化',
style: TextStyle(
color: Colors.black,
fontSize: ScreenUtil()
.setSp(24, allowFontScalingSelf: true))),
],
)
],
),
),
floatingActionButton: FloatingActionButton(
child: Icon(Icons.title),
onPressed: () {
ScreenUtil.init(context,
width: 1500, height: 1334, allowFontScaling: false);
setState(() {});
},
),
);
}
void printScreenInformation() {
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
print(
'状态栏高度:${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}');
}
}
```
### 使用示例:
... ... @@ -250,5 +301,5 @@ import 'package:flutter_screenutil/flutter_screenutil.dart';
效果:
![效果](demo_zh.png)
![手机效果](demo_zh.png)
![平板效果](demo_tablet_zh.png)
... ...
... ... @@ -23,7 +23,7 @@ dependencies:
flutter:
sdk: flutter
# add flutter_screenutil
flutter_screenutil: ^0.7.0
flutter_screenutil: ^1.0.0
```
### Adicione o seguinte import em seu código Dart:
... ... @@ -48,13 +48,13 @@ Certifique-se de definir as dimensões na paginal inicial do MaterialApp (ou sej
//Preencha o tamanho da tela do dispositivo no protótipo de design
//Valor padrão: width : 1080px , height:1920px , allowFontScaling:false
ScreenUtil.instance = ScreenUtil.getInstance()..init(context);
ScreenUtil.init(context);
//Se o design é baseado no iPhone6 ​​(iPhone6 ​​750*1334)
ScreenUtil.instance = ScreenUtil(width: 750, height: 1334)..init(context);
ScreenUtil.init(context, width: 750, height: 1334);
//Se você quer definir que o tamanho da fonte seja ajustado de acordo com a opção "tamanho da fonte" na acessibilidade do sistema
ScreenUtil.instance = ScreenUtil(width: 750, height: 1334, allowFontScaling: true)..init(context);
ScreenUtil.init(context, width: 750, height: 1334, allowFontScaling: true);
```
... ... @@ -64,12 +64,9 @@ ScreenUtil.instance = ScreenUtil(width: 750, height: 1334, allowFontScaling: tru
Informe o tamanho em pixels do protótipo de design:
Adaptado à largura da tela: `ScreenUtil.getInstance().setWidth(540)`,
Adaptado à largura da tela: `ScreenUtil().setWidth(540)`,
Adaptado à altura da tela: `ScreenUtil.getInstance().setHeight(200)`,
Você também pode utilizar `ScreenUtil()` ao invés de `ScreenUtil.getInstance()`,
por exemplo:`ScreenUtil().setHeight(200)`
Adaptado à altura da tela: `ScreenUtil().setHeight(200)`,
**Nota**
... ... @@ -81,15 +78,15 @@ O método setHeight é a principal forma de adaptar a altura, se quiser controla
//Exemplo:
//Retângulo
Container(
width: ScreenUtil.getInstance().setWidth(375),
height: ScreenUtil.getInstance().setHeight(200),
width: ScreenUtil().setWidth(375),
height: ScreenUtil().setHeight(200),
...
),
////Se quiser exibir um quadrado:
Container(
width: ScreenUtil.getInstance().setWidth(300),
height: ScreenUtil.getInstance().setWidth(300),
width: ScreenUtil().setWidth(300),
height: ScreenUtil().setWidth(300),
),
```
... ... @@ -98,11 +95,11 @@ Container(
``` dart
//Tamanho da fonte informado, em pixels, a fonte não irá dimensionar respeitando a opção "Tamanho de Fonte" nas configurações de acessibilidade
//(allowFontScaling quando iniciar o ScreenUtil)
ScreenUtil.getInstance().setSp(28)
ScreenUtil().setSp(28)
//Tamanho da fonte informado，em pixels，a fonte irá dimensionar respeitando a opção "Tamanho de Fonte" nas configurações de acessibilidade
//(Se em algum lugar não seguir a configuração global da propriedade allowFontScaling)
ScreenUtil(allowFontScaling: true).setSp(28)
ScreenUtil().setSp(24, allowFontScalingSelf: true)
//Exemplo:
... ... @@ -113,18 +110,16 @@ Column(
'Minha fonte tem 24px no protótipo de design e não irá mudar com o sistema.',
style: TextStyle(
color: Colors.black,
fontSize: ScreenUtil.getInstance().setSp(24),
fontSize: ScreenUtil().setSp(24),
)),
Text(
'Minha fonte tem 24px no protótipo de design e poderá mudar com o sistema.',
style: TextStyle(
color: Colors.black,
fontSize: ScreenUtil(allowFontScaling: true).setSp(24),
)),
color: Colors.black,
fontSize: ScreenUtil()
.setSp(24, allowFontScalingSelf: true))),
],
)
```
#### Outras APIs relacionadas：
... ... @@ -136,8 +131,8 @@ Column(
ScreenUtil.statusBarHeight //Altura da status bar em pixels, Notch será maior
ScreenUtil.textScaleFactor //Fator de escala da fonte do sistema
ScreenUtil.getInstance().scaleWidth //Razão entre a largura atual e a largura do protótipo de design em pixels
ScreenUtil.getInstance().scaleHeight //Razão entre a altura atual e a altura do protótipo de design em pixels
ScreenUtil().scaleWidth //Razão entre a largura atual e a largura do protótipo de design em pixels
ScreenUtil().scaleHeight //Razão entre a altura atual e a altura do protótipo de design em pixels
```
... ... @@ -150,7 +145,7 @@ import 'package:flutter_screenutil/flutter_screenutil.dart';
@override
Widget build(BuildContext context) {
///Define o tamanho de ajuste (preenche o tamanho da tela do dispositivo no design). Se o design é baseado no tamanho do iPhone6 (iPhone6 ​​750*1334)
ScreenUtil.instance = ScreenUtil(width: 750, height: 1334)..init(context);
ScreenUtil.init(context, width: 750, height: 1334, allowFontScaling: false);
print('Largura do dispositivo:${ScreenUtil.screenWidth}'); //Largura do dispositivo
print('Altura do dispositivo:${ScreenUtil.screenHeight}'); //Altura do dispositivo
... ... @@ -161,13 +156,13 @@ import 'package:flutter_screenutil/flutter_screenutil.dart';
print(
'Altura da status bar:${ScreenUtil.statusBarHeight}px'); //Altura da status bar em pixels, Notch será maior
print(
'Razão entre a largura atual e a largura do protótipo de design em pixels:${ScreenUtil.getInstance().scaleWidth}');
'Razão entre a largura atual e a largura do protótipo de design em pixels:${ScreenUtil().scaleWidth}');
print(
'Razão entre a altura atual e a altura do protótipo de design em pixels:${ScreenUtil.getInstance().scaleHeight}');
'Razão entre a altura atual e a altura do protótipo de design em pixels:${ScreenUtil().scaleHeight}');
print(
'Razão da fonte e largura para o tamanho do design:${ScreenUtil.getInstance().scaleWidth * ScreenUtil.pixelRatio}');
'Razão da fonte e largura para o tamanho do design:${ScreenUtil().scaleWidth * ScreenUtil.pixelRatio}');
print(
'Razão da fonte e altura para o tamanho do design:${ScreenUtil.getInstance().scaleHeight * ScreenUtil.pixelRatio}');
'Razão da fonte e altura para o tamanho do design:${ScreenUtil().scaleHeight * ScreenUtil.pixelRatio}');
return new Scaffold(
appBar: new AppBar(
... ... @@ -180,26 +175,26 @@ import 'package:flutter_screenutil/flutter_screenutil.dart';
Row(
children: <Widget>[
Container(
padding: EdgeInsets.all(ScreenUtil.getInstance().setWidth(10)),
width: ScreenUtil.getInstance().setWidth(375),
height: ScreenUtil.getInstance().setHeight(200),
padding: EdgeInsets.all(ScreenUtil().setWidth(10)),
width: ScreenUtil().setWidth(375),
height: ScreenUtil().setHeight(200),
color: Colors.red,
child: Text(
'Minha largura:${ScreenUtil.getInstance().setWidth(375)}dp',
'Minha largura:${ScreenUtil().setWidth(375)}dp',
style: TextStyle(
color: Colors.white,
fontSize: ScreenUtil.getInstance().setSp(12)),
fontSize: ScreenUtil().setSp(12)),
),
),
Container(
padding: EdgeInsets.all(ScreenUtil.getInstance().setWidth(10)),
width: ScreenUtil.getInstance().setWidth(375),
height: ScreenUtil.getInstance().setHeight(200),
padding: EdgeInsets.all(ScreenUtil().setWidth(10)),
width: ScreenUtil().setWidth(375),
height: ScreenUtil().setHeight(200),
color: Colors.blue,
child: Text('Minha largura:${ScreenUtil.getInstance().setWidth(375)}dp',
child: Text('Minha largura:${ScreenUtil().setWidth(375)}dp',
style: TextStyle(
color: Colors.white,
fontSize: ScreenUtil.getInstance().setSp(12))),
fontSize: ScreenUtil().setSp(12))),
),
],
),
... ... @@ -209,23 +204,23 @@ import 'package:flutter_screenutil/flutter_screenutil.dart';
Text('Distância segura do rodapé:${ScreenUtil.bottomBarHeight}px'),
Text('Altura da status bar:${ScreenUtil.statusBarHeight}px'),
Text(
'Razão entre a largura atual e a largura do protótipo de design em pixels:${ScreenUtil.getInstance().scaleWidth}',
'Razão entre a largura atual e a largura do protótipo de design em pixels:${ScreenUtil().scaleWidth}',
textAlign: TextAlign.center,
),
Text(
'Razão entre a altura atual e a altura do protótipo de design em pixels:${ScreenUtil.getInstance().scaleHeight}',
'Razão entre a altura atual e a altura do protótipo de design em pixels:${ScreenUtil().scaleHeight}',
textAlign: TextAlign.center,
),
Text(
'Razão da fonte e largura para o tamanho do design:${ScreenUtil.getInstance().scaleWidth * ScreenUtil.pixelRatio}',
'Razão da fonte e largura para o tamanho do design:${ScreenUtil().scaleWidth * ScreenUtil.pixelRatio}',
textAlign: TextAlign.center,
),
Text(
'Razão da fonte e altura para o tamanho do design:${ScreenUtil.getInstance().scaleHeight * ScreenUtil.pixelRatio}',
'Razão da fonte e altura para o tamanho do design:${ScreenUtil().scaleHeight * ScreenUtil.pixelRatio}',
textAlign: TextAlign.center,
),
SizedBox(
height: ScreenUtil.getInstance().setHeight(100),
height: ScreenUtil().setHeight(100),
),
Text('Fator de escala da fonte do sistema:${ScreenUtil.textScaleFactor}'),
Column(
... ... @@ -235,13 +230,13 @@ import 'package:flutter_screenutil/flutter_screenutil.dart';
'Minha fonte tem 24px no protótipo de design e não irá mudar com o sistema.',
style: TextStyle(
color: Colors.black,
fontSize: ScreenUtil.getInstance().setSp(24),
fontSize: ScreenUtil().setSp(24),
)),
Text(
'Minha fonte tem 24px no protótipo de design e poderá mudar com o sistema.',
style: TextStyle(
color: Colors.black,
fontSize: ScreenUtil(allowFontScaling: true).setSp(24),
fontSize: ScreenUtil().setSp(24, allowFontScalingSelf: true),
)),
],
)
... ... @@ -259,3 +254,4 @@ import 'package:flutter_screenutil/flutter_screenutil.dart';
Efeito:
![效果](demo_en.png)
![tablet effect](demo_tablet_en.png)
\ No newline at end of file
... ...

67.8 KB | W: | H:

110 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin

67.6 KB | W: | H:

113 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
# example
flutter_screenutil的使用示例
flutter_screenutil example
![效果](../demo_zh.png)
![effect](../demo_en.png)
![手机效果](../demo_zh.png)
![phone effect](../demo_en.png)
![平板效果](../demo_tablet_zh.png)
![tablet effect](../demo_tablet_en.png)
## Getting Started
For help getting started with Flutter, view our online
[documentation](https://flutter.io/).
... ...
... ... @@ -25,7 +25,7 @@ apply plugin: 'com.android.application'
apply from: "$flutterRoot/packages/flutter_tools/gradle/flutter.gradle"
android {
compileSdkVersion 27
compileSdkVersion 28
lintOptions {
disable 'InvalidPackage'
... ... @@ -35,7 +35,7 @@ android {
// TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html).
applicationId "li.zhuoyuan.example"
minSdkVersion 16
targetSdkVersion 27
targetSdkVersion 28
versionCode flutterVersionCode.toInteger()
versionName flutterVersionName
testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
... ...
org.gradle.jvmargs=-Xmx1536M
android.enableR8=true
... ...
... ... @@ -4,7 +4,6 @@ import 'package:flutter_screenutil/flutter_screenutil.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return new MaterialApp(
... ... @@ -13,16 +12,12 @@ class MyApp extends StatelessWidget {
theme: new ThemeData(
primarySwatch: Colors.blue,
),
home: new MyHomePage(title: 'FlutterScreenUtil Demo'),
home: new MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => new _MyHomePageState();
}
... ... @@ -30,26 +25,26 @@ class MyHomePage extends StatefulWidget {
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.instance = ScreenUtil(width: 750, height: 1334)..init(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);
print('Device width px:${ScreenUtil.screenWidth}'); //Device width
print('Device height px:${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.getInstance().scaleWidth}');
print(
'Ratio of actual height dp to design draft px:${ScreenUtil.getInstance().scaleHeight}');
print(
'The ratio of font and width to the size of the design:${ScreenUtil.getInstance().scaleWidth * ScreenUtil.pixelRatio}');
print(
'The ratio of height width to the size of the design:${ScreenUtil.getInstance().scaleHeight * ScreenUtil.pixelRatio}');
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 new Scaffold(
appBar: new AppBar(
title: new Text(widget.title),
... ... @@ -61,29 +56,28 @@ class _MyHomePageState extends State<MyHomePage> {
Row(
children: <Widget>[
Container(
padding:
EdgeInsets.all(ScreenUtil.getInstance().setWidth(10)),
width: ScreenUtil.getInstance().setWidth(375),
height: ScreenUtil.getInstance().setHeight(200),
padding: EdgeInsets.all(ScreenUtil().setWidth(10)),
width: ScreenUtil().setWidth(375),
height: ScreenUtil().setHeight(200),
color: Colors.red,
child: Text(
'My width:${ScreenUtil.getInstance().setWidth(375)}dp',
'My width:${ScreenUtil().setWidth(375)}dp \n'
'My height:${ScreenUtil().setHeight(200)}dp',
style: TextStyle(
color: Colors.white,
fontSize: ScreenUtil.getInstance().setSp(24)),
color: Colors.white, fontSize: ScreenUtil().setSp(24)),
),
),
Container(
padding:
EdgeInsets.all(ScreenUtil.getInstance().setWidth(10)),
width: ScreenUtil.getInstance().setWidth(375),
height: ScreenUtil.getInstance().setHeight(200),
padding: EdgeInsets.all(ScreenUtil().setWidth(10)),
width: ScreenUtil().setWidth(375),
height: ScreenUtil().setHeight(200),
color: Colors.blue,
child: Text(
'My width:${ScreenUtil.getInstance().setWidth(375)}dp',
'My width:${ScreenUtil().setWidth(375)}dp \n'
'My height:${ScreenUtil().setHeight(200)}dp',
style: TextStyle(
color: Colors.white,
fontSize: ScreenUtil.getInstance().setSp(24))),
fontSize: ScreenUtil().setSp(24))),
),
],
),
... ... @@ -95,15 +89,15 @@ class _MyHomePageState extends State<MyHomePage> {
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.getInstance().scaleWidth}',
'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.getInstance().scaleHeight}',
'Ratio of actual height dp to design draft px:${ScreenUtil().scaleHeight}',
textAlign: TextAlign.center,
),
SizedBox(
height: ScreenUtil.getInstance().setHeight(100),
height: ScreenUtil().setHeight(100),
),
Text('System font scaling factor:${ScreenUtil.textScaleFactor}'),
Column(
... ... @@ -113,19 +107,46 @@ class _MyHomePageState extends State<MyHomePage> {
'My font size is 24px on the design draft and will not change with the system.',
style: TextStyle(
color: Colors.black,
fontSize: ScreenUtil.getInstance().setSp(24),
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(allowFontScaling: true).setSp(24),
)),
color: Colors.black,
fontSize: ScreenUtil()
.setSp(24, allowFontScalingSelf: true))),
],
)
],
),
),
floatingActionButton: FloatingActionButton(
child: Icon(Icons.title),
onPressed: () {
ScreenUtil.init(context,
width: 1500, height: 1334, allowFontScaling: false);
setState(() {});
},
),
);
}
void printScreenInformation() {
print('Device width px:${ScreenUtil.screenWidth}'); //Device width
print('Device height px:${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}');
}
}
... ...
... ... @@ -4,7 +4,6 @@ import 'package:flutter_screenutil/flutter_screenutil.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return new MaterialApp(
... ... @@ -13,7 +12,7 @@ class MyApp extends StatelessWidget {
theme: new ThemeData(
primarySwatch: Colors.blue,
),
home: new MyHomePage(title: 'FlutterScreenUtil Demo'),
home: new MyHomePage(),
);
}
}
... ... @@ -30,36 +29,31 @@ class MyHomePage extends StatefulWidget {
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
//设置适配尺寸 (填入设计稿中设备的屏幕尺寸) 假如设计稿是按iPhone6的尺寸设计的(iPhone6 750*1334)
ScreenUtil.instance = ScreenUtil(width: 750, height: 1334)..init(context);
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
print(
'状态栏高度:${ScreenUtil.statusBarHeight}dp'); //Status bar height , Notch will be higher Unit px
//设置适配尺寸 (填入设计稿中设备的屏幕尺寸) 此处假如设计稿是按iPhone6的尺寸设计的(iPhone6 750*1334)
ScreenUtil.init(context, width: 750, height: 1334, allowFontScaling: false);
ScreenUtil.init(context);
ScreenUtil.init(context, width: 750, height: 1334, allowFontScaling: false);
print('实际宽度的dp与设计稿px的比例:${ScreenUtil.getInstance().scaleWidth}');
print('实际高度的dp与设计稿px的比例:${ScreenUtil.getInstance().scaleHeight}');
return ExampleWidget(title: 'FlutterScreenUtil示例');
}
}
print(
'宽度和字体相对于设计稿放大的比例:${ScreenUtil.getInstance().scaleWidth * ScreenUtil.pixelRatio}');
print(
'高度相对于设计稿放大的比例:${ScreenUtil.getInstance().scaleHeight * ScreenUtil.pixelRatio}');
print('系统的字体缩放比例:${ScreenUtil.textScaleFactor}');
class ExampleWidget extends StatefulWidget {
const ExampleWidget({Key key, this.title}) : super(key: key);
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
print(
'ScreenUtil.getInstance().width：${ScreenUtil.getInstance().width}');
print('ScreenUtil().width：${ScreenUtil().width}');
},
child: Icon(Icons.accessible_forward),
final String title;
@override
_ExampleWidgetState createState() => _ExampleWidgetState();
}
class _ExampleWidgetState extends State<ExampleWidget> {
@override
Widget build(BuildContext context) {
printScreenInformation();
return new Scaffold(
appBar: new AppBar(
title: new Text(widget.title),
),
body: new Center(
child: Column(
... ... @@ -68,31 +62,28 @@ class _MyHomePageState extends State<MyHomePage> {
Row(
children: <Widget>[
Container(
padding:
EdgeInsets.all(ScreenUtil.getInstance().setWidth(10)),
width: ScreenUtil.getInstance().setWidth(375),
height: ScreenUtil.getInstance().setHeight(200),
padding: EdgeInsets.all(ScreenUtil().setWidth(10)),
width: ScreenUtil().setWidth(375),
height: ScreenUtil().setHeight(200),
color: Colors.red,
child: Text(
'我的宽度:${ScreenUtil.getInstance().setWidth(375)}dp',
'我的宽度:${ScreenUtil().setWidth(375)}dp \n'
'我的高度:${ScreenUtil().setHeight(200)}dp',
style: TextStyle(
color: Colors.white,
fontSize: ScreenUtil.getInstance().setSp(24),
),
color: Colors.white, fontSize: ScreenUtil().setSp(24)),
),
),
Container(
padding:
EdgeInsets.all(ScreenUtil.getInstance().setWidth(10)),
width: ScreenUtil.getInstance().setWidth(375),
height: ScreenUtil.getInstance().setHeight(200),
padding: EdgeInsets.all(ScreenUtil().setWidth(10)),
width: ScreenUtil().setWidth(375),
height: ScreenUtil().setHeight(200),
color: Colors.blue,
child:
Text('我的宽度:${ScreenUtil.getInstance().setWidth(375)}dp',
style: TextStyle(
color: Colors.white,
fontSize: ScreenUtil.getInstance().setSp(24),
)),
child: Text(
'我的宽度:${ScreenUtil().setWidth(375)}dp \n'
'我的高度:${ScreenUtil().setHeight(200)}dp',
style: TextStyle(
color: Colors.white,
fontSize: ScreenUtil().setSp(24))),
),
],
),
... ... @@ -100,20 +91,19 @@ class _MyHomePageState extends State<MyHomePage> {
Text('设备高度:${ScreenUtil.screenHeight}px'),
Text('设备宽度:${ScreenUtil.screenWidthDp}dp'),
Text('设备高度:${ScreenUtil.screenHeightDp}dp'),
Text('设计稿宽度:${ScreenUtil.getInstance().width}'),
Text('设备的像素密度:${ScreenUtil.pixelRatio}'),
Text('底部安全区距离:${ScreenUtil.bottomBarHeight}dp'),
Text('状态栏高度:${ScreenUtil.statusBarHeight}dp'),
Text(
'实际宽度的dp与设计稿px的比例:${ScreenUtil.getInstance().scaleWidth}',
'实际宽度的dp与设计稿px的比例:${ScreenUtil().scaleWidth}',
textAlign: TextAlign.center,
),
Text(
'实际高度的dp与设计稿px的比例:${ScreenUtil.getInstance().scaleHeight}',
'实际高度的dp与设计稿px的比例:${ScreenUtil().scaleHeight}',
textAlign: TextAlign.center,
),
SizedBox(
height: ScreenUtil.getInstance().setHeight(100),
height: ScreenUtil().setHeight(100),
),
Text('系统的字体缩放比例:${ScreenUtil.textScaleFactor}'),
Column(
... ... @@ -121,18 +111,45 @@ class _MyHomePageState extends State<MyHomePage> {
children: <Widget>[
Text('我的文字大小在设计稿上是24px，不会随着系统的文字缩放比例变化',
style: TextStyle(
color: Colors.black,
fontSize: ScreenUtil.getInstance().setSp(24))),
color: Colors.black,
fontSize: ScreenUtil().setSp(24),
)),
Text('我的文字大小在设计稿上是24px，会随着系统的文字缩放比例变化',
style: TextStyle(
color: Colors.black,
fontSize:
ScreenUtil(allowFontScaling: true).setSp(24))),
fontSize: ScreenUtil()
.setSp(24, allowFontScalingSelf: true))),
],
)
],
),
),
floatingActionButton: FloatingActionButton(
child: Icon(Icons.title),
onPressed: () {
ScreenUtil.init(context,
width: 1500, height: 1334, allowFontScaling: false);
setState(() {});
},
),
);
}
void printScreenInformation() {
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
print(
'状态栏高度:${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}');
}
}
... ...
# Generated by pub
# See https://dart.dev/tools/pub/glossary#lockfile
packages:
archive:
dependency: transitive
description:
name: archive
url: "https://pub.dartlang.org"
source: hosted
version: "2.0.11"
args:
dependency: transitive
description:
name: args
url: "https://pub.dartlang.org"
source: hosted
version: "1.5.2"
async:
dependency: transitive
description:
name: async
url: "https://pub.flutter-io.cn"
url: "https://pub.dartlang.org"
source: hosted
version: "2.3.0"
version: "2.4.0"
boolean_selector:
dependency: transitive
description:
name: boolean_selector
url: "https://pub.flutter-io.cn"
url: "https://pub.dartlang.org"
source: hosted
version: "1.0.5"
charcode:
dependency: transitive
description:
name: charcode
url: "https://pub.flutter-io.cn"
url: "https://pub.dartlang.org"
source: hosted
version: "1.1.2"
collection:
dependency: transitive
description:
name: collection
url: "https://pub.flutter-io.cn"
url: "https://pub.dartlang.org"
source: hosted
version: "1.14.11"
convert:
dependency: transitive
description:
name: convert
url: "https://pub.dartlang.org"
source: hosted
version: "2.1.1"
crypto:
dependency: transitive
description:
name: crypto
url: "https://pub.dartlang.org"
source: hosted
version: "2.1.3"
cupertino_icons:
dependency: "direct main"
description:
name: cupertino_icons
url: "https://pub.flutter-io.cn"
url: "https://pub.dartlang.org"
source: hosted
version: "0.1.2"
version: "0.1.3"
flutter:
dependency: "direct main"
description: flutter
... ... @@ -47,45 +75,59 @@ packages:
path: ".."
relative: true
source: path
version: "0.7.0"
version: "1.0.0"
flutter_test:
dependency: "direct dev"
description: flutter
source: sdk
version: "0.0.0"
image:
dependency: transitive
description:
name: image
url: "https://pub.dartlang.org"
source: hosted
version: "2.1.4"
matcher:
dependency: transitive
description:
name: matcher
url: "https://pub.flutter-io.cn"
url: "https://pub.dartlang.org"
source: hosted
version: "0.12.5"
version: "0.12.6"
meta:
dependency: transitive
description:
name: meta
url: "https://pub.flutter-io.cn"
url: "https://pub.dartlang.org"
source: hosted
version: "1.1.7"
version: "1.1.8"
path:
dependency: transitive
description:
name: path
url: "https://pub.flutter-io.cn"
url: "https://pub.dartlang.org"
source: hosted
version: "1.6.4"
pedantic:
dependency: transitive
description:
name: pedantic
url: "https://pub.flutter-io.cn"
url: "https://pub.dartlang.org"
source: hosted
version: "1.8.0+1"
petitparser:
dependency: transitive
description:
name: petitparser
url: "https://pub.dartlang.org"
source: hosted
version: "2.4.0"
quiver:
dependency: transitive
description:
name: quiver
url: "https://pub.flutter-io.cn"
url: "https://pub.dartlang.org"
source: hosted
version: "2.0.5"
sky_engine:
... ... @@ -97,57 +139,64 @@ packages:
dependency: transitive
description:
name: source_span
url: "https://pub.flutter-io.cn"
url: "https://pub.dartlang.org"
source: hosted
version: "1.5.5"
stack_trace:
dependency: transitive
description:
name: stack_trace
url: "https://pub.flutter-io.cn"
url: "https://pub.dartlang.org"
source: hosted
version: "1.9.3"
stream_channel:
dependency: transitive
description:
name: stream_channel
url: "https://pub.flutter-io.cn"
url: "https://pub.dartlang.org"
source: hosted
version: "2.0.0"
string_scanner:
dependency: transitive
description:
name: string_scanner
url: "https://pub.flutter-io.cn"
url: "https://pub.dartlang.org"
source: hosted
version: "1.0.5"
term_glyph:
dependency: transitive
description:
name: term_glyph
url: "https://pub.flutter-io.cn"
url: "https://pub.dartlang.org"
source: hosted
version: "1.1.0"
test_api:
dependency: transitive
description:
name: test_api
url: "https://pub.flutter-io.cn"
url: "https://pub.dartlang.org"
source: hosted
version: "0.2.5"
version: "0.2.11"
typed_data:
dependency: transitive
description:
name: typed_data
url: "https://pub.flutter-io.cn"
url: "https://pub.dartlang.org"
source: hosted
version: "1.1.6"
vector_math:
dependency: transitive
description:
name: vector_math
url: "https://pub.flutter-io.cn"
url: "https://pub.dartlang.org"
source: hosted
version: "2.0.8"
xml:
dependency: transitive
description:
name: xml
url: "https://pub.dartlang.org"
source: hosted
version: "3.5.0"
sdks:
dart: ">=2.2.2 <3.0.0"
dart: ">=2.4.0 <3.0.0"
... ...
... ... @@ -6,12 +6,14 @@
import 'package:flutter/material.dart';
class ScreenUtil {
static ScreenUtil instance = new ScreenUtil();
static ScreenUtil _instance;
static const int defaultWidth = 1080;
static const int defaultHeight = 1920;
/// UI设计中手机尺寸 , px
/// Size of the phone in UI Design , px
double width;
double height;
num uiWidthPx;
num uiHeightPx;
/// 控制字体是否要根据系统的“字体大小”辅助选项来进行缩放。默认值为false。
/// allowFontScaling Specifies whether fonts should scale to respect Text Size accessibility settings. The default is false.
... ... @@ -22,22 +24,26 @@ class ScreenUtil {
static double _screenHeight;
static double _pixelRatio;
static double _statusBarHeight;
static double _bottomBarHeight;
static double _textScaleFactor;
ScreenUtil({
this.width = 1080,
this.height = 1920,
this.allowFontScaling = false,
});
ScreenUtil._();
static ScreenUtil getInstance() {
return instance;
factory ScreenUtil() {
return _instance;
}
void init(BuildContext context) {
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);
_mediaQueryData = mediaQuery;
_pixelRatio = mediaQuery.devicePixelRatio;
... ... @@ -84,9 +90,11 @@ class ScreenUtil {
/// 实际的dp与UI设计px的比例
/// The ratio of the actual dp to the design draft px
double get scaleWidth => _screenWidth / instance.width;
double get scaleWidth => _screenWidth / uiWidthPx;
double get scaleHeight => _screenHeight / uiHeightPx;
double get scaleHeight => _screenHeight / instance.height;
double get scaleText => scaleWidth > scaleHeight ? scaleWidth : scaleHeight;
/// 根据UI设计的设备宽度适配
/// 高度也可以根据这个来做适配可以保证不变形,比如你先要一个正方形的时候.
... ... @@ -110,7 +118,12 @@ class ScreenUtil {
///Font size adaptation method
///@param [fontSize] The size of the font on the UI design, in px.
///@param [allowFontScaling]
num setSp(num fontSize) => allowFontScaling
? setWidth(fontSize)
: setWidth(fontSize) / _textScaleFactor;
num setSp(num fontSize, {bool allowFontScalingSelf}) =>
allowFontScalingSelf == null
? (allowFontScaling
? (fontSize * scaleText)
: ((fontSize * scaleText) / _textScaleFactor))
: (allowFontScalingSelf
? (fontSize * scaleText)
: ((fontSize * scaleText) / _textScaleFactor));
}
... ...
# Generated by pub
# See https://dart.dev/tools/pub/glossary#lockfile
packages:
archive:
dependency: transitive
description:
name: archive
url: "https://pub.dartlang.org"
source: hosted
version: "2.0.11"
args:
dependency: transitive
description:
name: args
url: "https://pub.dartlang.org"
source: hosted
version: "1.5.2"
async:
dependency: transitive
description:
name: async
url: "https://pub.flutter-io.cn"
url: "https://pub.dartlang.org"
source: hosted
version: "2.3.0"
version: "2.4.0"
boolean_selector:
dependency: transitive
description:
name: boolean_selector
url: "https://pub.flutter-io.cn"
url: "https://pub.dartlang.org"
source: hosted
version: "1.0.5"
charcode:
dependency: transitive
description:
name: charcode
url: "https://pub.flutter-io.cn"
url: "https://pub.dartlang.org"
source: hosted
version: "1.1.2"
collection:
dependency: transitive
description:
name: collection
url: "https://pub.flutter-io.cn"
url: "https://pub.dartlang.org"
source: hosted
version: "1.14.11"
convert:
dependency: transitive
description:
name: convert
url: "https://pub.dartlang.org"
source: hosted
version: "2.1.1"
crypto:
dependency: transitive
description:
name: crypto
url: "https://pub.dartlang.org"
source: hosted
version: "2.1.3"
flutter:
dependency: "direct main"
description: flutter
... ... @@ -39,39 +67,53 @@ packages:
description: flutter
source: sdk
version: "0.0.0"
image:
dependency: transitive
description:
name: image
url: "https://pub.dartlang.org"
source: hosted
version: "2.1.4"
matcher:
dependency: transitive
description:
name: matcher
url: "https://pub.flutter-io.cn"
url: "https://pub.dartlang.org"
source: hosted
version: "0.12.5"
version: "0.12.6"
meta:
dependency: transitive
description:
name: meta
url: "https://pub.flutter-io.cn"
url: "https://pub.dartlang.org"
source: hosted
version: "1.1.7"
version: "1.1.8"
path:
dependency: transitive
description:
name: path
url: "https://pub.flutter-io.cn"
url: "https://pub.dartlang.org"
source: hosted
version: "1.6.4"
pedantic:
dependency: transitive
description:
name: pedantic
url: "https://pub.flutter-io.cn"
url: "https://pub.dartlang.org"
source: hosted
version: "1.8.0+1"
petitparser:
dependency: transitive
description:
name: petitparser
url: "https://pub.dartlang.org"
source: hosted
version: "2.4.0"
quiver:
dependency: transitive
description:
name: quiver
url: "https://pub.flutter-io.cn"
url: "https://pub.dartlang.org"
source: hosted
version: "2.0.5"
sky_engine:
... ... @@ -83,57 +125,64 @@ packages:
dependency: transitive
description:
name: source_span
url: "https://pub.flutter-io.cn"
url: "https://pub.dartlang.org"
source: hosted
version: "1.5.5"
stack_trace:
dependency: transitive
description:
name: stack_trace
url: "https://pub.flutter-io.cn"
url: "https://pub.dartlang.org"
source: hosted
version: "1.9.3"
stream_channel:
dependency: transitive
description:
name: stream_channel
url: "https://pub.flutter-io.cn"
url: "https://pub.dartlang.org"
source: hosted
version: "2.0.0"
string_scanner:
dependency: transitive
description:
name: string_scanner
url: "https://pub.flutter-io.cn"
url: "https://pub.dartlang.org"
source: hosted
version: "1.0.5"
term_glyph:
dependency: transitive
description:
name: term_glyph
url: "https://pub.flutter-io.cn"
url: "https://pub.dartlang.org"
source: hosted
version: "1.1.0"
test_api:
dependency: transitive
description:
name: test_api
url: "https://pub.flutter-io.cn"
url: "https://pub.dartlang.org"
source: hosted
version: "0.2.5"
version: "0.2.11"
typed_data:
dependency: transitive
description:
name: typed_data
url: "https://pub.flutter-io.cn"
url: "https://pub.dartlang.org"
source: hosted
version: "1.1.6"
vector_math:
dependency: transitive
description:
name: vector_math
url: "https://pub.flutter-io.cn"
url: "https://pub.dartlang.org"
source: hosted
version: "2.0.8"
xml:
dependency: transitive
description:
name: xml
url: "https://pub.dartlang.org"
source: hosted
version: "3.5.0"
sdks:
dart: ">=2.2.2 <3.0.0"
dart: ">=2.4.0 <3.0.0"
... ...
name: flutter_screenutil
description: A flutter plugin for adapting screen and font size.Guaranteed to look good on different models
version: 0.7.0
version: 1.0.0
author: LiZhuoyuan <zhuoyuan93@gmail.com>
homepage: https://github.com/OpenFlutter/flutter_screenutil
... ...