Skip to content

F
flutter_screenutil

__卓原 / flutter_screenutil

通知 10
Star 0
Fork 0
F
flutter_screenutil

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 80a660c9 编写于 作者: L lizhuoyuan
浏览文件
操作

1.0.0 

fix #68
fix #87
上级 36df9678
隐藏空白更改
内联 并排
Showing with 652 addition and 397 deletion
.packages
浏览文件 @ 80a660c9
# Generated by pub on 2019-11-29 11:43:17.634960. # Generated by pub on 2020-01-06 16:51:35.863956.
async:file:///D:/flutter/.pub-cache/hosted/pub.flutter-io.cn/async-2.3.0/lib/ archive:file:///D:/flutter/.pub-cache/hosted/pub.dartlang.org/archive-2.0.11/lib/
boolean_selector:file:///D:/flutter/.pub-cache/hosted/pub.flutter-io.cn/boolean_selector-1.0.5/lib/ args:file:///D:/flutter/.pub-cache/hosted/pub.dartlang.org/args-1.5.2/lib/
charcode:file:///D:/flutter/.pub-cache/hosted/pub.flutter-io.cn/charcode-1.1.2/lib/ async:file:///D:/flutter/.pub-cache/hosted/pub.dartlang.org/async-2.4.0/lib/
collection:file:///D:/flutter/.pub-cache/hosted/pub.flutter-io.cn/collection-1.14.11/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:file:///D:/flutter/packages/flutter/lib/
flutter_test:file:///D:/flutter/packages/flutter_test/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/ image:file:///D:/flutter/.pub-cache/hosted/pub.dartlang.org/image-2.1.4/lib/
meta:file:///D:/flutter/.pub-cache/hosted/pub.flutter-io.cn/meta-1.1.7/lib/ matcher:file:///D:/flutter/.pub-cache/hosted/pub.dartlang.org/matcher-0.12.6/lib/
path:file:///D:/flutter/.pub-cache/hosted/pub.flutter-io.cn/path-1.6.4/lib/ meta:file:///D:/flutter/.pub-cache/hosted/pub.dartlang.org/meta-1.1.8/lib/
pedantic:file:///D:/flutter/.pub-cache/hosted/pub.flutter-io.cn/pedantic-1.8.0+1/lib/ path:file:///D:/flutter/.pub-cache/hosted/pub.dartlang.org/path-1.6.4/lib/
quiver:file:///D:/flutter/.pub-cache/hosted/pub.flutter-io.cn/quiver-2.0.5/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/ 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/ 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.flutter-io.cn/stack_trace-1.9.3/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.flutter-io.cn/stream_channel-2.0.0/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.flutter-io.cn/string_scanner-1.0.5/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.flutter-io.cn/term_glyph-1.1.0/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.flutter-io.cn/test_api-0.2.5/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.flutter-io.cn/typed_data-1.1.6/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.flutter-io.cn/vector_math-2.0.8/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/ flutter_screenutil:lib/
CHANGELOG.md
浏览文件 @ 80a660c9
...@@ -2,10 +2,19 @@ ...@@ -2,10 +2,19 @@
* @Author: zhuoyuan93@gmail.com * @Author: zhuoyuan93@gmail.com
* @Date: 2018-10-16 19:43:03 * @Date: 2018-10-16 19:43:03
* @LastEditors: zhuoyuan93@gmail.com * @LastEditors: zhuoyuan93@gmail.com
* @LastEditTime: 2019-11-29 11:42 * @LastEditTime: 2020年1月6日 16:41:02
* @Description: Update log * @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 #0.7.0
- Replace textScaleFactory with textScaleFactor , It's a typo. - Replace textScaleFactory with textScaleFactor , It's a typo.
......
README.md
浏览文件 @ 80a660c9
...@@ -23,7 +23,7 @@ dependencies: ...@@ -23,7 +23,7 @@ dependencies:
flutter: flutter:
sdk: flutter sdk: flutter
# add flutter_screenutil # add flutter_screenutil
flutter_screenutil: ^0.7.0 flutter_screenutil: ^1.0.0
``` ```
### Add the following imports to your Dart code: ### 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 ...@@ -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 //fill in the screen size of the device in the design
//default value : width : 1080px , height:1920px , allowFontScaling:false //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) //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 //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 ...@@ -64,12 +64,9 @@ ScreenUtil.instance = ScreenUtil(width: 750, height: 1334, allowFontScaling: tru
Pass the px size of the design draft： 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)`, Adapted to screen height: `ScreenUtil().setHeight(200)`,
You can also use `ScreenUtil()` instead of `ScreenUtil.getInstance()`,
for example:`ScreenUtil().setHeight(200)`
**Note** **Note**
...@@ -81,15 +78,15 @@ setHeight method is mainly adapted in height, you want to control the height and ...@@ -81,15 +78,15 @@ setHeight method is mainly adapted in height, you want to control the height and
//for example: //for example:
//rectangle //rectangle
Container( Container(
width: ScreenUtil.getInstance().setWidth(375), width: ScreenUtil().setWidth(375),
height: ScreenUtil.getInstance().setHeight(200), height: ScreenUtil().setHeight(200),
... ...
), ),
////If you want to display a square: ////If you want to display a square:
Container( Container(
width: ScreenUtil.getInstance().setWidth(300), width: ScreenUtil().setWidth(300),
height: ScreenUtil.getInstance().setWidth(300), height: ScreenUtil().setWidth(300),
), ),
``` ```
...@@ -98,11 +95,11 @@ Container( ...@@ -98,11 +95,11 @@ Container(
``` dart ``` dart
//Incoming font size，the unit is pixel, fonts will not scale to respect Text Size accessibility settings //Incoming font size，the unit is pixel, fonts will not scale to respect Text Size accessibility settings
//(AllowallowFontScaling when initializing ScreenUtil) //(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 //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) //(If somewhere does not follow the global allowFontScaling setting)
ScreenUtil(allowFontScaling: true).setSp(28) ScreenUtil().setSp(24, allowFontScalingSelf: true)
//for example: //for example:
...@@ -113,18 +110,16 @@ Column( ...@@ -113,18 +110,16 @@ Column(
'My font size is 24px on the design draft and will not change with the system.', 'My font size is 24px on the design draft and will not change with the system.',
style: TextStyle( style: TextStyle(
color: Colors.black, color: Colors.black,
fontSize: ScreenUtil.getInstance().setSp(24), fontSize: ScreenUtil().setSp(24),
)), )),
Text( Text(
'My font size is 24px on the design draft and will change with the system.', 'My font size is 24px on the design draft and will change with the system.',
style: TextStyle( style: TextStyle(
color: Colors.black, color: Colors.black,
fontSize: ScreenUtil(allowFontScaling: true).setSp(24), fontSize: ScreenUtil()
)), .setSp(24, allowFontScalingSelf: true))),
], ],
) )
``` ```
#### Other related apis： #### Other related apis：
...@@ -136,39 +131,60 @@ Column( ...@@ -136,39 +131,60 @@ Column(
ScreenUtil.statusBarHeight //Status bar height , Notch will be higher Unit px ScreenUtil.statusBarHeight //Status bar height , Notch will be higher Unit px
ScreenUtil.textScaleFactor //System font scaling factor ScreenUtil.textScaleFactor //System font scaling factor
ScreenUtil.getInstance().scaleWidth //Ratio of actual width dp to design draft px ScreenUtil().scaleWidth //Ratio of actual width dp to design draft px
ScreenUtil.getInstance().scaleHeight //Ratio of actual height dp to design draft px ScreenUtil().scaleHeight //Ratio of actual height dp to design draft px
``` ```
```dart ```dart
//import //import
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart'; import 'package:flutter_screenutil/flutter_screenutil.dart';
... void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
@override @override
Widget build(BuildContext context) { 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) return new MaterialApp(
ScreenUtil.instance = ScreenUtil(width: 750, height: 1334)..init(context); debugShowCheckedModeBanner: false,
title: 'Flutter_ScreenUtil',
print('Device width:${ScreenUtil.screenWidth}'); //Device width theme: new ThemeData(
print('Device height:${ScreenUtil.screenHeight}'); //Device height primarySwatch: Colors.blue,
print( ),
'Device pixel density:${ScreenUtil.pixelRatio}'); //Device pixel density home: new MyHomePage(),
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( class MyHomePage extends StatefulWidget {
'Ratio of actual width dp to design draft px:${ScreenUtil.getInstance().scaleWidth}'); @override
print( _MyHomePageState createState() => new _MyHomePageState();
'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}'); class _MyHomePageState extends State<MyHomePage> {
print( @override
'The ratio of height width to the size of the design:${ScreenUtil.getInstance().scaleHeight * ScreenUtil.pixelRatio}'); 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( return new Scaffold(
appBar: new AppBar( appBar: new AppBar(
title: new Text(widget.title), title: new Text(widget.title),
...@@ -180,52 +196,48 @@ import 'package:flutter_screenutil/flutter_screenutil.dart'; ...@@ -180,52 +196,48 @@ import 'package:flutter_screenutil/flutter_screenutil.dart';
Row( Row(
children: <Widget>[ children: <Widget>[
Container( Container(
padding: EdgeInsets.all(ScreenUtil.getInstance().setWidth(10)), padding: EdgeInsets.all(ScreenUtil().setWidth(10)),
width: ScreenUtil.getInstance().setWidth(375), width: ScreenUtil().setWidth(375),
height: ScreenUtil.getInstance().setHeight(200), height: ScreenUtil().setHeight(200),
color: Colors.red, color: Colors.red,
child: Text( child: Text(
'My width:${ScreenUtil.getInstance().setWidth(375)}dp', 'My width:${ScreenUtil().setWidth(375)}dp \n'
'My height:${ScreenUtil().setHeight(200)}dp',
style: TextStyle( style: TextStyle(
color: Colors.white, color: Colors.white, fontSize: ScreenUtil().setSp(24)),
fontSize: ScreenUtil.getInstance().setSp(12)),
), ),
), ),
Container( Container(
padding: EdgeInsets.all(ScreenUtil.getInstance().setWidth(10)), padding: EdgeInsets.all(ScreenUtil().setWidth(10)),
width: ScreenUtil.getInstance().setWidth(375), width: ScreenUtil().setWidth(375),
height: ScreenUtil.getInstance().setHeight(200), height: ScreenUtil().setHeight(200),
color: Colors.blue, 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( style: TextStyle(
color: Colors.white, color: Colors.white,
fontSize: ScreenUtil.getInstance().setSp(12))), fontSize: ScreenUtil().setSp(24))),
), ),
], ],
), ),
Text('Device width:${ScreenUtil.screenWidth}px'), Text('Device width:${ScreenUtil.screenWidth}px'),
Text('Device height:${ScreenUtil.screenHeight}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('Device pixel density:${ScreenUtil.pixelRatio}'),
Text('Bottom safe zone distance:${ScreenUtil.bottomBarHeight}px'), Text('Bottom safe zone distance:${ScreenUtil.bottomBarHeight}dp'),
Text('Status bar height:${ScreenUtil.statusBarHeight}px'), Text('Status bar height:${ScreenUtil.statusBarHeight}dp'),
Text( 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, textAlign: TextAlign.center,
), ),
Text( 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,
),
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}',
textAlign: TextAlign.center, textAlign: TextAlign.center,
), ),
SizedBox( SizedBox(
height: ScreenUtil.getInstance().setHeight(100), height: ScreenUtil().setHeight(100),
), ),
Text('System font scaling factor:${ScreenUtil.textScaleFactor}'), Text('System font scaling factor:${ScreenUtil.textScaleFactor}'),
Column( Column(
...@@ -235,27 +247,57 @@ import 'package:flutter_screenutil/flutter_screenutil.dart'; ...@@ -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.', 'My font size is 24px on the design draft and will not change with the system.',
style: TextStyle( style: TextStyle(
color: Colors.black, color: Colors.black,
fontSize: ScreenUtil.getInstance().setSp(24), fontSize: ScreenUtil().setSp(24),
)), )),
Text( Text(
'My font size is 24px on the design draft and will change with the system.', 'My font size is 24px on the design draft and will change with the system.',
style: TextStyle( style: TextStyle(
color: Colors.black, 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('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:
[example demo](/example/lib/main_zh.dart) [example demo](/example/lib/main.dart)
effect: effect:
![效果](demo_en.png) ![effect](demo_en.png)
![tablet effect](demo_tablet_en.png)
\ No newline at end of file
README_CN.md
浏览文件 @ 80a660c9
...@@ -27,7 +27,7 @@ dependencies: ...@@ -27,7 +27,7 @@ dependencies:
flutter: flutter:
sdk: flutter sdk: flutter
# 添加依赖 # 添加依赖
flutter_screenutil: ^0.7.0 flutter_screenutil: ^1.0.0
``` ```
### 在每个使用的地方导入包： ### 在每个使用的地方导入包：
...@@ -51,13 +51,13 @@ import 'package:flutter_screenutil/flutter_screenutil.dart'; ...@@ -51,13 +51,13 @@ import 'package:flutter_screenutil/flutter_screenutil.dart';
//填入设计稿中设备的屏幕尺寸 //填入设计稿中设备的屏幕尺寸
//默认 width : 1080px , height:1920px , allowFontScaling:false //默认 width : 1080px , height:1920px , allowFontScaling:false
ScreenUtil.instance = ScreenUtil.getInstance()..init(context); ScreenUtil.init(context);
//假如设计稿是按iPhone6的尺寸设计的(iPhone6 750*1334) //假如设计稿是按iPhone6的尺寸设计的(iPhone6 750*1334)
ScreenUtil.instance = ScreenUtil(width: 750, height: 1334)..init(context); ScreenUtil.init(context, width: 750, height: 1334);
//设置字体大小根据系统的“字体大小”辅助选项来进行缩放,默认为false //设置字体大小根据系统的“字体大小”辅助选项来进行缩放,默认为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 ...@@ -67,12 +67,9 @@ ScreenUtil.instance = ScreenUtil(width: 750, height: 1334, allowFontScaling: tru
传入设计稿的px尺寸： 传入设计稿的px尺寸：
根据屏幕宽度适配 `width: ScreenUtil.getInstance().setWidth(540)`, 根据屏幕宽度适配 `width: ScreenUtil().setWidth(540)`,
根据屏幕高度适配 `height: ScreenUtil.getInstance().setHeight(200)`, 根据屏幕高度适配 `height: ScreenUtil().setHeight(200)`,
也可以使用 `ScreenUtil()` 替代 `ScreenUtil.getInstance()`,
例如：`ScreenUtil().setHeight(200)`
**注意** **注意**
...@@ -83,16 +80,16 @@ setHeight方法主要是在高度上进行适配, 在你想控制UI上一屏的 ...@@ -83,16 +80,16 @@ setHeight方法主要是在高度上进行适配, 在你想控制UI上一屏的
例如: 例如:
``` ```
//长方形: //UI上是长方形:
Container( Container(
width: ScreenUtil.getInstance().setWidth(375), width: ScreenUtil().setWidth(375),
height: ScreenUtil.getInstance().setHeight(200), height: ScreenUtil().setHeight(200),
), ),
//如果你想显示一个正方形: //如果你想显示一个正方形:
Container( Container(
width: ScreenUtil.getInstance().setWidth(300), width: ScreenUtil().setWidth(300),
height: ScreenUtil.getInstance().setWidth(300), height: ScreenUtil().setWidth(300),
), ),
``` ```
...@@ -101,26 +98,28 @@ Container( ...@@ -101,26 +98,28 @@ Container(
``` ```
//传入字体大小，默认不根据系统的“字体大小”辅助选项来进行缩放(可在初始化ScreenUtil时设置allowFontScaling) //传入字体大小，默认不根据系统的“字体大小”辅助选项来进行缩放(可在初始化ScreenUtil时设置allowFontScaling)
ScreenUtil.getInstance().setSp(28) ScreenUtil().setSp(28)
//传入字体大小，根据系统的“字体大小”辅助选项来进行缩放(如果某个地方不遵循全局的allowFontScaling设置) //传入字体大小，根据系统的“字体大小”辅助选项来进行缩放(如果某个地方不遵循全局的allowFontScaling设置)
ScreenUtil(allowFontScaling: true).setSp(28) ScreenUtil().setSp(24, allowFontScalingSelf: true)
//for example: //for example:
Column( Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[ children: <Widget>[
Text('我的文字大小在设计稿上是25px，不会随着系统的文字缩放比例变化', Text('我的文字大小在设计稿上是24px，不会随着系统的文字缩放比例变化',
style: TextStyle( style: TextStyle(
color: Colors.black, fontSize: ScreenUtil.getInstance().setSp(24))), color: Colors.black,
Text('我的文字大小在设计稿上是25px，会随着系统的文字缩放比例变化', fontSize: ScreenUtil().setSp(24),
)),
Text('我的文字大小在设计稿上是24px，会随着系统的文字缩放比例变化',
style: TextStyle( style: TextStyle(
color: Colors.black, fontSize: ScreenUtil(allowFontScaling: true).setSp(24))), color: Colors.black,
fontSize: ScreenUtil()
.setSp(24, allowFontScalingSelf: true))),
], ],
) )
``` ```
#### 其他相关api： #### 其他相关api：
...@@ -132,39 +131,65 @@ Column( ...@@ -132,39 +131,65 @@ Column(
ScreenUtil.statusBarHeight //状态栏高度 刘海屏会更高 单位px ScreenUtil.statusBarHeight //状态栏高度 刘海屏会更高 单位px
ScreenUtil.textScaleFactor //系统字体缩放比例 ScreenUtil.textScaleFactor //系统字体缩放比例
ScreenUtil.getInstance().scaleWidth // 实际宽度的dp与设计稿px的比例 ScreenUtil().scaleWidth // 实际宽度的dp与设计稿px的比例
ScreenUtil.getInstance().scaleHeight // 实际高度的dp与设计稿px的比例 ScreenUtil().scaleHeight // 实际高度的dp与设计稿px的比例
``` ```
```dart ```dart
//导入 import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart'; import 'package:flutter_screenutil/flutter_screenutil.dart';
... void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
//设置适配尺寸 (填入设计稿中设备的屏幕尺寸) 假如设计稿是按iPhone6的尺寸设计的(iPhone6 750*1334) return new MaterialApp(
ScreenUtil.instance = ScreenUtil(width: 750, height: 1334)..init(context); debugShowCheckedModeBanner: false,
title: 'Flutter_ScreenUtil',
print('设备宽度:${ScreenUtil.screenWidth}'); //Device width theme: new ThemeData(
print('设备高度:${ScreenUtil.screenHeight}'); //Device height primarySwatch: Colors.blue,
print('设备的像素密度:${ScreenUtil.pixelRatio}'); //Device pixel density ),
print( home: new MyHomePage(),
'底部安全区距离:${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 }
print('实际宽度的dp与设计稿px的比例:${ScreenUtil.getInstance().scaleWidth}'); class MyHomePage extends StatefulWidget {
print('实际高度的dp与设计稿px的比例:${ScreenUtil.getInstance().scaleHeight}'); MyHomePage({Key key, this.title}) : super(key: key);
print( final String title;
'宽度和字体相对于设计稿放大的比例:${ScreenUtil.getInstance().scaleWidth * ScreenUtil.pixelRatio}');
print( @override
'高度相对于设计稿放大的比例:${ScreenUtil.getInstance().scaleHeight * ScreenUtil.pixelRatio}'); _MyHomePageState createState() => new _MyHomePageState();
print('系统的字体缩放比例:${ScreenUtil.textScaleFactor}'); }
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( return new Scaffold(
appBar: new AppBar( appBar: new AppBar(
title: new Text(widget.title), title: new Text(widget.title),
...@@ -176,72 +201,98 @@ import 'package:flutter_screenutil/flutter_screenutil.dart'; ...@@ -176,72 +201,98 @@ import 'package:flutter_screenutil/flutter_screenutil.dart';
Row( Row(
children: <Widget>[ children: <Widget>[
Container( Container(
padding: EdgeInsets.all(ScreenUtil.getInstance().setWidth(10)), padding: EdgeInsets.all(ScreenUtil().setWidth(10)),
width: ScreenUtil.getInstance().setWidth(375), width: ScreenUtil().setWidth(375),
height: ScreenUtil.getInstance().setHeight(200), height: ScreenUtil().setHeight(200),
color: Colors.red, color: Colors.red,
child: Text( child: Text(
'我的宽度:${ScreenUtil.getInstance().setWidth(375)}dp', '我的宽度:${ScreenUtil().setWidth(375)}dp \n'
'我的高度:${ScreenUtil().setHeight(200)}dp',
style: TextStyle( style: TextStyle(
color: Colors.white, color: Colors.white, fontSize: ScreenUtil().setSp(24)),
fontSize: ScreenUtil.getInstance().setSp(12),
),
), ),
), ),
Container( Container(
padding: EdgeInsets.all(ScreenUtil.getInstance().setWidth(10)), padding: EdgeInsets.all(ScreenUtil().setWidth(10)),
width: ScreenUtil.getInstance().setWidth(375), width: ScreenUtil().setWidth(375),
height: ScreenUtil.getInstance().setHeight(200), height: ScreenUtil().setHeight(200),
color: Colors.blue, color: Colors.blue,
child: Text('我的宽度:${ScreenUtil.getInstance().setWidth(375)}dp', child: Text(
'我的宽度:${ScreenUtil().setWidth(375)}dp \n'
'我的高度:${ScreenUtil().setHeight(200)}dp',
style: TextStyle( style: TextStyle(
color: Colors.white, color: Colors.white,
fontSize: ScreenUtil.getInstance().setSp(12), fontSize: ScreenUtil().setSp(24))),
)),
), ),
], ],
), ),
Text('设备宽度:${ScreenUtil.screenWidth}px'), Text('设备宽度:${ScreenUtil.screenWidth}px'),
Text('设备高度:${ScreenUtil.screenHeight}px'), Text('设备高度:${ScreenUtil.screenHeight}px'),
Text('设备宽度:${ScreenUtil.screenWidthDp}dp'),
Text('设备高度:${ScreenUtil.screenHeightDp}dp'),
Text('设备的像素密度:${ScreenUtil.pixelRatio}'), Text('设备的像素密度:${ScreenUtil.pixelRatio}'),
Text('底部安全区距离:${ScreenUtil.bottomBarHeight}px'), Text('底部安全区距离:${ScreenUtil.bottomBarHeight}dp'),
Text('状态栏高度:${ScreenUtil.statusBarHeight}px'), Text('状态栏高度:${ScreenUtil.statusBarHeight}dp'),
Text(
'实际高度的dp与设计稿px的比例:${ScreenUtil.getInstance().scaleHeight}',
textAlign: TextAlign.center,
),
Text( Text(
'实际高度的dp与设计稿px的比例:${ScreenUtil.getInstance().scaleHeight}', '实际宽度的dp与设计稿px的比例:${ScreenUtil().scaleWidth}',
textAlign: TextAlign.center, textAlign: TextAlign.center,
), ),
Text( Text(
'宽度和字体相对于设计稿放大的比例:${ScreenUtil.getInstance().scaleWidth * ScreenUtil.pixelRatio}', '实际高度的dp与设计稿px的比例:${ScreenUtil().scaleHeight}',
textAlign: TextAlign.center,
),
Text(
'高度相对于设计稿放大的比例:${ScreenUtil.getInstance().scaleHeight * ScreenUtil.pixelRatio}',
textAlign: TextAlign.center, textAlign: TextAlign.center,
), ),
SizedBox( SizedBox(
height: ScreenUtil.getInstance().setHeight(100), height: ScreenUtil().setHeight(100),
), ),
Text('系统的字体缩放比例:${ScreenUtil.textScaleFactor}'), Text('系统的字体缩放比例:${ScreenUtil.textScaleFactor}'),
Column( Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[ children: <Widget>[
Text('我的文字大小在设计稿上是24px，不会随着系统的文字缩放比例变化', Text('我的文字大小在设计稿上是24px，不会随着系统的文字缩放比例变化',
style: TextStyle( style: TextStyle(
color: Colors.black, fontSize: ScreenUtil.getInstance().setSp(24))), color: Colors.black,
Text('我的文字大小在设计稿上是24px，会随着系统的文字缩放比例变化', fontSize: ScreenUtil().setSp(24),
style: TextStyle( )),
color: Colors.black, fontSize: ScreenUtil(allowFontScaling: true).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'; ...@@ -250,5 +301,5 @@ import 'package:flutter_screenutil/flutter_screenutil.dart';
效果: 效果:
![效果](demo_zh.png) ![手机效果](demo_zh.png)
![平板效果](demo_tablet_zh.png)
README_PT.md
浏览文件 @ 80a660c9
...@@ -23,7 +23,7 @@ dependencies: ...@@ -23,7 +23,7 @@ dependencies:
flutter: flutter:
sdk: flutter sdk: flutter
# add flutter_screenutil # add flutter_screenutil
flutter_screenutil: ^0.7.0 flutter_screenutil: ^1.0.0
``` ```
### Adicione o seguinte import em seu código Dart: ### 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 ...@@ -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 //Preencha o tamanho da tela do dispositivo no protótipo de design
//Valor padrão: width : 1080px , height:1920px , allowFontScaling:false //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) //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 //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 ...@@ -64,12 +64,9 @@ ScreenUtil.instance = ScreenUtil(width: 750, height: 1334, allowFontScaling: tru
Informe o tamanho em pixels do protótipo de design: 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)`, Adaptado à altura da tela: `ScreenUtil().setHeight(200)`,
Você também pode utilizar `ScreenUtil()` ao invés de `ScreenUtil.getInstance()`,
por exemplo:`ScreenUtil().setHeight(200)`
**Nota** **Nota**
...@@ -81,15 +78,15 @@ O método setHeight é a principal forma de adaptar a altura, se quiser controla ...@@ -81,15 +78,15 @@ O método setHeight é a principal forma de adaptar a altura, se quiser controla
//Exemplo: //Exemplo:
//Retângulo //Retângulo
Container( Container(
width: ScreenUtil.getInstance().setWidth(375), width: ScreenUtil().setWidth(375),
height: ScreenUtil.getInstance().setHeight(200), height: ScreenUtil().setHeight(200),
... ...
), ),
////Se quiser exibir um quadrado: ////Se quiser exibir um quadrado:
Container( Container(
width: ScreenUtil.getInstance().setWidth(300), width: ScreenUtil().setWidth(300),
height: ScreenUtil.getInstance().setWidth(300), height: ScreenUtil().setWidth(300),
), ),
``` ```
...@@ -98,11 +95,11 @@ Container( ...@@ -98,11 +95,11 @@ Container(
``` dart ``` 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 //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) //(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 //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) //(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: //Exemplo:
...@@ -113,18 +110,16 @@ Column( ...@@ -113,18 +110,16 @@ Column(
'Minha fonte tem 24px no protótipo de design e não irá mudar com o sistema.', 'Minha fonte tem 24px no protótipo de design e não irá mudar com o sistema.',
style: TextStyle( style: TextStyle(
color: Colors.black, color: Colors.black,
fontSize: ScreenUtil.getInstance().setSp(24), fontSize: ScreenUtil().setSp(24),
)), )),
Text( Text(
'Minha fonte tem 24px no protótipo de design e poderá mudar com o sistema.', 'Minha fonte tem 24px no protótipo de design e poderá mudar com o sistema.',
style: TextStyle( style: TextStyle(
color: Colors.black, color: Colors.black,
fontSize: ScreenUtil(allowFontScaling: true).setSp(24), fontSize: ScreenUtil()
)), .setSp(24, allowFontScalingSelf: true))),
], ],
) )
``` ```
#### Outras APIs relacionadas： #### Outras APIs relacionadas：
...@@ -136,8 +131,8 @@ Column( ...@@ -136,8 +131,8 @@ Column(
ScreenUtil.statusBarHeight //Altura da status bar em pixels, Notch será maior ScreenUtil.statusBarHeight //Altura da status bar em pixels, Notch será maior
ScreenUtil.textScaleFactor //Fator de escala da fonte do sistema 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().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().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'; ...@@ -150,7 +145,7 @@ import 'package:flutter_screenutil/flutter_screenutil.dart';
@override @override
Widget build(BuildContext context) { 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) ///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('Largura do dispositivo:${ScreenUtil.screenWidth}'); //Largura do dispositivo
print('Altura do dispositivo:${ScreenUtil.screenHeight}'); //Altura do dispositivo print('Altura do dispositivo:${ScreenUtil.screenHeight}'); //Altura do dispositivo
...@@ -161,13 +156,13 @@ import 'package:flutter_screenutil/flutter_screenutil.dart'; ...@@ -161,13 +156,13 @@ import 'package:flutter_screenutil/flutter_screenutil.dart';
print( print(
'Altura da status bar:${ScreenUtil.statusBarHeight}px'); //Altura da status bar em pixels, Notch será maior 'Altura da status bar:${ScreenUtil.statusBarHeight}px'); //Altura da status bar em pixels, Notch será maior
print( 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( 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( 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( 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( return new Scaffold(
appBar: new AppBar( appBar: new AppBar(
...@@ -180,26 +175,26 @@ import 'package:flutter_screenutil/flutter_screenutil.dart'; ...@@ -180,26 +175,26 @@ import 'package:flutter_screenutil/flutter_screenutil.dart';
Row( Row(
children: <Widget>[ children: <Widget>[
Container( Container(
padding: EdgeInsets.all(ScreenUtil.getInstance().setWidth(10)), padding: EdgeInsets.all(ScreenUtil().setWidth(10)),
width: ScreenUtil.getInstance().setWidth(375), width: ScreenUtil().setWidth(375),
height: ScreenUtil.getInstance().setHeight(200), height: ScreenUtil().setHeight(200),
color: Colors.red, color: Colors.red,
child: Text( child: Text(
'Minha largura:${ScreenUtil.getInstance().setWidth(375)}dp', 'Minha largura:${ScreenUtil().setWidth(375)}dp',
style: TextStyle( style: TextStyle(
color: Colors.white, color: Colors.white,
fontSize: ScreenUtil.getInstance().setSp(12)), fontSize: ScreenUtil().setSp(12)),
), ),
), ),
Container( Container(
padding: EdgeInsets.all(ScreenUtil.getInstance().setWidth(10)), padding: EdgeInsets.all(ScreenUtil().setWidth(10)),
width: ScreenUtil.getInstance().setWidth(375), width: ScreenUtil().setWidth(375),
height: ScreenUtil.getInstance().setHeight(200), height: ScreenUtil().setHeight(200),
color: Colors.blue, color: Colors.blue,
child: Text('Minha largura:${ScreenUtil.getInstance().setWidth(375)}dp', child: Text('Minha largura:${ScreenUtil().setWidth(375)}dp',
style: TextStyle( style: TextStyle(
color: Colors.white, color: Colors.white,
fontSize: ScreenUtil.getInstance().setSp(12))), fontSize: ScreenUtil().setSp(12))),
), ),
], ],
), ),
...@@ -209,23 +204,23 @@ import 'package:flutter_screenutil/flutter_screenutil.dart'; ...@@ -209,23 +204,23 @@ import 'package:flutter_screenutil/flutter_screenutil.dart';
Text('Distância segura do rodapé:${ScreenUtil.bottomBarHeight}px'), Text('Distância segura do rodapé:${ScreenUtil.bottomBarHeight}px'),
Text('Altura da status bar:${ScreenUtil.statusBarHeight}px'), Text('Altura da status bar:${ScreenUtil.statusBarHeight}px'),
Text( 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, textAlign: TextAlign.center,
), ),
Text( 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, textAlign: TextAlign.center,
), ),
Text( 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, textAlign: TextAlign.center,
), ),
Text( 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, textAlign: TextAlign.center,
), ),
SizedBox( SizedBox(
height: ScreenUtil.getInstance().setHeight(100), height: ScreenUtil().setHeight(100),
), ),
Text('Fator de escala da fonte do sistema:${ScreenUtil.textScaleFactor}'), Text('Fator de escala da fonte do sistema:${ScreenUtil.textScaleFactor}'),
Column( Column(
...@@ -235,13 +230,13 @@ import 'package:flutter_screenutil/flutter_screenutil.dart'; ...@@ -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.', 'Minha fonte tem 24px no protótipo de design e não irá mudar com o sistema.',
style: TextStyle( style: TextStyle(
color: Colors.black, color: Colors.black,
fontSize: ScreenUtil.getInstance().setSp(24), fontSize: ScreenUtil().setSp(24),
)), )),
Text( Text(
'Minha fonte tem 24px no protótipo de design e poderá mudar com o sistema.', 'Minha fonte tem 24px no protótipo de design e poderá mudar com o sistema.',
style: TextStyle( style: TextStyle(
color: Colors.black, 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'; ...@@ -259,3 +254,4 @@ import 'package:flutter_screenutil/flutter_screenutil.dart';
Efeito: Efeito:
![效果](demo_en.png) ![效果](demo_en.png)
![tablet effect](demo_tablet_en.png)
\ No newline at end of file
demo_en.png
查看替换文件 @ 36df9678 浏览文件 @ 80a660c9
demo_en.png

67.8 KB | W: | H:

demo_en.png

110.0 KB | W: | H:

demo_en.png
demo_en.png
demo_en.png
demo_en.png
  • 2-up
  • Swipe
  • Onion skin
demo_zh.png
查看替换文件 @ 36df9678 浏览文件 @ 80a660c9
demo_zh.png

67.6 KB | W: | H:

demo_zh.png

112.6 KB | W: | H:

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