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
# 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)
... ... @@ -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
```
... ... @@ -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);
... ... @@ -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(
... ... @@ -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(
... ...
# flutter_ScreenUtil
**flutter 屏幕适配方案，让你的UI不会因为在不同设备上变得难看**
**flutter 屏幕适配方案，让你的UI在不同尺寸的屏幕上都能显示合理的布局!**
[README of English](https://github.com/OpenFlutter/flutter_ScreenUtil/blob/master/README.md)
... ... @@ -77,8 +77,8 @@ for example:
ScreenUtil.statusBarHeight //状态栏高度 刘海屏会更高 单位px
ScreenUtil.textScaleFactory //系统字体缩放比例
ScreenUtil().scaleWidth //宽度相对于设计稿放大的倍数
ScreenUtil().scaleHeight //高度相对于设计稿放大的倍数
ScreenUtil().scaleWidth //字体和宽度相对设计稿放大的比例
ScreenUtil().scaleHeight //高度相对于设计稿放大的比例
```
... ... @@ -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))),
],
)
],
),
),
);
}
```
### 使用示例:
... ...

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> {
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(
... ...
... ... @@ -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(
... ...