flutter_package / flutter_screenutil

Go to a project
Toggle navigation Toggle navigation pinning
李卓原
e4b43ab5 1 parent 51445458

v4.0.1 

fix #176
Inline Side-by-side
Showing 8 changed files with 87 additions and 92 deletions
... ... @@ -6,6 +6,13 @@
* @Description: Update log
-->
# 4.0.1
- Modify the initialization unit to dp
- delete screenWidthPx and screenHeightPx(No one use these method,I guess)
# 4.0.0
- update to 4.0.0
# 4.0.0-beta3
- Optimize the way of initialization
... ...
... ... @@ -23,7 +23,7 @@ dependencies:
flutter:
sdk: flutter
# add flutter_screenutil
flutter_screenutil: ^4.0.0-beta3
flutter_screenutil: ^4.0.1
```
### Add the following imports to your Dart code:
```dart
... ... @@ -34,7 +34,7 @@ import 'package:flutter_screenutil/flutter_screenutil.dart';
|Property|Type|Default Value|Description|
|:---|:---|:---|:---|
|designSize|Size|Size(1080, 1920)|The size of the device in the design draft, in px|
|designSize|Size|Size(360, 690)|The size of the device in the design draft, in dp|
|allowFontScaling|bool|false|Sets whether the font size is scaled according to the system's "font size" assist option|
### Initialize and set the fit size and font size to scale according to the system's "font size" accessibility option
... ... @@ -59,14 +59,14 @@ class MyApp extends StatelessWidget {
//fill in the screen size of the device in the design
//default value : width : 1080px , height:1920px , allowFontScaling:false
//default value : width : 360dp , height:690dp , allowFontScaling:false
ScreenUtil.init(constraints);
//If the design is based on the size of the iPhone6 ​​(iPhone6 ​​750*1334)
ScreenUtil.init(constraints, designSize: Size(750, 1334));
//The size of the equipment in the design draft(360,690)
ScreenUtil.init(constraints, designSize: Size(360, 690));
//If you want to set the font size is scaled according to the system's "font size" assist option
ScreenUtil.init(constraints, designSize: Size(750, 1334), allowFontScaling: true);
ScreenUtil.init(constraints, designSize: Size(360, 690), allowFontScaling: true);
```
... ... @@ -74,7 +74,7 @@ ScreenUtil.init(constraints, designSize: Size(750, 1334), allowFontScaling: true
### API
#### Pass the px size of the design draft
#### Pass the dp size of the design draft
```dart
ScreenUtil().setWidth(540) (dart sdk>=2.6 : 540.w) //Adapted to screen width
... ... @@ -87,11 +87,11 @@ ScreenUtil.init(constraints, designSize: Size(750, 1334), allowFontScaling: true
ScreenUtil().screenWidth (dart sdk>=2.6 : 1.sw) //Device width
ScreenUtil().screenHeight (dart sdk>=2.6 : 1.sh) //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().statusBarHeight //Status bar height , Notch will be higher
ScreenUtil().textScaleFactor //System font scaling factor
ScreenUtil().scaleWidth //Ratio of actual width dp to ui design
ScreenUtil().scaleHeight //Ratio of actual height dp to ui design
ScreenUtil().scaleWidth //The ratio of actual width to UI design
ScreenUtil().scaleHeight //The ratio of actual height to UI design
0.2.sw //0.2 times the screen width
0.5.sh //50% of screen height
... ... @@ -99,7 +99,7 @@ ScreenUtil.init(constraints, designSize: Size(750, 1334), allowFontScaling: true
#### Adapt screen size：
Pass the px size of the design draft((The unit is the same as the unit at initialization))：
Pass the dp size of the design draft((The unit is the same as the unit at initialization))：
Adapted to screen width: `ScreenUtil().setWidth(540)`,
... ... @@ -169,13 +169,13 @@ Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'My font size is 24px on the design draft and will not change with the system.',
'My font size is 24dp on the design draft and will not change with the system.',
style: TextStyle(
color: Colors.black,
fontSize: ScreenUtil().setSp(24),
)),
Text(
'My font size is 24px on the design draft and will change with the system.',
'My font size is 24dp on the design draft and will change with the system.',
style: TextStyle(
color: Colors.black,
fontSize: ScreenUtil()
... ...
# flutter_ScreenUtil
# flutter_screenUtil
[![pub package](https://img.shields.io/pub/v/flutter_screenutil.svg)](https://pub.dartlang.org/packages/flutter_screenutil)
... ... @@ -28,7 +28,7 @@ dependencies:
flutter:
sdk: flutter
# 添加依赖
flutter_screenutil: ^4.0.0-beta3
flutter_screenutil: ^4.0.1
```
### 在每个使用的地方导入包：
```dart
... ... @@ -39,7 +39,7 @@ import 'package:flutter_screenutil/flutter_screenutil.dart';
|属性|类型|默认值|描述|
|:---|:---|:---|:---|
|designSize|Size|Size(1080, 1920)|设计稿中设备的尺寸(单位随意,但在使用过程中必须保持一致)|
|designSize|Size|Size(360, 690)|设计稿中设备的尺寸(单位随意,但在使用过程中必须保持一致)|
|allowFontScaling|bool|false|设置字体大小是否根据系统的“字体大小”辅助选项来进行缩放|
### 初始化并设置适配尺寸及字体大小是否根据系统的“字体大小”辅助选项来进行缩放
... ... @@ -65,21 +65,21 @@ class MyApp extends StatelessWidget {
}
}
//默认 width : 1080px , height:1920px , allowFontScaling:false
//默认 width : 360dp , height:690dp , allowFontScaling:false
ScreenUtil.init(constraints);
//假如设计稿是按iPhone6的尺寸设计的(iPhone6 750*1334)
ScreenUtil.init(constraints, designSize: Size(750, 1334));
//传入设计稿的尺寸(例如(360,690))
ScreenUtil.init(constraints, designSize: Size(360,690));
//设置字体大小根据系统的“字体大小”辅助选项来进行缩放,默认为false
ScreenUtil.init(constraints, designSize: Size(750, 1334), allowFontScaling: true);
ScreenUtil.init(constraints, designSize: Size(360,690), allowFontScaling: true);
```
### 使用
### API
#### 传入设计稿的px尺寸 px px px !
#### 传入设计稿的dp尺寸
```dart
ScreenUtil().setWidth(540) (sdk>=2.6 : 540.w) //根据屏幕宽度适配尺寸
ScreenUtil().setHeight(200) (sdk>=2.6 : 200.h) //根据屏幕高度适配尺寸(一般根据宽度适配即可)
... ... @@ -94,8 +94,8 @@ ScreenUtil.init(constraints, designSize: Size(750, 1334), allowFontScaling: true
ScreenUtil.statusBarHeight //状态栏高度 刘海屏会更高
ScreenUtil.textScaleFactor //系统字体缩放比例
ScreenUtil().scaleWidth // 实际宽度的dp与设计稿宽度的比例
ScreenUtil().scaleHeight // 实际高度的dp与设计稿高度度的比例
ScreenUtil().scaleWidth // 实际宽度设计稿宽度的比例
ScreenUtil().scaleHeight // 实际高度与设计稿高度度的比例
0.2.sw //屏幕宽度的0.2倍
0.5.sh //屏幕高度的50%
... ... @@ -169,12 +169,12 @@ ScreenUtil().setSp(24, allowFontScalingSelf: true)
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text('我的文字大小在设计稿上是24px，不会随着系统的文字缩放比例变化',
Text('我的文字大小在设计稿上是24dp，不会随着系统的文字缩放比例变化',
style: TextStyle(
color: Colors.black,
fontSize: ScreenUtil().setSp(24),
)),
Text('我的文字大小在设计稿上是24px，会随着系统的文字缩放比例变化',
Text('我的文字大小在设计稿上是24dp，会随着系统的文字缩放比例变化',
style: TextStyle(
color: Colors.black,
fontSize: ScreenUtil()
... ...
... ... @@ -24,7 +24,7 @@ dependencies:
flutter:
sdk: flutter
# add flutter_screenutil
flutter_screenutil: ^4.0.0-beta3
flutter_screenutil: ^4.0.1
```
### Adicione o seguinte import em seu código Dart:
... ... @@ -36,8 +36,8 @@ import 'package:flutter_screenutil/flutter_screenutil.dart';
|Propriedade|Tipo|Valor Padrão|Descrição|
|:---|:---|:---|:---|
|width|double|1080px|A largura do dispositivo no protótipo de design, em px|
|height|double|1920px|A altura do dispositivo no protótipo de design, em px|
|width|double|360dp|A largura do dispositivo no protótipo de design, em dp|
|height|double|690dp|A altura do dispositivo no protótipo de design, em dp|
|allowFontScaling|bool|false|Defina caso o tamanho da fonte seja dimensionado de acordo com a opção "tamanho de fonte" na acessibilidade do sistema|
### Inicialize e defina o tamanho de ajuste e tamanho da fonte para dimensionar de acordo com a opção "tamanho de fonte" na acessibilidade do sistema
... ... @@ -61,14 +61,14 @@ class MyApp extends StatelessWidget {
}
}
//Valor padrão: width : 1080px , height:1920px , allowFontScaling:false
//Valor padrão: width : 360dp , height:690dp , allowFontScaling:false
ScreenUtil.init(constraints);
//Se o design é baseado no iPhone6 ​​(iPhone6 ​​750*1334)
ScreenUtil.init(constraints, designSize: Size(750, 1334));
//The size of the equipment in the design draft(360,690)
ScreenUtil.init(constraints, designSize: Size(360,690));
//Se você quer definir que o tamanho da fonte seja ajustado de acordo com a opção "tamanho da fonte" na acessibilidade do sistema
ScreenUtil.init(constraints, designSize: Size(750, 1334), allowFontScaling: true);
ScreenUtil.init(constraints, designSize: Size(360,690), allowFontScaling: true);
```
... ... @@ -87,11 +87,11 @@ ScreenUtil.init(constraints, designSize: Size(750, 1334), allowFontScaling: true
ScreenUtil.screenWidth (sdk>=2.6 : 1.sw) //Device width
ScreenUtil.screenHeight (sdk>=2.6 : 1.sh) //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.statusBarHeight //Status bar height , Notch will be higher
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
ScreenUtil().scaleWidth //The ratio of actual width to UI design
ScreenUtil().scaleHeight //The ratio of actual height to UI design
0.2.sw //0,2 vezes a largura da tela
0.5.sh //50% altura da tela
... ...
... ... @@ -8,7 +8,7 @@ class MyApp extends StatelessWidget {
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)
return ScreenUtilInit(
designSize: Size(750, 1334),
designSize: Size(360, 690),
allowFontScaling: false,
child: MaterialApp(
debugShowCheckedModeBanner: false,
... ... @@ -54,65 +54,63 @@ class _HomePageState extends State<HomePage> {
height: 200.h,
color: Colors.red,
child: Text(
'My width:${0.5.sw}dp \n'
'My height:${200.h}dp',
'My actual width: ${0.5.sw}dp \n\n'
'My actual height: ${200.h}dp',
style: TextStyle(
color: Colors.white,
fontSize: 24.sp,
fontSize: 12.sp,
),
),
),
// Without using Extensions
Container(
padding: EdgeInsets.all(ScreenUtil().setWidth(10)),
width: ScreenUtil().screenWidth * 0.5,
width: 180.w,
height: ScreenUtil().setHeight(200),
color: Colors.blue,
child: Text(
'My width:${ScreenUtil().screenWidth * 0.5}dp \n'
'My height:${ScreenUtil().setHeight(200)}dp',
'My design draft width: 180dp\n\n'
'My design draft height: 200dp',
style: TextStyle(
color: Colors.white,
fontSize: ScreenUtil().setSp(24),
fontSize: ScreenUtil().setSp(12),
),
),
),
],
),
Text('Device width:${ScreenUtil().screenWidthPx}px'),
Text('Device height:${ScreenUtil().screenHeightPx}px'),
Text('Device width:${ScreenUtil().screenWidth}dp'),
Text('Device height:${ScreenUtil().screenHeight}dp'),
Text('Device pixel density:${ScreenUtil().pixelRatio}'),
Text('Bottom safe zone distance:${ScreenUtil().bottomBarHeight}dp'),
Text('Status bar height:${ScreenUtil().statusBarHeight}dp'),
Text(
'Ratio of actual width dp to design draft px:${ScreenUtil().scaleWidth}',
'The ratio of actual width to UI design:${ScreenUtil().scaleWidth}',
textAlign: TextAlign.center,
),
Text(
'Ratio of actual height dp to design draft px:${ScreenUtil().scaleHeight}',
'The ratio of actual height to UI design:${ScreenUtil().scaleHeight}',
textAlign: TextAlign.center,
),
SizedBox(
height: 5.h,
height: 50.h,
),
Text('System font scaling factor:${ScreenUtil().textScaleFactor}'),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'My font size is 24px on the design draft and will not change with the system.',
'My font size is 16sp on the design draft and will not change with the system.',
style: TextStyle(
color: Colors.black,
fontSize: 24.sp,
fontSize: 16.sp,
),
),
Text(
'My font size is 24px on the design draft and will change with the system.',
'My font size is 16sp on the design draft and will change with the system.',
style: TextStyle(
color: Colors.black,
fontSize: 24.ssp,
fontSize: 16.ssp,
),
),
],
... ... @@ -129,8 +127,8 @@ class _HomePageState extends State<HomePage> {
print('Device pixel density:${ScreenUtil().pixelRatio}');
print('Bottom safe zone distance dp:${ScreenUtil().bottomBarHeight}dp');
print('Status bar height dp:${ScreenUtil().statusBarHeight}dp');
print('Ratio of actual width dp to UI Design:${ScreenUtil().scaleWidth}');
print('Ratio of actual height dp to UI Design:${ScreenUtil().scaleHeight}');
print('The ratio of actual width to UI design:${ScreenUtil().scaleWidth}');
print('The ratio of actual height to UI design:${ScreenUtil().scaleHeight}');
print('System font scaling:${ScreenUtil().textScaleFactor}');
print('0.5 times the screen width:${0.5.sw}dp');
print('0.5 times the screen height:${0.5.sh}dp');
... ...
... ... @@ -51,57 +51,55 @@ class _HomePageState extends State<HomePage> {
height: ScreenUtil().setHeight(200),
color: Colors.red,
child: Text(
'我的宽度:${0.5.sw}dp \n'
'我的高度:${ScreenUtil().setHeight(200)}dp',
style: TextStyle(color: Colors.white, fontSize: ScreenUtil().setSp(24)),
'我的实际宽度:${0.5.sw}dp \n'
'我的实际高度:${ScreenUtil().setHeight(200)}dp',
style: TextStyle(color: Colors.white, fontSize: ScreenUtil().setSp(12)),
),
),
Container(
padding: EdgeInsets.all(ScreenUtil().setWidth(10)),
width: 375.w,
width: 180.w,
height: 200.h,
color: Colors.blue,
child: Text(
'我的宽度:${375.w}dp \n'
'我的高度:${200.h}dp',
style: TextStyle(color: Colors.white, fontSize: ScreenUtil().setSp(24))),
'我的设计稿宽度: 180dp \n'
'我的设计稿高度: 200dp',
style: TextStyle(color: Colors.white, fontSize: ScreenUtil().setSp(12))),
),
],
),
Text('设备宽度:${ScreenUtil().screenWidthPx}px'),
Text('设备高度:${ScreenUtil().screenHeightPx}px'),
Text('设备宽度:${ScreenUtil().screenWidth}dp'),
Text('设备高度:${ScreenUtil().screenHeight}dp'),
Text('设备的像素密度:${ScreenUtil().pixelRatio}'),
Text('底部安全区距离:${ScreenUtil().bottomBarHeight}dp'),
Text('状态栏高度:${ScreenUtil().statusBarHeight}dp'),
Text(
'实际宽度的dp与设计稿px的比例:${ScreenUtil().scaleWidth}',
'实际宽度与设计稿的比例:${ScreenUtil().scaleWidth}',
textAlign: TextAlign.center,
),
Text(
'实际高度的dp与设计稿px的比例:${ScreenUtil().scaleHeight}',
'实际高度与设计稿的比例:${ScreenUtil().scaleHeight}',
textAlign: TextAlign.center,
),
SizedBox(
height: 100.h,
height: 50.h,
),
Text('系统的字体缩放比例:${ScreenUtil().textScaleFactor}'),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'我的文字大小在设计稿上是24px，不会随着系统的文字缩放比例变化',
'我的文字大小在设计稿上是16dp，不会随着系统的文字缩放比例变化',
style: TextStyle(
color: Colors.black,
fontSize: 24.sp,
fontSize: 16.sp,
),
),
Text(
'我的文字大小在设计稿上是24px，会随着系统的文字缩放比例变化',
'我的文字大小在设计稿上是16dp，会随着系统的文字缩放比例变化',
style: TextStyle(
color: Colors.black,
fontSize: 24.ssp,
fontSize: 16.ssp,
),
),
],
... ...
... ... @@ -4,10 +4,9 @@
*/
import 'package:flutter/material.dart';
import 'dart:ui' as ui;
class ScreenUtil {
static const Size defaultSize = Size(1080, 1920);
static const Size defaultSize = Size(360, 690);
static ScreenUtil _instance;
/// UI设计中手机尺寸 , px
... ... @@ -47,7 +46,7 @@ class ScreenUtil {
_screenWidth = constraints.maxWidth;
_screenHeight = constraints.maxHeight;
var mediaQuery = ui.window;
var mediaQuery = WidgetsBinding.instance.window;
_pixelRatio = mediaQuery.devicePixelRatio;
_statusBarHeight = mediaQuery.padding.top;
_bottomBarHeight = mediaQuery.padding.bottom;
... ... @@ -70,14 +69,6 @@ class ScreenUtil {
///The vertical extent of this size. dp
double get screenHeight => _screenHeight;
/// 当前设备宽度 px
/// The vertical extent of this size. px
double get screenWidthPx => _screenWidth * _pixelRatio;
/// 当前设备高度 px
/// The vertical extent of this size. px
double get screenHeightPx => _screenHeight * _pixelRatio;
/// 状态栏高度 dp 刘海屏会更高
/// The offset from the top, in dp
double get statusBarHeight => _statusBarHeight / _pixelRatio;
... ... @@ -86,10 +77,11 @@ class ScreenUtil {
/// The offset from the bottom, in dp
double get bottomBarHeight => _bottomBarHeight / _pixelRatio;
/// 实际的dp与UI设计px的比例
/// The ratio of the actual dp to the design draft px
/// 实际尺寸与UI设计的比例
/// The ratio of actual width to UI design
double get scaleWidth => _screenWidth / uiSize.width;
/// /// The ratio of actual height to UI design
double get scaleHeight => _screenHeight / uiSize.height;
double get scaleText => scaleWidth;
... ... @@ -116,12 +108,12 @@ class ScreenUtil {
///Font size adaptation method
///- [fontSize] The size of the font on the UI design, in px.
///- [allowFontScaling]
double setSp(num fontSize, {bool allowFontScalingSelf}) =>
allowFontScalingSelf == null
? (allowFontScaling
? (fontSize * scaleText)
: (fontSize * scaleText / _textScaleFactor))
: (allowFontScalingSelf
? (fontSize * scaleText)
: (fontSize * scaleText / _textScaleFactor));
double setSp(num fontSize, {bool allowFontScalingSelf}) => allowFontScalingSelf == null
? (allowFontScaling ? (fontSize * scaleText) : (fontSize * scaleText / _textScaleFactor))
: (allowFontScalingSelf ? (fontSize * scaleText) : (fontSize * scaleText / _textScaleFactor));
}
enum UnitType {
px,
dp,
}
... ...
name: flutter_screenutil
description: A flutter plugin for adapting screen and font size.Guaranteed to look good on different models
version: 4.0.0-beta3
version: 4.0.1
homepage: https://github.com/OpenFlutter/flutter_screenutil
environment:
... ...