diff --git a/CHANGELOG.md b/CHANGELOG.md index c8c3a2f..4e78d56 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -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 diff --git a/README.md b/README.md index c5b601e..6ff09cd 100644 --- a/README.md +++ b/README.md @@ -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: [ 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() diff --git a/README_CN.md b/README_CN.md index 869e286..79b7824 100644 --- a/README_CN.md +++ b/README_CN.md @@ -1,4 +1,4 @@ -# 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: [ - Text('我的文字大小在设计稿上是24px，不会随着系统的文字缩放比例变化', + Text('我的文字大小在设计稿上是24dp，不会随着系统的文字缩放比例变化', style: TextStyle( color: Colors.black, fontSize: ScreenUtil().setSp(24), )), - Text('我的文字大小在设计稿上是24px，会随着系统的文字缩放比例变化', + Text('我的文字大小在设计稿上是24dp，会随着系统的文字缩放比例变化', style: TextStyle( color: Colors.black, fontSize: ScreenUtil() diff --git a/README_PT.md b/README_PT.md index d3690d6..076fd4e 100644 --- a/README_PT.md +++ b/README_PT.md @@ -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 diff --git a/example/lib/main.dart b/example/lib/main.dart index d524896..b148e99 100644 --- a/example/lib/main.dart +++ b/example/lib/main.dart @@ -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 { 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: [ 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 { 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'); diff --git a/example/lib/main_zh.dart b/example/lib/main_zh.dart index 39f54b9..3291750 100644 --- a/example/lib/main_zh.dart +++ b/example/lib/main_zh.dart @@ -51,57 +51,55 @@ class _HomePageState extends State { 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: [ 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, ), ), ], diff --git a/lib/screenutil.dart b/lib/screenutil.dart index 38b5965..8077995 100644 --- a/lib/screenutil.dart +++ b/lib/screenutil.dart @@ -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, } diff --git a/pubspec.yaml b/pubspec.yaml index f5b855c..f08c2be 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -1,6 +1,6 @@ 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: