flutter_package / flutter_screenutil

Go to a project
Toggle navigation Toggle navigation pinning
李卓原
7977d548 1 parent db8c25ae

优化example

Inline Side-by-side
Showing 6 changed files with 98 additions and 100 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
@@ -87,7 +87,7 @@ import 'package:flutter_screenutil/flutter_screenutil.dart'; @@ -87,7 +87,7 @@ import 'package:flutter_screenutil/flutter_screenutil.dart';
87 87
88 ... 88 ...
89 89
90 - @override 90 + @override
91 Widget build(BuildContext context) { 91 Widget build(BuildContext context) {
92 ///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) 92 ///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)
93 ScreenUtil.instance = ScreenUtil(width: 750, height: 1334)..init(context); 93 ScreenUtil.instance = ScreenUtil(width: 750, height: 1334)..init(context);
@@ -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,90 +88,89 @@ import 'package:flutter_screenutil/flutter_screenutil.dart'; @@ -88,90 +88,89 @@ import 'package:flutter_screenutil/flutter_screenutil.dart';
88 88
89 ... 89 ...
90 90
91 - @override  
92 - Widget build(BuildContext context) {  
93 - //设置适配尺寸 (填入设计稿中设备的屏幕尺寸) 假如设计稿是按iPhone6的尺寸设计的(iPhone6 750*1334)  
94 - ScreenUtil.instance = ScreenUtil(width: 750, height: 1334)..init(context);  
95 - print('设备宽度:${ScreenUtil.screenWidth}'); //Device width  
96 - print('设备高度:${ScreenUtil.screenHeight}'); //Device height  
97 - print('设备的像素密度:${ScreenUtil.pixelRatio}'); //Device pixel density  
98 - print(  
99 - '底部安全区距离:${ScreenUtil.bottomBarHeight}'); //Bottom safe zone distance，suitable for buttons with full screen  
100 - print(  
101 - '状态栏高度:${ScreenUtil.statusBarHeight}px'); //Status bar height , Notch will be higher Unit px  
102 - print(  
103 - '宽度相对于设计稿放大的倍数:${ScreenUtil().scaleWidth}'); //The width is enlarged relative to the design draft  
104 - print(  
105 - '高度相对于设计稿放大的倍数:${ScreenUtil().scaleHeight}'); //The height is enlarged relative to the design draft  
106 - print('系统的字体缩放比例:${ScreenUtil.textScaleFactory}');  
107 -  
108 - return new Scaffold(  
109 - appBar: new AppBar(  
110 - title: new Text(widget.title),  
111 - ),  
112 - body: new Center(  
113 - child: Column(  
114 - crossAxisAlignment: CrossAxisAlignment.center,  
115 - children: <Widget>[  
116 - Row(  
117 - children: <Widget>[  
118 - Container(  
119 - width: ScreenUtil().setWidth(375),  
120 - height: ScreenUtil().setHeight(200),  
121 - color: Colors.red,  
122 - child: Text(  
123 - 'My width:${ScreenUtil().setWidth(375)}dp',  
124 - style: TextStyle(  
125 - color: Colors.white,  
126 - fontSize: ScreenUtil().setSp(28, false)),  
127 - ),  
128 - ),  
129 - Container(  
130 - width: ScreenUtil().setWidth(375),  
131 - height: ScreenUtil().setHeight(200),  
132 - color: Colors.blue,  
133 - child: Text('My width:${ScreenUtil().setWidth(375)}dp',  
134 - style: TextStyle(  
135 - color: Colors.white,  
136 - fontSize: ScreenUtil().setSp(28, false))),  
137 - ),  
138 - ],  
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'),  
145 - Text(  
146 - 'Width is enlarged relative to the design draft:${ScreenUtil().scaleWidth}',  
147 - textAlign: TextAlign.center,  
148 - ),  
149 - Text(  
150 - 'Height is enlarged relative to the design draft:${ScreenUtil().scaleHeight}',  
151 - textAlign: TextAlign.center,  
152 - ),  
153 - SizedBox(  
154 - height: ScreenUtil().setHeight(200),  
155 - ),  
156 - Text('System font scaling:${ScreenUtil.textScaleFactory}'),  
157 - Column(  
158 - crossAxisAlignment: CrossAxisAlignment.start,  
159 - children: <Widget>[  
160 - Text(  
161 - '我的文字大小是28px，不会随着系统的文字大小变化',  
162 - style: TextStyle(  
163 - color: Colors.black,  
164 - fontSize: ScreenUtil().setSp(28, false))),  
165 - Text('我的文字大小是28px，会随着系统的文字大小变化',  
166 - style: TextStyle(  
167 - color: Colors.black, fontSize: ScreenUtil().setSp(28))),  
168 - ],  
169 - )  
170 - ],  
171 - ),  
172 - ),  
173 - );  
174 - } 91 +@override
  92 + Widget build(BuildContext context) {
  93 + //设置适配尺寸 (填入设计稿中设备的屏幕尺寸) 假如设计稿是按iPhone6的尺寸设计的(iPhone6 750*1334)
  94 + ScreenUtil.instance = ScreenUtil(width: 750, height: 1334)..init(context);
  95 + print('设备宽度:${ScreenUtil.screenWidth}'); //Device width
  96 + print('设备高度:${ScreenUtil.screenHeight}'); //Device height
  97 + print('设备的像素密度:${ScreenUtil.pixelRatio}'); //Device pixel density
  98 + print(
  99 + '底部安全区距离:${ScreenUtil.bottomBarHeight}'); //Bottom safe zone distance，suitable for buttons with full screen
  100 + print(
  101 + '状态栏高度:${ScreenUtil.statusBarHeight}px'); //Status bar height , Notch will be higher Unit px
  102 + print(
  103 + '字体和宽度相对设计稿放大的比例:${ScreenUtil().scaleWidth}'); //The width is enlarged relative to the design draft
  104 + print(
  105 + '高度相对于设计稿放大的比例:${ScreenUtil().scaleHeight}'); //The height is enlarged relative to the design draft
  106 + print('系统的字体缩放比例:${ScreenUtil.textScaleFactory}');
  107 +
  108 + return new Scaffold(
  109 + appBar: new AppBar(
  110 + title: new Text(widget.title),
  111 + ),
  112 + body: new Center(
  113 + child: Column(
  114 + crossAxisAlignment: CrossAxisAlignment.center,
  115 + children: <Widget>[
  116 + Row(
  117 + children: <Widget>[
  118 + Container(
  119 + width: ScreenUtil().setWidth(375),
  120 + height: ScreenUtil().setHeight(200),
  121 + color: Colors.red,
  122 + child: Text(
  123 + '我的宽度:${ScreenUtil().setWidth(375)}dp',
  124 + style: TextStyle(
  125 + color: Colors.white,
  126 + fontSize: ScreenUtil().setSp(28, false)),
  127 + ),
  128 + ),
  129 + Container(
  130 + width: ScreenUtil().setWidth(375),
  131 + height: ScreenUtil().setHeight(200),
  132 + color: Colors.blue,
  133 + child: Text('我的宽度:${ScreenUtil().setWidth(375)}dp',
  134 + style: TextStyle(
  135 + color: Colors.white,
  136 + fontSize: ScreenUtil().setSp(28, false))),
  137 + ),
  138 + ],
  139 + ),
  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(
  146 + '字体和宽度相对设计稿放大的比例:${ScreenUtil().scaleWidth}',
  147 + textAlign: TextAlign.center,
  148 + ),
  149 + Text(
  150 + '高度相对于设计稿放大的比例:${ScreenUtil().scaleHeight}',
  151 + textAlign: TextAlign.center,
  152 + ),
  153 + SizedBox(
  154 + height: ScreenUtil().setHeight(200),
  155 + ),
  156 + Text('系统的字体缩放比例:${ScreenUtil.textScaleFactory}'),
  157 + Column(
  158 + crossAxisAlignment: CrossAxisAlignment.start,
  159 + children: <Widget>[
  160 + Text('我的文字大小是28px，不会随着系统的文字大小变化',
  161 + style: TextStyle(
  162 + color: Colors.black,
  163 + fontSize: ScreenUtil().setSp(28, false))),
  164 + Text('我的文字大小是28px，会随着系统的文字大小变化',
  165 + style: TextStyle(
  166 + color: Colors.black, fontSize: ScreenUtil().setSp(28))),
  167 + ],
  168 + )
  169 + ],
  170 + ),
  171 + ),
  172 + );
  173 + }
175 ``` 174 ```
176 175
177 ### 使用示例: 176 ### 使用示例:

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(