Skip to content

Commit

Permalink
优化example
Browse files Browse the repository at this point in the history
  • Loading branch information
lizhuoyuan committed Oct 17, 2018
1 parent db8c25a commit 7977d54
Show file tree
Hide file tree
Showing 6 changed files with 98 additions and 100 deletions.
17 changes: 8 additions & 9 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@

# flutter_ScreenUtil
**A flutter plugin for adapting screen and font size.Guaranteed to look good on different models**
**A flutter plugin for adapting screen and font size.Let your UI display a reasonable layout on different screen sizes!**

[中文文档](https://github.com/OpenFlutter/flutter_ScreenUtil/blob/master/README_CN.md)

Expand Down Expand Up @@ -76,8 +76,8 @@ Other related apis:
ScreenUtil.statusBarHeight //Status bar height , Notch will be higher Unit px
ScreenUtil.textScaleFactory //System font scaling factor
ScreenUtil().scaleWidth //The width is enlarged relative to the design draft
ScreenUtil().scaleHeight //Height relative to the magnification of the design draft
ScreenUtil().scaleWidth //The ratio of font and width to the size of the design
ScreenUtil().scaleHeight //The ratio of height width to the size of the design
```

Expand All @@ -87,7 +87,7 @@ import 'package:flutter_screenutil/flutter_screenutil.dart';
...
@override
@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);
Expand All @@ -100,10 +100,9 @@ import 'package:flutter_screenutil/flutter_screenutil.dart';
print(
'Status bar height:${ScreenUtil.statusBarHeight}px'); //Status bar height , Notch will be higher Unit px
print(
'Width is enlarged relative to the design draft:${ScreenUtil().scaleWidth}'); //The width is enlarged relative to the design draft
'The ratio of font and width to the size of the design:${ScreenUtil().scaleWidth}'); //The width is enlarged relative to the design draft
print(
'Height is enlarged relative to the design draft:${ScreenUtil().scaleHeight}'); //The height is enlarged relative to the design draft
print('System font scaling:${ScreenUtil.textScaleFactory}');
'The ratio of height width to the size of the design:${ScreenUtil().scaleHeight}'); //The height is enlarged relative to the design draft
return new Scaffold(
appBar: new AppBar(
Expand Down Expand Up @@ -143,11 +142,11 @@ import 'package:flutter_screenutil/flutter_screenutil.dart';
Text('Bottom safe zone distance:${ScreenUtil.bottomBarHeight}px'),
Text('Status bar height:${ScreenUtil.statusBarHeight}px'),
Text(
'Width is enlarged relative to the design draft:${ScreenUtil().scaleWidth}',
'The ratio of font and width to the size of the design:${ScreenUtil().scaleWidth}',
textAlign: TextAlign.center,
),
Text(
'Height is enlarged relative to the design draft:${ScreenUtil().scaleHeight}',
'The ratio of height width to the size of the design:${ScreenUtil().scaleHeight}',
textAlign: TextAlign.center,
),
SizedBox(
Expand Down
173 changes: 86 additions & 87 deletions README_CN.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@

# flutter_ScreenUtil
**flutter 屏幕适配方案,让你的UI不会因为在不同设备上变得难看**
**flutter 屏幕适配方案,让你的UI在不同尺寸的屏幕上都能显示合理的布局!**

[README of English](https://github.com/OpenFlutter/flutter_ScreenUtil/blob/master/README.md)

Expand Down Expand Up @@ -77,8 +77,8 @@ for example:
ScreenUtil.statusBarHeight //状态栏高度 刘海屏会更高 单位px
ScreenUtil.textScaleFactory //系统字体缩放比例
ScreenUtil().scaleWidth //宽度相对于设计稿放大的倍数
ScreenUtil().scaleHeight //高度相对于设计稿放大的倍数
ScreenUtil().scaleWidth //字体和宽度相对设计稿放大的比例
ScreenUtil().scaleHeight //高度相对于设计稿放大的比例
```

Expand All @@ -88,90 +88,89 @@ import 'package:flutter_screenutil/flutter_screenutil.dart';
...
@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
print(
'宽度相对于设计稿放大的倍数:${ScreenUtil().scaleWidth}'); //The width is enlarged relative to the design draft
print(
'高度相对于设计稿放大的倍数:${ScreenUtil().scaleHeight}'); //The height is enlarged relative to the design draft
print('系统的字体缩放比例:${ScreenUtil.textScaleFactory}');
return new Scaffold(
appBar: new AppBar(
title: new Text(widget.title),
),
body: new Center(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Row(
children: <Widget>[
Container(
width: ScreenUtil().setWidth(375),
height: ScreenUtil().setHeight(200),
color: Colors.red,
child: Text(
'My width:${ScreenUtil().setWidth(375)}dp',
style: TextStyle(
color: Colors.white,
fontSize: ScreenUtil().setSp(28, false)),
),
),
Container(
width: ScreenUtil().setWidth(375),
height: ScreenUtil().setHeight(200),
color: Colors.blue,
child: Text('My width:${ScreenUtil().setWidth(375)}dp',
style: TextStyle(
color: Colors.white,
fontSize: ScreenUtil().setSp(28, false))),
),
],
),
Text('Device width:${ScreenUtil.screenWidth}px'),
Text('Device height:${ScreenUtil.screenHeight}px'),
Text('Device pixel density:${ScreenUtil.pixelRatio}'),
Text('Bottom safe zone distance:${ScreenUtil.bottomBarHeight}px'),
Text('Status bar height:${ScreenUtil.statusBarHeight}px'),
Text(
'Width is enlarged relative to the design draft:${ScreenUtil().scaleWidth}',
textAlign: TextAlign.center,
),
Text(
'Height is enlarged relative to the design draft:${ScreenUtil().scaleHeight}',
textAlign: TextAlign.center,
),
SizedBox(
height: ScreenUtil().setHeight(200),
),
Text('System font scaling:${ScreenUtil.textScaleFactory}'),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'我的文字大小是28px,不会随着系统的文字大小变化',
style: TextStyle(
color: Colors.black,
fontSize: ScreenUtil().setSp(28, false))),
Text('我的文字大小是28px,会随着系统的文字大小变化',
style: TextStyle(
color: Colors.black, fontSize: ScreenUtil().setSp(28))),
],
)
],
),
),
);
}
@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
print(
'字体和宽度相对设计稿放大的比例:${ScreenUtil().scaleWidth}'); //The width is enlarged relative to the design draft
print(
'高度相对于设计稿放大的比例:${ScreenUtil().scaleHeight}'); //The height is enlarged relative to the design draft
print('系统的字体缩放比例:${ScreenUtil.textScaleFactory}');
return new Scaffold(
appBar: new AppBar(
title: new Text(widget.title),
),
body: new Center(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Row(
children: <Widget>[
Container(
width: ScreenUtil().setWidth(375),
height: ScreenUtil().setHeight(200),
color: Colors.red,
child: Text(
'我的宽度:${ScreenUtil().setWidth(375)}dp',
style: TextStyle(
color: Colors.white,
fontSize: ScreenUtil().setSp(28, false)),
),
),
Container(
width: ScreenUtil().setWidth(375),
height: ScreenUtil().setHeight(200),
color: Colors.blue,
child: Text('我的宽度:${ScreenUtil().setWidth(375)}dp',
style: TextStyle(
color: Colors.white,
fontSize: ScreenUtil().setSp(28, false))),
),
],
),
Text('设备宽度:${ScreenUtil.screenWidth}px'),
Text('设备高度:${ScreenUtil.screenHeight}px'),
Text('设备的像素密度:${ScreenUtil.pixelRatio}'),
Text('底部安全区距离:${ScreenUtil.bottomBarHeight}px'),
Text('状态栏高度:${ScreenUtil.statusBarHeight}px'),
Text(
'字体和宽度相对设计稿放大的比例:${ScreenUtil().scaleWidth}',
textAlign: TextAlign.center,
),
Text(
'高度相对于设计稿放大的比例:${ScreenUtil().scaleHeight}',
textAlign: TextAlign.center,
),
SizedBox(
height: ScreenUtil().setHeight(200),
),
Text('系统的字体缩放比例:${ScreenUtil.textScaleFactory}'),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text('我的文字大小是28px,不会随着系统的文字大小变化',
style: TextStyle(
color: Colors.black,
fontSize: ScreenUtil().setSp(28, false))),
Text('我的文字大小是28px,会随着系统的文字大小变化',
style: TextStyle(
color: Colors.black, fontSize: ScreenUtil().setSp(28))),
],
)
],
),
),
);
}
```

### 使用示例:
Expand Down
Binary file modified demo_en.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified demo_zh.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 2 additions & 2 deletions example/lib/main.dart
Original file line number Diff line number Diff line change
Expand Up @@ -83,11 +83,11 @@ class _MyHomePageState extends State<MyHomePage> {
Text('Bottom safe zone distance:${ScreenUtil.bottomBarHeight}px'),
Text('Status bar height:${ScreenUtil.statusBarHeight}px'),
Text(
'Width is enlarged relative to the design draft:${ScreenUtil().scaleWidth}',
'The ratio of font and width to the size of the design:${ScreenUtil().scaleWidth}',
textAlign: TextAlign.center,
),
Text(
'Height is enlarged relative to the design draft:${ScreenUtil().scaleHeight}',
'The ratio of height width to the size of the design:${ScreenUtil().scaleHeight}',
textAlign: TextAlign.center,
),
SizedBox(
Expand Down
4 changes: 2 additions & 2 deletions example/lib/main_zh.dart
Original file line number Diff line number Diff line change
Expand Up @@ -83,11 +83,11 @@ class _MyHomePageState extends State<MyHomePage> {
Text('底部安全区距离:${ScreenUtil.bottomBarHeight}px'),
Text('状态栏高度:${ScreenUtil.statusBarHeight}px'),
Text(
'宽度相对于设计稿放大的倍数:${ScreenUtil().scaleWidth}',
'字体和宽度相对设计稿放大的比例:${ScreenUtil().scaleWidth}',
textAlign: TextAlign.center,
),
Text(
'高度相对于设计稿放大的倍数:${ScreenUtil().scaleHeight}',
'高度相对于设计稿放大的比例:${ScreenUtil().scaleHeight}',
textAlign: TextAlign.center,
),
SizedBox(
Expand Down

0 comments on commit 7977d54

Please sign in to comment.