Showing
6 changed files
with
28 additions
and
30 deletions
1 | 1 | ||
2 | # flutter_ScreenUtil | 2 | # flutter_ScreenUtil |
3 | -**A flutter plugin for adapting screen and font size.Guaranteed to look good on different models** | 3 | +**A flutter plugin for adapting screen and font size.Let your UI display a reasonable layout on different screen sizes!** |
4 | 4 | ||
5 | [中文文档](https://github.com/OpenFlutter/flutter_ScreenUtil/blob/master/README_CN.md) | 5 | [中文文档](https://github.com/OpenFlutter/flutter_ScreenUtil/blob/master/README_CN.md) |
6 | 6 | ||
@@ -76,8 +76,8 @@ Other related apis: | @@ -76,8 +76,8 @@ Other related apis: | ||
76 | ScreenUtil.statusBarHeight //Status bar height , Notch will be higher Unit px | 76 | ScreenUtil.statusBarHeight //Status bar height , Notch will be higher Unit px |
77 | ScreenUtil.textScaleFactory //System font scaling factor | 77 | ScreenUtil.textScaleFactory //System font scaling factor |
78 | 78 | ||
79 | - ScreenUtil().scaleWidth //The width is enlarged relative to the design draft | ||
80 | - ScreenUtil().scaleHeight //Height relative to the magnification of the design draft | 79 | + ScreenUtil().scaleWidth //The ratio of font and width to the size of the design |
80 | + ScreenUtil().scaleHeight //The ratio of height width to the size of the design | ||
81 | 81 | ||
82 | ``` | 82 | ``` |
83 | 83 | ||
@@ -100,10 +100,9 @@ import 'package:flutter_screenutil/flutter_screenutil.dart'; | @@ -100,10 +100,9 @@ import 'package:flutter_screenutil/flutter_screenutil.dart'; | ||
100 | print( | 100 | print( |
101 | 'Status bar height:${ScreenUtil.statusBarHeight}px'); //Status bar height , Notch will be higher Unit px | 101 | 'Status bar height:${ScreenUtil.statusBarHeight}px'); //Status bar height , Notch will be higher Unit px |
102 | print( | 102 | print( |
103 | - 'Width is enlarged relative to the design draft:${ScreenUtil().scaleWidth}'); //The width is enlarged relative to the design draft | 103 | + 'The ratio of font and width to the size of the design:${ScreenUtil().scaleWidth}'); //The width is enlarged relative to the design draft |
104 | print( | 104 | print( |
105 | - 'Height is enlarged relative to the design draft:${ScreenUtil().scaleHeight}'); //The height is enlarged relative to the design draft | ||
106 | - print('System font scaling:${ScreenUtil.textScaleFactory}'); | 105 | + 'The ratio of height width to the size of the design:${ScreenUtil().scaleHeight}'); //The height is enlarged relative to the design draft |
107 | 106 | ||
108 | return new Scaffold( | 107 | return new Scaffold( |
109 | appBar: new AppBar( | 108 | appBar: new AppBar( |
@@ -143,11 +142,11 @@ import 'package:flutter_screenutil/flutter_screenutil.dart'; | @@ -143,11 +142,11 @@ import 'package:flutter_screenutil/flutter_screenutil.dart'; | ||
143 | Text('Bottom safe zone distance:${ScreenUtil.bottomBarHeight}px'), | 142 | Text('Bottom safe zone distance:${ScreenUtil.bottomBarHeight}px'), |
144 | Text('Status bar height:${ScreenUtil.statusBarHeight}px'), | 143 | Text('Status bar height:${ScreenUtil.statusBarHeight}px'), |
145 | Text( | 144 | Text( |
146 | - 'Width is enlarged relative to the design draft:${ScreenUtil().scaleWidth}', | 145 | + 'The ratio of font and width to the size of the design:${ScreenUtil().scaleWidth}', |
147 | textAlign: TextAlign.center, | 146 | textAlign: TextAlign.center, |
148 | ), | 147 | ), |
149 | Text( | 148 | Text( |
150 | - 'Height is enlarged relative to the design draft:${ScreenUtil().scaleHeight}', | 149 | + 'The ratio of height width to the size of the design:${ScreenUtil().scaleHeight}', |
151 | textAlign: TextAlign.center, | 150 | textAlign: TextAlign.center, |
152 | ), | 151 | ), |
153 | SizedBox( | 152 | SizedBox( |
1 | 1 | ||
2 | # flutter_ScreenUtil | 2 | # flutter_ScreenUtil |
3 | -**flutter 屏幕适配方案,让你的UI不会因为在不同设备上变得难看** | 3 | +**flutter 屏幕适配方案,让你的UI在不同尺寸的屏幕上都能显示合理的布局!** |
4 | 4 | ||
5 | [README of English](https://github.com/OpenFlutter/flutter_ScreenUtil/blob/master/README.md) | 5 | [README of English](https://github.com/OpenFlutter/flutter_ScreenUtil/blob/master/README.md) |
6 | 6 | ||
@@ -77,8 +77,8 @@ for example: | @@ -77,8 +77,8 @@ for example: | ||
77 | ScreenUtil.statusBarHeight //状态栏高度 刘海屏会更高 单位px | 77 | ScreenUtil.statusBarHeight //状态栏高度 刘海屏会更高 单位px |
78 | ScreenUtil.textScaleFactory //系统字体缩放比例 | 78 | ScreenUtil.textScaleFactory //系统字体缩放比例 |
79 | 79 | ||
80 | - ScreenUtil().scaleWidth //宽度相对于设计稿放大的倍数 | ||
81 | - ScreenUtil().scaleHeight //高度相对于设计稿放大的倍数 | 80 | + ScreenUtil().scaleWidth //字体和宽度相对设计稿放大的比例 |
81 | + ScreenUtil().scaleHeight //高度相对于设计稿放大的比例 | ||
82 | 82 | ||
83 | ``` | 83 | ``` |
84 | 84 | ||
@@ -88,7 +88,7 @@ import 'package:flutter_screenutil/flutter_screenutil.dart'; | @@ -88,7 +88,7 @@ import 'package:flutter_screenutil/flutter_screenutil.dart'; | ||
88 | 88 | ||
89 | ... | 89 | ... |
90 | 90 | ||
91 | - @override | 91 | +@override |
92 | Widget build(BuildContext context) { | 92 | Widget build(BuildContext context) { |
93 | //设置适配尺寸 (填入设计稿中设备的屏幕尺寸) 假如设计稿是按iPhone6的尺寸设计的(iPhone6 750*1334) | 93 | //设置适配尺寸 (填入设计稿中设备的屏幕尺寸) 假如设计稿是按iPhone6的尺寸设计的(iPhone6 750*1334) |
94 | ScreenUtil.instance = ScreenUtil(width: 750, height: 1334)..init(context); | 94 | ScreenUtil.instance = ScreenUtil(width: 750, height: 1334)..init(context); |
@@ -100,9 +100,9 @@ import 'package:flutter_screenutil/flutter_screenutil.dart'; | @@ -100,9 +100,9 @@ import 'package:flutter_screenutil/flutter_screenutil.dart'; | ||
100 | print( | 100 | print( |
101 | '状态栏高度:${ScreenUtil.statusBarHeight}px'); //Status bar height , Notch will be higher Unit px | 101 | '状态栏高度:${ScreenUtil.statusBarHeight}px'); //Status bar height , Notch will be higher Unit px |
102 | print( | 102 | print( |
103 | - '宽度相对于设计稿放大的倍数:${ScreenUtil().scaleWidth}'); //The width is enlarged relative to the design draft | 103 | + '字体和宽度相对设计稿放大的比例:${ScreenUtil().scaleWidth}'); //The width is enlarged relative to the design draft |
104 | print( | 104 | print( |
105 | - '高度相对于设计稿放大的倍数:${ScreenUtil().scaleHeight}'); //The height is enlarged relative to the design draft | 105 | + '高度相对于设计稿放大的比例:${ScreenUtil().scaleHeight}'); //The height is enlarged relative to the design draft |
106 | print('系统的字体缩放比例:${ScreenUtil.textScaleFactory}'); | 106 | print('系统的字体缩放比例:${ScreenUtil.textScaleFactory}'); |
107 | 107 | ||
108 | return new Scaffold( | 108 | return new Scaffold( |
@@ -120,7 +120,7 @@ import 'package:flutter_screenutil/flutter_screenutil.dart'; | @@ -120,7 +120,7 @@ import 'package:flutter_screenutil/flutter_screenutil.dart'; | ||
120 | height: ScreenUtil().setHeight(200), | 120 | height: ScreenUtil().setHeight(200), |
121 | color: Colors.red, | 121 | color: Colors.red, |
122 | child: Text( | 122 | child: Text( |
123 | - 'My width:${ScreenUtil().setWidth(375)}dp', | 123 | + '我的宽度:${ScreenUtil().setWidth(375)}dp', |
124 | style: TextStyle( | 124 | style: TextStyle( |
125 | color: Colors.white, | 125 | color: Colors.white, |
126 | fontSize: ScreenUtil().setSp(28, false)), | 126 | fontSize: ScreenUtil().setSp(28, false)), |
@@ -130,35 +130,34 @@ import 'package:flutter_screenutil/flutter_screenutil.dart'; | @@ -130,35 +130,34 @@ import 'package:flutter_screenutil/flutter_screenutil.dart'; | ||
130 | width: ScreenUtil().setWidth(375), | 130 | width: ScreenUtil().setWidth(375), |
131 | height: ScreenUtil().setHeight(200), | 131 | height: ScreenUtil().setHeight(200), |
132 | color: Colors.blue, | 132 | color: Colors.blue, |
133 | - child: Text('My width:${ScreenUtil().setWidth(375)}dp', | 133 | + child: Text('我的宽度:${ScreenUtil().setWidth(375)}dp', |
134 | style: TextStyle( | 134 | style: TextStyle( |
135 | color: Colors.white, | 135 | color: Colors.white, |
136 | fontSize: ScreenUtil().setSp(28, false))), | 136 | fontSize: ScreenUtil().setSp(28, false))), |
137 | ), | 137 | ), |
138 | ], | 138 | ], |
139 | ), | 139 | ), |
140 | - Text('Device width:${ScreenUtil.screenWidth}px'), | ||
141 | - Text('Device height:${ScreenUtil.screenHeight}px'), | ||
142 | - Text('Device pixel density:${ScreenUtil.pixelRatio}'), | ||
143 | - Text('Bottom safe zone distance:${ScreenUtil.bottomBarHeight}px'), | ||
144 | - Text('Status bar height:${ScreenUtil.statusBarHeight}px'), | 140 | + Text('设备宽度:${ScreenUtil.screenWidth}px'), |
141 | + Text('设备高度:${ScreenUtil.screenHeight}px'), | ||
142 | + Text('设备的像素密度:${ScreenUtil.pixelRatio}'), | ||
143 | + Text('底部安全区距离:${ScreenUtil.bottomBarHeight}px'), | ||
144 | + Text('状态栏高度:${ScreenUtil.statusBarHeight}px'), | ||
145 | Text( | 145 | Text( |
146 | - 'Width is enlarged relative to the design draft:${ScreenUtil().scaleWidth}', | 146 | + '字体和宽度相对设计稿放大的比例:${ScreenUtil().scaleWidth}', |
147 | textAlign: TextAlign.center, | 147 | textAlign: TextAlign.center, |
148 | ), | 148 | ), |
149 | Text( | 149 | Text( |
150 | - 'Height is enlarged relative to the design draft:${ScreenUtil().scaleHeight}', | 150 | + '高度相对于设计稿放大的比例:${ScreenUtil().scaleHeight}', |
151 | textAlign: TextAlign.center, | 151 | textAlign: TextAlign.center, |
152 | ), | 152 | ), |
153 | SizedBox( | 153 | SizedBox( |
154 | height: ScreenUtil().setHeight(200), | 154 | height: ScreenUtil().setHeight(200), |
155 | ), | 155 | ), |
156 | - Text('System font scaling:${ScreenUtil.textScaleFactory}'), | 156 | + Text('系统的字体缩放比例:${ScreenUtil.textScaleFactory}'), |
157 | Column( | 157 | Column( |
158 | crossAxisAlignment: CrossAxisAlignment.start, | 158 | crossAxisAlignment: CrossAxisAlignment.start, |
159 | children: <Widget>[ | 159 | children: <Widget>[ |
160 | - Text( | ||
161 | - '我的文字大小是28px,不会随着系统的文字大小变化', | 160 | + Text('我的文字大小是28px,不会随着系统的文字大小变化', |
162 | style: TextStyle( | 161 | style: TextStyle( |
163 | color: Colors.black, | 162 | color: Colors.black, |
164 | fontSize: ScreenUtil().setSp(28, false))), | 163 | fontSize: ScreenUtil().setSp(28, false))), |
@@ -83,11 +83,11 @@ class _MyHomePageState extends State<MyHomePage> { | @@ -83,11 +83,11 @@ class _MyHomePageState extends State<MyHomePage> { | ||
83 | Text('Bottom safe zone distance:${ScreenUtil.bottomBarHeight}px'), | 83 | Text('Bottom safe zone distance:${ScreenUtil.bottomBarHeight}px'), |
84 | Text('Status bar height:${ScreenUtil.statusBarHeight}px'), | 84 | Text('Status bar height:${ScreenUtil.statusBarHeight}px'), |
85 | Text( | 85 | Text( |
86 | - 'Width is enlarged relative to the design draft:${ScreenUtil().scaleWidth}', | 86 | + 'The ratio of font and width to the size of the design:${ScreenUtil().scaleWidth}', |
87 | textAlign: TextAlign.center, | 87 | textAlign: TextAlign.center, |
88 | ), | 88 | ), |
89 | Text( | 89 | Text( |
90 | - 'Height is enlarged relative to the design draft:${ScreenUtil().scaleHeight}', | 90 | + 'The ratio of height width to the size of the design:${ScreenUtil().scaleHeight}', |
91 | textAlign: TextAlign.center, | 91 | textAlign: TextAlign.center, |
92 | ), | 92 | ), |
93 | SizedBox( | 93 | SizedBox( |
@@ -83,11 +83,11 @@ class _MyHomePageState extends State<MyHomePage> { | @@ -83,11 +83,11 @@ class _MyHomePageState extends State<MyHomePage> { | ||
83 | Text('底部安全区距离:${ScreenUtil.bottomBarHeight}px'), | 83 | Text('底部安全区距离:${ScreenUtil.bottomBarHeight}px'), |
84 | Text('状态栏高度:${ScreenUtil.statusBarHeight}px'), | 84 | Text('状态栏高度:${ScreenUtil.statusBarHeight}px'), |
85 | Text( | 85 | Text( |
86 | - '宽度相对于设计稿放大的倍数:${ScreenUtil().scaleWidth}', | 86 | + '字体和宽度相对设计稿放大的比例:${ScreenUtil().scaleWidth}', |
87 | textAlign: TextAlign.center, | 87 | textAlign: TextAlign.center, |
88 | ), | 88 | ), |
89 | Text( | 89 | Text( |
90 | - '高度相对于设计稿放大的倍数:${ScreenUtil().scaleHeight}', | 90 | + '高度相对于设计稿放大的比例:${ScreenUtil().scaleHeight}', |
91 | textAlign: TextAlign.center, | 91 | textAlign: TextAlign.center, |
92 | ), | 92 | ), |
93 | SizedBox( | 93 | SizedBox( |
-
Please register or login to post a comment