李卓原

优化example

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))),

303 KB | W: | H:

86.1 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin

321 KB | W: | H:

87.8 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
@@ -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(