flutter_package / flutter_screenutil

Go to a project
Toggle navigation Toggle navigation pinning
lizhuoyuan
0fb6206c 1 parent acfc24ac

1.1.0 新增对num的扩展函数

Inline Side-by-side
Showing 13 changed files with 273 additions and 170 deletions
# Generated by pub on 2020-01-06 17:46:26.285635.
# Generated by pub on 2020-03-17 15:00:35.134973.
archive:file:///D:/flutter/.pub-cache/hosted/pub.dartlang.org/archive-2.0.11/lib/
args:file:///D:/flutter/.pub-cache/hosted/pub.dartlang.org/args-1.5.2/lib/
async:file:///D:/flutter/.pub-cache/hosted/pub.dartlang.org/async-2.4.0/lib/
... ...
... ... @@ -5,6 +5,14 @@
* @LastEditTime: 2020年1月14日 12:11:02
* @Description: Update log
-->
#1.1.0
- support ExtensionMethod Dart-SDK-2.6.0
- you can use 'width: 50.w' instead of 'width: ScreenUtil().setWidth(50)'
'50.h' instead of 'ScreenUtil().setHeight(50)'
'24.sp' instead of 'ScreenUtil().setSp(24)'
'24.ssp' instead of 'ScreenUtil().setSp(24, allowFontScalingSelf: true)'
# 1.0.2
- fix #89
- 优化屏幕旋转效果
... ...
... ... @@ -60,6 +60,25 @@ ScreenUtil.init(context, width: 750, height: 1334, allowFontScaling: true);
### Use：
#### API
```dart
ScreenUtil().setWidth(540) (sdk>=2.6 : 540.w) //Adapted to screen width
ScreenUtil().setHeight(200) (sdk>=2.6 : 200.h) //Adapted to screen height
ScreenUtil().setSp(24) (sdk>=2.6 : 24.sp) //Adapter font
ScreenUtil().setSp(24, allowFontScalingSelf: true) (sdk>=2.6 : 24.ssp) //Adapter font(fonts will scale to respect Text Size accessibility settings)
ScreenUtil.pixelRatio //Device pixel density
ScreenUtil.screenWidth //Device width
ScreenUtil.screenHeight //Device height
ScreenUtil.bottomBarHeight //Bottom safe zone distance, suitable for buttons with full screen
ScreenUtil.statusBarHeight //Status bar height , Notch will be higher Unit px
ScreenUtil.textScaleFactor //System font scaling factor
ScreenUtil().scaleWidth //Ratio of actual width dp to design draft px
ScreenUtil().scaleHeight //Ratio of actual height dp to design draft px
```
#### Adapt screen size：
Pass the px size of the design draft：
... ... @@ -68,6 +87,23 @@ Adapted to screen width: `ScreenUtil().setWidth(540)`,
Adapted to screen height: `ScreenUtil().setHeight(200)`,
If your dart sdk>=2.6, you can use extension functions:
example:
instead of :
```
Container(
width: ScreenUtil().setWidth(50),
height:ScreenUtil().setHeight(200),
)
```
you can use it like this:
```
Container(
width: 50.w,
height:200.h
)
```
**Note**
Height is also adapted according to setWidth to ensure no deformation (when you want a square)
... ... @@ -122,20 +158,6 @@ Column(
)
```
#### Other related apis：
```dart
ScreenUtil.pixelRatio //Device pixel density
ScreenUtil.screenWidth //Device width
ScreenUtil.screenHeight //Device height
ScreenUtil.bottomBarHeight //Bottom safe zone distance, suitable for buttons with full screen
ScreenUtil.statusBarHeight //Status bar height , Notch will be higher Unit px
ScreenUtil.textScaleFactor //System font scaling factor
ScreenUtil().scaleWidth //Ratio of actual width dp to design draft px
ScreenUtil().scaleHeight //Ratio of actual height dp to design draft px
```
```dart
//import
import 'package:flutter/material.dart';
... ...
... ... @@ -62,9 +62,29 @@ ScreenUtil.init(context, width: 750, height: 1334, allowFontScaling: true);
```
### 使用：
### 使用
#### 适配尺寸：
#### API
```dart
ScreenUtil().setWidth(540) (sdk>=2.6 : 540.w) //根据屏幕宽度适配尺寸
ScreenUtil().setHeight(200) (sdk>=2.6 : 200.h) //根据屏幕高度适配尺寸
ScreenUtil().setSp(24) (sdk>=2.6 : 24.sp) //适配字体
ScreenUtil().setSp(24, allowFontScalingSelf: true) (sdk>=2.6 : 24.ssp) //适配字体(根据系统的“字体大小”辅助选项来进行缩放)
ScreenUtil.pixelRatio //设备的像素密度
ScreenUtil.screenWidth //设备宽度
ScreenUtil.screenHeight //设备高度
ScreenUtil.bottomBarHeight //底部安全区距离，适用于全面屏下面有按键的
ScreenUtil.statusBarHeight //状态栏高度 刘海屏会更高 单位px
ScreenUtil.textScaleFactor //系统字体缩放比例
ScreenUtil().scaleWidth // 实际宽度的dp与设计稿px的比例
ScreenUtil().scaleHeight // 实际高度的dp与设计稿px的比例
```
#### 适配尺寸
传入设计稿的px尺寸：
... ... @@ -94,15 +114,37 @@ Container(
),
```
如果你的dart sdk>=2.6,可以使用扩展函数:
example:
不用这个:
```
Container(
width: ScreenUtil().setWidth(50),
height:ScreenUtil().setHeight(200),
)
```
而是用这个:
```
Container(
width: 50.w,
height:200.h
)
```
#### 适配字体:
传入设计稿的px尺寸：
```
//传入字体大小，默认不根据系统的“字体大小”辅助选项来进行缩放(可在初始化ScreenUtil时设置allowFontScaling)
ScreenUtil().setSp(28)
或
28.sp (dart sdk>=2.6)
//传入字体大小，根据系统的“字体大小”辅助选项来进行缩放(如果某个地方不遵循全局的allowFontScaling设置)
ScreenUtil().setSp(24, allowFontScalingSelf: true)
或
24.ssp (dart sdk>=2.6)
//for example:
... ... @@ -123,20 +165,6 @@ Column(
)
```
#### 其他相关api：
```
ScreenUtil.pixelRatio //设备的像素密度
ScreenUtil.screenWidth //设备宽度
ScreenUtil.screenHeight //设备高度
ScreenUtil.bottomBarHeight //底部安全区距离，适用于全面屏下面有按键的
ScreenUtil.statusBarHeight //状态栏高度 刘海屏会更高 单位px
ScreenUtil.textScaleFactor //系统字体缩放比例
ScreenUtil().scaleWidth // 实际宽度的dp与设计稿px的比例
ScreenUtil().scaleHeight // 实际高度的dp与设计稿px的比例
```
```dart
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
... ...
... ... @@ -60,6 +60,25 @@ ScreenUtil.init(context, width: 750, height: 1334, allowFontScaling: true);
### Uso：
#### API
```dart
ScreenUtil().setWidth(540) (sdk>=2.6 : 540.w) //Adapted to screen width
ScreenUtil().setHeight(200) (sdk>=2.6 : 200.h) //Adapted to screen height
ScreenUtil().setSp(24) (sdk>=2.6 : 24.sp) //Adapter font
ScreenUtil().setSp(24, allowFontScalingSelf: true) (sdk>=2.6 : 24.ssp) //Adapter font(fonts will scale to respect Text Size accessibility settings)
ScreenUtil.pixelRatio //Device pixel density
ScreenUtil.screenWidth //Device width
ScreenUtil.screenHeight //Device height
ScreenUtil.bottomBarHeight //Bottom safe zone distance, suitable for buttons with full screen
ScreenUtil.statusBarHeight //Status bar height , Notch will be higher Unit px
ScreenUtil.textScaleFactor //System font scaling factor
ScreenUtil().scaleWidth //Ratio of actual width dp to design draft px
ScreenUtil().scaleHeight //Ratio of actual height dp to design draft px
```
#### Adaptar o tamanho da tela：
Informe o tamanho em pixels do protótipo de design:
... ... @@ -68,6 +87,24 @@ Adaptado à largura da tela: `ScreenUtil().setWidth(540)`,
Adaptado à altura da tela: `ScreenUtil().setHeight(200)`,
If your dart sdk>=2.6, you can use extension functions:
example:
instead of :
```
Container(
width: ScreenUtil().setWidth(50),
height:ScreenUtil().setHeight(200),
)
```
you can use it like this:
```
Container(
width: 50.w,
height:200.h
)
```
**Nota**
Altura também é adaptada de acordo com o setWidth para garantir que não tenha deformação (quando quiser um quadrado)
... ...
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
void main() => runApp(MyApp());
... ... @@ -58,12 +57,12 @@ class _ExampleWidgetState extends State<ExampleWidget> {
children: <Widget>[
Container(
padding: EdgeInsets.all(ScreenUtil().setWidth(10)),
width: ScreenUtil().setWidth(375),
height: ScreenUtil().setHeight(200),
width: 375.w,
height: 200.h,
color: Colors.red,
child: Text(
'My width:${ScreenUtil().setWidth(375)}dp \n'
'My height:${ScreenUtil().setHeight(200)}dp',
'My width:${375.w}dp \n'
'My height:${200.h}dp',
style: TextStyle(
color: Colors.white, fontSize: ScreenUtil().setSp(24)),
),
... ... @@ -108,7 +107,7 @@ class _ExampleWidgetState extends State<ExampleWidget> {
'My font size is 24px on the design draft and will not change with the system.',
style: TextStyle(
color: Colors.black,
fontSize: ScreenUtil().setSp(24),
fontSize: 24.sp,
)),
Text(
'My font size is 24px on the design draft and will change with the system.',
... ...
... ... @@ -74,12 +74,12 @@ class _ExampleWidgetState extends State<ExampleWidget> {
),
Container(
padding: EdgeInsets.all(ScreenUtil().setWidth(10)),
width: ScreenUtil().setWidth(375),
height: ScreenUtil().setHeight(200),
width: 375.w,
height: 200.h,
color: Colors.blue,
child: Text(
'我的宽度:${ScreenUtil().setWidth(375)}dp \n'
'我的高度:${ScreenUtil().setHeight(200)}dp',
'我的宽度:${375.w}dp \n'
'我的高度:${200.h}dp',
style: TextStyle(
color: Colors.white,
fontSize: ScreenUtil().setSp(24))),
... ... @@ -102,7 +102,7 @@ class _ExampleWidgetState extends State<ExampleWidget> {
textAlign: TextAlign.center,
),
SizedBox(
height: ScreenUtil().setHeight(100),
height: 100.h,
),
Text('系统的字体缩放比例:${ScreenUtil.textScaleFactor}'),
Column(
... ... @@ -111,7 +111,7 @@ class _ExampleWidgetState extends State<ExampleWidget> {
Text('我的文字大小在设计稿上是24px，不会随着系统的文字缩放比例变化',
style: TextStyle(
color: Colors.black,
fontSize: ScreenUtil().setSp(24),
fontSize: 24.sp,
)),
Text('我的文字大小在设计稿上是24px，会随着系统的文字缩放比例变化',
style: TextStyle(
... ...
... ... @@ -75,7 +75,7 @@ packages:
path: ".."
relative: true
source: path
version: "1.0.2"
version: "1.1.0"
flutter_test:
dependency: "direct dev"
description: flutter
... ...
... ... @@ -3,127 +3,7 @@
* email: zhuoyuan93@gmail.com
*/
import 'package:flutter/material.dart';
library flutter_screenutil;
class ScreenUtil {
static ScreenUtil _instance;
static const int defaultWidth = 1080;
static const int defaultHeight = 1920;
/// UI设计中手机尺寸 , px
/// Size of the phone in UI Design , px
num uiWidthPx;
num uiHeightPx;
/// 控制字体是否要根据系统的“字体大小”辅助选项来进行缩放。默认值为false。
/// allowFontScaling Specifies whether fonts should scale to respect Text Size accessibility settings. The default is false.
bool allowFontScaling;
static MediaQueryData _mediaQueryData;
static double _screenWidth;
static double _screenHeight;
static double _pixelRatio;
static double _statusBarHeight;
static double _bottomBarHeight;
static double _textScaleFactor;
ScreenUtil._();
factory ScreenUtil() {
return _instance;
}
static void init(BuildContext context,
{num width = defaultWidth,
num height = defaultHeight,
bool allowFontScaling = false}) {
if (_instance == null) {
_instance = ScreenUtil._();
}
_instance.uiWidthPx = width;
_instance.uiHeightPx = height;
_instance.allowFontScaling = allowFontScaling;
MediaQueryData mediaQuery = MediaQuery.of(context);
_mediaQueryData = mediaQuery;
_pixelRatio = mediaQuery.devicePixelRatio;
_screenWidth = mediaQuery.size.width;
_screenHeight = mediaQuery.size.height;
_statusBarHeight = mediaQuery.padding.top;
_bottomBarHeight = _mediaQueryData.padding.bottom;
_textScaleFactor = mediaQuery.textScaleFactor;
}
static MediaQueryData get mediaQueryData => _mediaQueryData;
/// 每个逻辑像素的字体像素数，字体的缩放比例
/// The number of font pixels for each logical pixel.
static double get textScaleFactor => _textScaleFactor;
/// 设备的像素密度
/// The size of the media in logical pixels (e.g, the size of the screen).
static double get pixelRatio => _pixelRatio;
/// 当前设备宽度 dp
/// The horizontal extent of this size.
static double get screenWidthDp => _screenWidth;
///当前设备高度 dp
///The vertical extent of this size. dp
static double get screenHeightDp => _screenHeight;
/// 当前设备宽度 px
/// The vertical extent of this size. px
static double get screenWidth => _screenWidth * _pixelRatio;
/// 当前设备高度 px
/// The vertical extent of this size. px
static double get screenHeight => _screenHeight * _pixelRatio;
/// 状态栏高度 dp 刘海屏会更高
/// The offset from the top
static double get statusBarHeight => _statusBarHeight;
/// 底部安全区距离 dp
/// The offset from the bottom.
static double get bottomBarHeight => _bottomBarHeight;
/// 实际的dp与UI设计px的比例
/// The ratio of the actual dp to the design draft px
double get scaleWidth => _screenWidth / uiWidthPx;
double get scaleHeight => _screenHeight / uiHeightPx;
double get scaleText => scaleWidth;
/// 根据UI设计的设备宽度适配
/// 高度也可以根据这个来做适配可以保证不变形,比如你先要一个正方形的时候.
/// Adapted to the device width of the UI Design.
/// Height can also be adapted according to this to ensure no deformation ,
/// if you want a square
num setWidth(num width) => width * scaleWidth;
/// 根据UI设计的设备高度适配
/// 当发现UI设计中的一屏显示的与当前样式效果不符合时,
/// 或者形状有差异时,建议使用此方法实现高度适配.
/// 高度适配主要针对想根据UI设计的一屏展示一样的效果
/// Highly adaptable to the device according to UI Design
/// It is recommended to use this method to achieve a high degree of adaptation
/// when it is found that one screen in the UI design
/// does not match the current style effect, or if there is a difference in shape.
num setHeight(num height) => height * scaleHeight;
///字体大小适配方法
///@param [fontSize] UI设计上字体的大小,单位px.
///Font size adaptation method
///@param [fontSize] The size of the font on the UI design, in px.
///@param [allowFontScaling]
num setSp(num fontSize, {bool allowFontScalingSelf}) =>
allowFontScalingSelf == null
? (allowFontScaling
? (fontSize * scaleText)
: ((fontSize * scaleText) / _textScaleFactor))
: (allowFontScalingSelf
? (fontSize * scaleText)
: ((fontSize * scaleText) / _textScaleFactor));
}
export 'size_extension.dart';
export 'screenutil.dart';
... ...
/*
* Created by 李卓原 on 2018/9/29.
* email: zhuoyuan93@gmail.com
*/
import 'package:flutter/material.dart';
class ScreenUtil {
static ScreenUtil _instance;
static const int defaultWidth = 1080;
static const int defaultHeight = 1920;
/// UI设计中手机尺寸 , px
/// Size of the phone in UI Design , px
num uiWidthPx;
num uiHeightPx;
/// 控制字体是否要根据系统的“字体大小”辅助选项来进行缩放。默认值为false。
/// allowFontScaling Specifies whether fonts should scale to respect Text Size accessibility settings. The default is false.
bool allowFontScaling;
static MediaQueryData _mediaQueryData;
static double _screenWidth;
static double _screenHeight;
static double _pixelRatio;
static double _statusBarHeight;
static double _bottomBarHeight;
static double _textScaleFactor;
ScreenUtil._();
factory ScreenUtil() {
return _instance;
}
static void init(BuildContext context,
{num width = defaultWidth,
num height = defaultHeight,
bool allowFontScaling = false}) {
if (_instance == null) {
_instance = ScreenUtil._();
}
_instance.uiWidthPx = width;
_instance.uiHeightPx = height;
_instance.allowFontScaling = allowFontScaling;
MediaQueryData mediaQuery = MediaQuery.of(context);
_mediaQueryData = mediaQuery;
_pixelRatio = mediaQuery.devicePixelRatio;
_screenWidth = mediaQuery.size.width;
_screenHeight = mediaQuery.size.height;
_statusBarHeight = mediaQuery.padding.top;
_bottomBarHeight = _mediaQueryData.padding.bottom;
_textScaleFactor = mediaQuery.textScaleFactor;
}
static MediaQueryData get mediaQueryData => _mediaQueryData;
/// 每个逻辑像素的字体像素数，字体的缩放比例
/// The number of font pixels for each logical pixel.
static double get textScaleFactor => _textScaleFactor;
/// 设备的像素密度
/// The size of the media in logical pixels (e.g, the size of the screen).
static double get pixelRatio => _pixelRatio;
/// 当前设备宽度 dp
/// The horizontal extent of this size.
static double get screenWidthDp => _screenWidth;
///当前设备高度 dp
///The vertical extent of this size. dp
static double get screenHeightDp => _screenHeight;
/// 当前设备宽度 px
/// The vertical extent of this size. px
static double get screenWidth => _screenWidth * _pixelRatio;
/// 当前设备高度 px
/// The vertical extent of this size. px
static double get screenHeight => _screenHeight * _pixelRatio;
/// 状态栏高度 dp 刘海屏会更高
/// The offset from the top
static double get statusBarHeight => _statusBarHeight;
/// 底部安全区距离 dp
/// The offset from the bottom.
static double get bottomBarHeight => _bottomBarHeight;
/// 实际的dp与UI设计px的比例
/// The ratio of the actual dp to the design draft px
double get scaleWidth => _screenWidth / uiWidthPx;
double get scaleHeight => _screenHeight / uiHeightPx;
double get scaleText => scaleWidth;
/// 根据UI设计的设备宽度适配
/// 高度也可以根据这个来做适配可以保证不变形,比如你先要一个正方形的时候.
/// Adapted to the device width of the UI Design.
/// Height can also be adapted according to this to ensure no deformation ,
/// if you want a square
num setWidth(num width) => width * scaleWidth;
/// 根据UI设计的设备高度适配
/// 当发现UI设计中的一屏显示的与当前样式效果不符合时,
/// 或者形状有差异时,建议使用此方法实现高度适配.
/// 高度适配主要针对想根据UI设计的一屏展示一样的效果
/// Highly adaptable to the device according to UI Design
/// It is recommended to use this method to achieve a high degree of adaptation
/// when it is found that one screen in the UI design
/// does not match the current style effect, or if there is a difference in shape.
num setHeight(num height) => height * scaleHeight;
///字体大小适配方法
///@param [fontSize] UI设计上字体的大小,单位px.
///Font size adaptation method
///@param [fontSize] The size of the font on the UI design, in px.
///@param [allowFontScaling]
num setSp(num fontSize, {bool allowFontScalingSelf}) =>
allowFontScalingSelf == null
? (allowFontScaling
? (fontSize * scaleText)
: ((fontSize * scaleText) / _textScaleFactor))
: (allowFontScalingSelf
? (fontSize * scaleText)
: ((fontSize * scaleText) / _textScaleFactor));
}
... ...
import 'flutter_screenutil.dart';
import 'package:flutter_screenutil/screenutil.dart';
extension SizeExtension on num {
num get w => ScreenUtil().setWidth(this);
... ...
... ... @@ -185,4 +185,4 @@ packages:
source: hosted
version: "3.5.0"
sdks:
dart: ">=2.4.0 <3.0.0"
dart: ">=2.6.0 <3.0.0"
... ...
name: flutter_screenutil
description: A flutter plugin for adapting screen and font size.Guaranteed to look good on different models
version: 1.0.2
version: 1.1.0
homepage: https://github.com/OpenFlutter/flutter_screenutil
environment:
... ...