flutter_package / flutter_screenutil

Go to a project
Toggle navigation Toggle navigation pinning
李卓原
bd215004 1 parent 85dfb48e

0.4.0优化字体适配方法

Inline Side-by-side
Showing 8 changed files with 59 additions and 49 deletions
# Generated by pub on 2018-10-17 15:16:22.083978.
# Generated by pub on 2018-10-17 16:39:18.833879.
analyzer:file:///C:/Users/Frank/AppData/Roaming/Pub/Cache/hosted/pub.dartlang.org/analyzer-0.32.4/lib/
args:file:///C:/Users/Frank/AppData/Roaming/Pub/Cache/hosted/pub.dartlang.org/args-1.5.0/lib/
async:file:///C:/Users/Frank/AppData/Roaming/Pub/Cache/hosted/pub.dartlang.org/async-2.0.8/lib/
... ...
... ... @@ -9,3 +9,6 @@
## [0.3.0] - Perfect documentation
Width is enlarged relative to the design draft => The ratio of font and width to the size of the design
Height is enlarged relative to the design draft => The ratio of height width to the size of the design
## [0.4.0] - Optimize font adaptation method
... ...
... ... @@ -16,7 +16,7 @@ dependencies:
flutter:
sdk: flutter
# add flutter_ScreenUtil
flutter_screenutil: ^0.3.1
flutter_screenutil: ^0.4.0
```
### Add the following imports to your Dart code:
... ... @@ -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 ratio of font and width to the size of the design
ScreenUtil().scaleHeight //The ratio of height width to the size of the design
ScreenUtil().scaleWidth //Ratio of actual width dp to design draft px
ScreenUtil().scaleHeight //Ratio of actual height dp to design draft px
```
... ... @@ -100,9 +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(
'The ratio of font and width to the size of the design:${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 * ScreenUtil.pixelRatio}'); //The width is enlarged relative to the design draft
print(
'The ratio of height width to the size of the design:${ScreenUtil().scaleHeight}'); //The height is enlarged relative to the design draft
'The ratio of height width to the size of the design:${ScreenUtil().scaleHeight * ScreenUtil.pixelRatio}'); //The height is enlarged relative to the design draft
return new Scaffold(
appBar: new AppBar(
... ... @@ -122,7 +122,7 @@ import 'package:flutter_screenutil/flutter_screenutil.dart';
'My width:${ScreenUtil().setWidth(375)}dp',
style: TextStyle(
color: Colors.white,
fontSize: ScreenUtil().setSp(28, false)),
fontSize: ScreenUtil().setSp(12, false)),
),
),
Container(
... ... @@ -132,7 +132,7 @@ import 'package:flutter_screenutil/flutter_screenutil.dart';
child: Text('My width:${ScreenUtil().setWidth(375)}dp',
style: TextStyle(
color: Colors.white,
fontSize: ScreenUtil().setSp(28, false))),
fontSize: ScreenUtil().setSp(12, false))),
),
],
),
... ... @@ -142,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(
'The ratio of font and width to the size of the design:${ScreenUtil().scaleWidth}',
'The ratio of font and width to the size of the design:${ScreenUtil().scaleWidth * ScreenUtil.pixelRatio}',
textAlign: TextAlign.center,
),
Text(
'The ratio of height width to the size of the design:${ScreenUtil().scaleHeight}',
'The ratio of height width to the size of the design:${ScreenUtil().scaleHeight * ScreenUtil.pixelRatio}',
textAlign: TextAlign.center,
),
SizedBox(
... ... @@ -157,13 +157,17 @@ import 'package:flutter_screenutil/flutter_screenutil.dart';
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'My font size is 28px and will not change with the system.',
'My font size is 14px on the design draft and will not change with the system.',
style: TextStyle(
color: Colors.black,
fontSize: ScreenUtil().setSp(28, false))),
Text('My font size is 28px and will change with the system.',
fontSize: ScreenUtil().setSp(14, false),
)),
Text(
'My font size is 14px on the design draft and will change with the system.',
style: TextStyle(
color: Colors.black, fontSize: ScreenUtil().setSp(28))),
color: Colors.black,
fontSize: ScreenUtil().setSp(14),
)),
],
)
],
... ...
... ... @@ -19,7 +19,7 @@ dependencies:
flutter:
sdk: flutter
# 添加依赖
flutter_screenutil: ^0.3.1
flutter_screenutil: ^0.4.0
```
### 在每个使用的地方导入包：
... ... @@ -77,8 +77,8 @@ for example:
ScreenUtil.statusBarHeight //状态栏高度 刘海屏会更高 单位px
ScreenUtil.textScaleFactory //系统字体缩放比例
ScreenUtil().scaleWidth //字体和宽度相对设计稿放大的比例
ScreenUtil().scaleHeight //高度相对于设计稿放大的比例
ScreenUtil().scaleWidth // 实际宽度的dp与设计稿px的比例
ScreenUtil().scaleHeight // 实际高度的dp与设计稿px的比例
```
... ... @@ -88,7 +88,7 @@ import 'package:flutter_screenutil/flutter_screenutil.dart';
...
@override
@override
Widget build(BuildContext context) {
//设置适配尺寸 (填入设计稿中设备的屏幕尺寸) 假如设计稿是按iPhone6的尺寸设计的(iPhone6 750*1334)
ScreenUtil.instance = ScreenUtil(width: 750, height: 1334)..init(context);
... ... @@ -100,9 +100,9 @@ import 'package:flutter_screenutil/flutter_screenutil.dart';
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
'实际宽度的dp与设计稿px的比例:${ScreenUtil().scaleWidth * ScreenUtil.pixelRatio}'); //The width is enlarged relative to the design draft
print(
'高度相对于设计稿放大的比例:${ScreenUtil().scaleHeight}'); //The height is enlarged relative to the design draft
'实际高度的dp与设计稿px的比例:${ScreenUtil().scaleHeight * ScreenUtil.pixelRatio}'); //The height is enlarged relative to the design draft
print('系统的字体缩放比例:${ScreenUtil.textScaleFactory}');
return new Scaffold(
... ... @@ -143,11 +143,11 @@ import 'package:flutter_screenutil/flutter_screenutil.dart';
Text('底部安全区距离:${ScreenUtil.bottomBarHeight}px'),
Text('状态栏高度:${ScreenUtil.statusBarHeight}px'),
Text(
'字体和宽度相对设计稿放大的比例:${ScreenUtil().scaleWidth}',
'实际宽度的dp与设计稿px的比例:${ScreenUtil().scaleWidth * ScreenUtil.pixelRatio}',
textAlign: TextAlign.center,
),
Text(
'高度相对于设计稿放大的比例:${ScreenUtil().scaleHeight}',
'实际高度的dp与设计稿px的比例:${ScreenUtil().scaleHeight * ScreenUtil.pixelRatio}',
textAlign: TextAlign.center,
),
SizedBox(
... ... @@ -157,13 +157,13 @@ import 'package:flutter_screenutil/flutter_screenutil.dart';
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text('我的文字大小是28px，不会随着系统的文字大小变化',
Text('我的文字大小是14px，不会随着系统的文字大小变化',
style: TextStyle(
color: Colors.black,
fontSize: ScreenUtil().setSp(28, false))),
Text('我的文字大小是28px，会随着系统的文字大小变化',
fontSize: ScreenUtil().setSp(14, false))),
Text('我的文字大小是14px，会随着系统的文字大小变化',
style: TextStyle(
color: Colors.black, fontSize: ScreenUtil().setSp(28))),
color: Colors.black, fontSize: ScreenUtil().setSp(14))),
],
)
],
... ...
... ... @@ -41,10 +41,9 @@ class _MyHomePageState extends State<MyHomePage> {
print(
'Status bar height:${ScreenUtil.statusBarHeight}px'); //Status bar height , Notch will be higher Unit px
print(
'The ratio of font and width to the size of the design:${ScreenUtil().scaleWidth}'); //The width is enlarged relative to the design draft
'Ratio of actual width dp to design draft px:${ScreenUtil().scaleWidth * ScreenUtil.pixelRatio}'); //The width is enlarged relative to the design draft
print(
'The ratio of height width to the size of the design:${ScreenUtil().scaleHeight}'); //The height is enlarged relative to the design draft
'Ratio of actual height dp to design draft px:${ScreenUtil().scaleHeight * ScreenUtil.pixelRatio}'); //The height is enlarged relative to the design draft
return new Scaffold(
appBar: new AppBar(
title: new Text(widget.title),
... ... @@ -63,7 +62,7 @@ class _MyHomePageState extends State<MyHomePage> {
'My width:${ScreenUtil().setWidth(375)}dp',
style: TextStyle(
color: Colors.white,
fontSize: ScreenUtil().setSp(28, false)),
fontSize: ScreenUtil().setSp(12, false)),
),
),
Container(
... ... @@ -73,7 +72,7 @@ class _MyHomePageState extends State<MyHomePage> {
child: Text('My width:${ScreenUtil().setWidth(375)}dp',
style: TextStyle(
color: Colors.white,
fontSize: ScreenUtil().setSp(28, false))),
fontSize: ScreenUtil().setSp(12, false))),
),
],
),
... ... @@ -83,11 +82,11 @@ class _MyHomePageState extends State<MyHomePage> {
Text('Bottom safe zone distance:${ScreenUtil.bottomBarHeight}px'),
Text('Status bar height:${ScreenUtil.statusBarHeight}px'),
Text(
'The ratio of font and width to the size of the design:${ScreenUtil().scaleWidth}',
'The ratio of font and width to the size of the design:${ScreenUtil().scaleWidth * ScreenUtil.pixelRatio}',
textAlign: TextAlign.center,
),
Text(
'The ratio of height width to the size of the design:${ScreenUtil().scaleHeight}',
'The ratio of height width to the size of the design:${ScreenUtil().scaleHeight * ScreenUtil.pixelRatio}',
textAlign: TextAlign.center,
),
SizedBox(
... ... @@ -98,13 +97,17 @@ class _MyHomePageState extends State<MyHomePage> {
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'My font size is 28px and will not change with the system.',
'My font size is 14px on the design draft and will not change with the system.',
style: TextStyle(
color: Colors.black,
fontSize: ScreenUtil().setSp(28, false))),
Text('My font size is 28px and will change with the system.',
fontSize: ScreenUtil().setSp(14, false),
)),
Text(
'My font size is 14px on the design draft and will change with the system.',
style: TextStyle(
color: Colors.black, fontSize: ScreenUtil().setSp(28))),
color: Colors.black,
fontSize: ScreenUtil().setSp(14),
)),
],
)
],
... ...
... ... @@ -40,9 +40,9 @@ class _MyHomePageState extends State<MyHomePage> {
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
'实际宽度的dp与设计稿px的比例:${ScreenUtil().scaleWidth * ScreenUtil.pixelRatio}'); //The width is enlarged relative to the design draft
print(
'高度相对于设计稿放大的比例:${ScreenUtil().scaleHeight}'); //The height is enlarged relative to the design draft
'实际高度的dp与设计稿px的比例:${ScreenUtil().scaleHeight * ScreenUtil.pixelRatio}'); //The height is enlarged relative to the design draft
print('系统的字体缩放比例:${ScreenUtil.textScaleFactory}');
return new Scaffold(
... ... @@ -83,11 +83,11 @@ class _MyHomePageState extends State<MyHomePage> {
Text('底部安全区距离:${ScreenUtil.bottomBarHeight}px'),
Text('状态栏高度:${ScreenUtil.statusBarHeight}px'),
Text(
'字体和宽度相对设计稿放大的比例:${ScreenUtil().scaleWidth}',
'实际宽度的dp与设计稿px的比例:${ScreenUtil().scaleWidth * ScreenUtil.pixelRatio}',
textAlign: TextAlign.center,
),
Text(
'高度相对于设计稿放大的比例:${ScreenUtil().scaleHeight}',
'实际高度的dp与设计稿px的比例:${ScreenUtil().scaleHeight * ScreenUtil.pixelRatio}',
textAlign: TextAlign.center,
),
SizedBox(
... ... @@ -97,13 +97,13 @@ class _MyHomePageState extends State<MyHomePage> {
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text('我的文字大小是28px，不会随着系统的文字大小变化',
Text('我的文字大小是14px，不会随着系统的文字大小变化',
style: TextStyle(
color: Colors.black,
fontSize: ScreenUtil().setSp(28, false))),
Text('我的文字大小是28px，会随着系统的文字大小变化',
fontSize: ScreenUtil().setSp(14, false))),
Text('我的文字大小是14px，会随着系统的文字大小变化',
style: TextStyle(
color: Colors.black, fontSize: ScreenUtil().setSp(28))),
color: Colors.black, fontSize: ScreenUtil().setSp(14))),
],
)
],
... ...
... ... @@ -62,7 +62,7 @@ class ScreenUtil {
///底部安全区距离
static double get bottomBarHeight => _bottomBarHeight * _pixelRatio;
///相对于设计稿放大的倍数
///实际的dp与设计稿px的比例
get scaleWidth => _screenWidth / instance._designWidth;
get scaleHeight => _screenHeight / instance._designHeight;
... ... @@ -82,6 +82,6 @@ class ScreenUtil {
///@param allowFontScaling 控制字体是否要根据系统的“字体大小”辅助选项来进行缩放。默认值为true。
///@param allowFontScaling Specifies whether fonts should scale to respect Text Size accessibility settings. The default is true.
setSp(int fontSize, [allowFontScaling = true]) => allowFontScaling
? setWidth(fontSize) * _textScaleFactor
: setWidth(fontSize);
? setWidth(fontSize) * _pixelRatio * _textScaleFactor
: setWidth(fontSize) * _pixelRatio;
}
... ...
name: flutter_screenutil
description: A flutter plugin for adapting screen and font size.Guaranteed to look good on different models
version: 0.3.1
version: 0.4.0
author: LiZhuoyuan <zhuoyuan93@gmail.com>
homepage: https://github.com/OpenFlutter/flutter_ScreenUtil
... ...