From 26fa97b95a2ae6532acebc4929429c0f7f69848b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=8E=E5=8D=93=E5=8E=9F?= Date: Fri, 27 Nov 2020 16:03:07 +0800 Subject: [PATCH] 4.0.0-beta --- CHANGELOG.md | 3 + README.md | 66 +++++++++------- README_CN.md | 132 ++++++++++++++----------------- README_PT.md | 167 ++++++++++++++++++++++++--------------- example/lib/main.dart | 60 ++++++-------- example/lib/main_zh.dart | 74 ++++++----------- lib/screenutil.dart | 31 ++++---- pubspec.yaml | 4 +- 8 files changed, 267 insertions(+), 270 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index b314d8a..0d56e0b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,6 +6,9 @@ * @Description: Update log --> +# 4.0.0-beta +- Modified the initialization method + # 3.2.0 - Modify the method name to be more semantic: wp->sw , hp->sh - Remove the restriction of flutter version diff --git a/README.md b/README.md index a925738..f5b1542 100644 --- a/README.md +++ b/README.md @@ -23,7 +23,7 @@ dependencies: flutter: sdk: flutter # add flutter_screenutil - flutter_screenutil: ^3.1.0 + flutter_screenutil: ^4.0.0-beta ``` ### Add the following imports to your Dart code: ``` @@ -34,31 +34,41 @@ 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(1080, 1920)|The size of the ui design draft can be in any unit, but it must be consistent during use| |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 -Please set the size of the design draft before use, the width and height of the design draft (unit px). +Please set the size of the design draft before use, the width and height of the design draft. ``` - -void main() { - WidgetsFlutterBinding.ensureInitialized(); - //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.init(context, designSize: Size(750, 1334), allowFontScaling: false); - runApp(MyApp()); +void main() => runApp(MyApp()); + +class MyApp extends StatelessWidget { + @override + Widget build(BuildContext context) { + return LayoutBuilder( + builder: (context, constraints) { + //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.init(constraints, designSize: Size(750, 1334), allowFontScaling: false); + + return MaterialApp( + ... + ); + }, + ); + } } //fill in the screen size of the device in the design //default value : width : 1080px , height:1920px , allowFontScaling:false -ScreenUtil.init(context); +ScreenUtil.init(constraints); //If the design is based on the size of the iPhone6 ​​(iPhone6 ​​750*1334) -ScreenUtil.init(context, designSize: Size(750, 1334)); +ScreenUtil.init(constraints, designSize: Size(750, 1334)); //If you want to set the font size is scaled according to the system's "font size" assist option -ScreenUtil.init(context, designSize: Size(750, 1334), allowFontScaling: true); +ScreenUtil.init(constraints, designSize: Size(750, 1334), allowFontScaling: true); ``` @@ -69,21 +79,21 @@ ScreenUtil.init(context, designSize: Size(750, 1334), allowFontScaling: true); #### Pass the px size of the design draft ```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().setSp(24, allowFontScalingSelf: false) (sdk>=2.6 : 24.nsp) //Adapter font(fonts will not scale to respect Text Size accessibility settings) + ScreenUtil().setWidth(540) (dart sdk>=2.6 : 540.w) //Adapted to screen width + ScreenUtil().setHeight(200) (dart sdk>=2.6 : 200.h) //Adapted to screen height , under normal circumstances, the height still uses x.w + ScreenUtil().setSp(24) (dart sdk>=2.6 : 24.sp) //Adapter font + ScreenUtil().setSp(24, allowFontScalingSelf: true) (dart sdk>=2.6 : 24.ssp) //Adapter font(fonts will scale to respect Text Size accessibility settings) + ScreenUtil().setSp(24, allowFontScalingSelf: false) (dart sdk>=2.6 : 24.nsp) //Adapter font(fonts will not scale to respect Text Size accessibility settings) ScreenUtil().pixelRatio //Device pixel density - ScreenUtil().screenWidth (sdk>=2.6 : 1.sw) //Device width - ScreenUtil().screenHeight (sdk>=2.6 : 1.sh) //Device height + 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().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 //Ratio of actual width dp to ui design + ScreenUtil().scaleHeight //Ratio of actual height dp to ui design 0.2.sw //0.2 times the screen width 0.5.sh //50% of screen height @@ -91,11 +101,11 @@ ScreenUtil.init(context, designSize: Size(750, 1334), allowFontScaling: true); #### Adapt screen size： -Pass the px size of the design draft： +Pass the px size of the design draft((The unit is the same as the unit at initialization))： Adapted to screen width: `ScreenUtil().setWidth(540)`, -Adapted to screen height: `ScreenUtil().setHeight(200)`, +Adapted to screen height: `ScreenUtil().setHeight(200)`, In general, the height is best to adapt to the width If your dart sdk>=2.6, you can use extension functions: @@ -123,11 +133,12 @@ setHeight method is mainly adapted in height, you want to control the height and ```dart //for example: -//rectangle + +///If you want to display a square: +///rectangle Container( width: ScreenUtil().setWidth(375), - height: ScreenUtil().setHeight(200), - ... + height: ScreenUtil().setWidth(200), ), ////If you want to display a square: @@ -138,9 +149,10 @@ Container( ``` + #### Adapter font: ``` dart -//Incoming font size，the unit is pixel, fonts will not scale to respect Text Size accessibility settings +//Incoming font size(The unit is the same as the unit at initialization), fonts will not scale to respect Text Size accessibility settings //(AllowallowFontScaling when initializing ScreenUtil) ScreenUtil().setSp(28) 28.sp diff --git a/README_CN.md b/README_CN.md index 535435a..8f59426 100644 --- a/README_CN.md +++ b/README_CN.md @@ -28,7 +28,7 @@ dependencies: flutter: sdk: flutter # 添加依赖 - flutter_screenutil: ^3.1.0 + flutter_screenutil: ^4.0.0-beta ``` ### 在每个使用的地方导入包： ``` @@ -38,32 +38,42 @@ import 'package:flutter_screenutil/flutter_screenutil.dart'; ### 属性 |属性|类型|默认值|描述| -|:---|:---|:---|:---| -|width|double|1080px|设计稿中设备的宽度,单位px| -|height|double|1920px|设计稿中设备的高度,单位px| +|:---|:---|:---|:---| +|designSize|Size|Size(1080, 1920)|设计稿中设备的尺寸(单位随意,但在使用过程中必须保持一致)| |allowFontScaling|bool|false|设置字体大小是否根据系统的“字体大小”辅助选项来进行缩放| ### 初始化并设置适配尺寸及字体大小是否根据系统的“字体大小”辅助选项来进行缩放 -在使用之前请设置好设计稿的宽度和高度，传入设计稿的宽度和高度(单位px) -一定在MaterialApp的home中的页面设置(即入口文件，只需设置一次),以保证在每次使用之前设置好了适配尺寸: +在使用之前请设置好设计稿的宽度和高度，传入设计稿的宽度和高度(单位随意,但在使用过程中必须保持一致) +一定要进行初始化(只需设置一次),以保证在每次使用之前设置好了适配尺寸: ``` //填入设计稿中设备的屏幕尺寸 -void main() { - WidgetsFlutterBinding.ensureInitialized(); - //设置适配尺寸 (填入设计稿中设备的屏幕尺寸) 此处假如设计稿是按iPhone6的尺寸设计的(iPhone6 750*1334) - ScreenUtil.init(context,designSize: Size(750, 1334), allowFontScaling: false); - runApp(MyApp()); -} +void main() => runApp(MyApp()); + +class MyApp extends StatelessWidget { + @override + Widget build(BuildContext context) { + return LayoutBuilder( + builder: (context, constraints) { + //设置适配尺寸 (填入设计稿中设备的屏幕尺寸) 此处假如设计稿是按iPhone6的尺寸设计的(iPhone6 750*1334) + ScreenUtil.init(constraints, designSize: Size(750, 1334), allowFontScaling: false); + + return MaterialApp( + ... + ); + }, + ); + } +} //默认 width : 1080px , height:1920px , allowFontScaling:false -ScreenUtil.init(context); +ScreenUtil.init(constraints); //假如设计稿是按iPhone6的尺寸设计的(iPhone6 750*1334) -ScreenUtil.init(context, designSize: Size(750, 1334)); +ScreenUtil.init(constraints, designSize: Size(750, 1334)); //设置字体大小根据系统的“字体大小”辅助选项来进行缩放,默认为false -ScreenUtil.init(context, designSize: Size(750, 1334), allowFontScaling: true); +ScreenUtil.init(constraints, designSize: Size(750, 1334), allowFontScaling: true); ``` @@ -73,7 +83,7 @@ ScreenUtil.init(context, designSize: Size(750, 1334), allowFontScaling: true); #### 传入设计稿的px尺寸 px px px ! ```dart ScreenUtil().setWidth(540) (sdk>=2.6 : 540.w) //根据屏幕宽度适配尺寸 - ScreenUtil().setHeight(200) (sdk>=2.6 : 200.h) //根据屏幕高度适配尺寸 + 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().setSp(24, allowFontScalingSelf: false) (sdk>=2.6 : 24.nsp) //适配字体(不会根据系统的“字体大小”辅助选项来进行缩放) @@ -82,11 +92,11 @@ ScreenUtil.init(context, designSize: Size(750, 1334), allowFontScaling: true); ScreenUtil.screenWidth (sdk>=2.6 : 1.sw) //设备宽度 ScreenUtil.screenHeight (sdk>=2.6 : 1.sh) //设备高度 ScreenUtil.bottomBarHeight //底部安全区距离，适用于全面屏下面有按键的 - ScreenUtil.statusBarHeight //状态栏高度 刘海屏会更高 单位px + ScreenUtil.statusBarHeight //状态栏高度 刘海屏会更高 ScreenUtil.textScaleFactor //系统字体缩放比例 - ScreenUtil().scaleWidth // 实际宽度的dp与设计稿px的比例 - ScreenUtil().scaleHeight // 实际高度的dp与设计稿px的比例 + ScreenUtil().scaleWidth // 实际宽度的dp与设计稿宽度的比例 + ScreenUtil().scaleHeight // 实际高度的dp与设计稿高度度的比例 0.2.sw //屏幕宽度的0.2倍 0.5.sh //屏幕高度的50% @@ -95,11 +105,11 @@ ScreenUtil.init(context, designSize: Size(750, 1334), allowFontScaling: true); #### 适配尺寸 -传入设计稿的px尺寸： +传入设计稿的尺寸(单位与初始化时的单位相同)： 根据屏幕宽度适配 `width: ScreenUtil().setWidth(540)`, -根据屏幕高度适配 `height: ScreenUtil().setHeight(200)`, +根据屏幕高度适配 `height: ScreenUtil().setHeight(200)`, 一般来说，控件高度也根据宽度进行适配 **注意** @@ -113,7 +123,7 @@ setHeight方法主要是在高度上进行适配, 在你想控制UI上一屏的 //UI上是长方形: Container( width: ScreenUtil().setWidth(375), - height: ScreenUtil().setHeight(200), + height: ScreenUtil().setHeight(375), ), //如果你想显示一个正方形: @@ -141,10 +151,10 @@ height:200.h ``` #### 适配字体: -传入设计稿的px尺寸： +传入设计稿的字体大小： ``` -//传入字体大小，默认不根据系统的“字体大小”辅助选项来进行缩放(可在初始化ScreenUtil时设置allowFontScaling) +//传入字体大小(单位和初始化时的单位保持一致)，默认不根据系统的“字体大小”辅助选项来进行缩放(可在初始化ScreenUtil时设置allowFontScaling) ScreenUtil().setSp(28) 或 28.sp (dart sdk>=2.6) @@ -183,36 +193,34 @@ void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { - return MaterialApp( - debugShowCheckedModeBanner: false, - title: 'Flutter_ScreenUtil', - theme: ThemeData( - primarySwatch: Colors.blue, - ), - home: MyHomePage(), + return LayoutBuilder( + builder: (context, constraints) { + //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.init(constraints, designSize: Size(750, 1334), allowFontScaling: false); + + return MaterialApp( + debugShowCheckedModeBanner: false, + title: 'Flutter_ScreenUtil', + theme: ThemeData( + primarySwatch: Colors.blue, + ), + home: HomePage(title: 'FlutterScreenUtil Demo'), + ); + }, ); } } -class MyHomePage extends StatelessWidget { - @override - Widget build(BuildContext context) { - //设置适配尺寸 (填入设计稿中设备的屏幕尺寸) 此处假如设计稿是按iPhone6的尺寸设计的(iPhone6 750*1334) - ScreenUtil.init(context, designSize: Size(750, 1334), allowFontScaling: false); - return ExampleWidget(title: 'FlutterScreenUtil 示例'); - } -} - -class ExampleWidget extends StatefulWidget { - const ExampleWidget({Key key, this.title}) : super(key: key); +class HomePage extends StatefulWidget { + const HomePage({Key key, this.title}) : super(key: key); final String title; @override - _ExampleWidgetState createState() => _ExampleWidgetState(); + _HomePageState createState() => _HomePageState(); } -class _ExampleWidgetState extends State { +class _HomePageState extends State { @override Widget build(BuildContext context) { printScreenInformation(); @@ -290,42 +298,20 @@ class _ExampleWidgetState extends State { ], ), ), - floatingActionButton: FloatingActionButton( - child: Icon(Icons.title), - onPressed: () { - ScreenUtil.init( - context, - designSize: Size(750, 1334), - allowFontScaling: false, - ); - setState(() {}); - }, - ), ); } void printScreenInformation() { - print('设备宽度:${ScreenUtil().screenWidth}'); //Device width - print('设备高度:${ScreenUtil().screenHeight}'); //Device height - print('设备的像素密度:${ScreenUtil().pixelRatio}'); //Device pixel density - print( - '底部安全区距离:${ScreenUtil().bottomBarHeight}dp', - ); //Bottom safe zone distance，suitable for buttons with full screen - print( - '状态栏高度:${ScreenUtil().statusBarHeight}dp', - ); //Status bar height , Notch will be higher Unit px - + print('设备宽度:${1.sw}'); + print('设备高度:${1.sh}'); + print('设备的像素密度:${ScreenUtil().pixelRatio}'); + print('底部安全区距离:${ScreenUtil().bottomBarHeight}dp'); + print('状态栏高度:${ScreenUtil().statusBarHeight}dp'); print('实际宽度的dp与设计稿px的比例:${ScreenUtil().scaleWidth}'); print('实际高度的dp与设计稿px的比例:${ScreenUtil().scaleHeight}'); - - print( - '宽度和字体相对于设计稿放大的比例:${ScreenUtil().scaleWidth * ScreenUtil().pixelRatio}', - ); - print( - '高度相对于设计稿放大的比例:${ScreenUtil().scaleHeight * ScreenUtil().pixelRatio}', - ); + print('宽度和字体相对于设计稿放大的比例:${ScreenUtil().scaleWidth * ScreenUtil().pixelRatio}'); + print('高度相对于设计稿放大的比例:${ScreenUtil().scaleHeight * ScreenUtil().pixelRatio}'); print('系统的字体缩放比例:${ScreenUtil().textScaleFactor}'); - print('屏幕宽度的0.5:${0.5.sw}'); print('屏幕高度的0.5:${0.5.sh}'); } diff --git a/README_PT.md b/README_PT.md index 5bdd4e5..7cc6c00 100644 --- a/README_PT.md +++ b/README_PT.md @@ -1,3 +1,4 @@ +# I don’t speak Portuguese, and other developers have translated the first version. I later modified it based on the translation software. It is recommended to read the English/Chinese version. # flutter_screenutil [![pub package](https://img.shields.io/pub/v/flutter_screenutil.svg)](https://pub.dartlang.org/packages/flutter_screenutil) @@ -23,7 +24,7 @@ dependencies: flutter: sdk: flutter # add flutter_screenutil - flutter_screenutil: ^3.1.0 + flutter_screenutil: ^4.0.0-beta ``` ### Adicione o seguinte import em seu código Dart: @@ -48,18 +49,18 @@ Certifique-se de definir as dimensões na paginal inicial do MaterialApp (ou sej void main() { WidgetsFlutterBinding.ensureInitialized(); //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.init(context, designSize: Size(750, 1334), allowFontScaling: false); + ScreenUtil.init(constraints, designSize: Size(750, 1334), allowFontScaling: false); runApp(MyApp()); } //Valor padrão: width : 1080px , height:1920px , allowFontScaling:false -ScreenUtil.init(context); +ScreenUtil.init(constraints); //Se o design é baseado no iPhone6 ​​(iPhone6 ​​750*1334) -ScreenUtil.init(context, designSize: Size(750, 1334)); +ScreenUtil.init(constraints, designSize: Size(750, 1334)); //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(context, designSize: Size(750, 1334), allowFontScaling: true); +ScreenUtil.init(constraints, designSize: Size(750, 1334), allowFontScaling: true); ``` @@ -183,33 +184,48 @@ Column( ``` ```dart -//import +... +import 'package:flutter/material.dart'; import 'package:flutter_screenutil/flutter_screenutil.dart'; -... +void main() => runApp(MyApp()); +class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { - ///Define o tamanho de ajuste (preenche o tamanho da tela do dispositivo no design). Se o design é baseado no tamanho do iPhone6 (iPhone6 ​​750*1334) - ScreenUtil.init(designSize: Size(750, 1334), allowFontScaling: false); - - print('Largura do dispositivo:${ScreenUtil().screenWidth}'); //Largura do dispositivo - print('Altura do dispositivo:${ScreenUtil().screenHeight}'); //Altura do dispositivo - print( - 'Densidade de pixels do dispositivo:${ScreenUtil().pixelRatio}'); //Densidade de pixels do dispositivo - print( - 'Distância segura do rodapé:${ScreenUtil().bottomBarHeight}'); //Distância segura do rodapé, adequada para botões em tela cheia - print( - 'Altura da status bar:${ScreenUtil().statusBarHeight}px'); //Altura da status bar em pixels, Notch será maior - print( - 'Razão entre a largura atual e a largura do protótipo de design em pixels:${ScreenUtil().scaleWidth}'); - print( - 'Razão entre a altura atual e a altura do protótipo de design em pixels:${ScreenUtil().scaleHeight}'); - print( - 'Razão da fonte e largura para o tamanho do design:${ScreenUtil().scaleWidth * ScreenUtil.pixelRatio}'); - print( - 'Razão da fonte e altura para o tamanho do design:${ScreenUtil().scaleHeight * ScreenUtil.pixelRatio}'); - + return LayoutBuilder( + builder: (context, constraints) { + //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.init(constraints, designSize: Size(750, 1334), allowFontScaling: false); + + return MaterialApp( + debugShowCheckedModeBanner: false, + title: 'Flutter_ScreenUtil', + theme: ThemeData( + primarySwatch: Colors.blue, + ), + home: HomePage(title: 'FlutterScreenUtil Demo'), + ); + }, + ); + } +} + +class HomePage extends StatefulWidget { + const HomePage({Key key, this.title}) : super(key: key); + + final String title; + + @override + _HomePageState createState() => _HomePageState(); +} + +class _HomePageState extends State { + @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) + + printScreenInformation(); return Scaffold( appBar: AppBar( title: Text(widget.title), @@ -220,70 +236,74 @@ import 'package:flutter_screenutil/flutter_screenutil.dart'; children: [ Row( children: [ + // Using Extensions Container( - padding: EdgeInsets.all(ScreenUtil().setWidth(10)), - width: ScreenUtil().setWidth(375), - height: ScreenUtil().setHeight(200), + padding: EdgeInsets.all(10.w), + width: 0.5.sw, + height: 200.h, color: Colors.red, child: Text( - 'Minha largura:${ScreenUtil().setWidth(375)}dp', + 'My width:${0.5.sw}dp \n' + 'My height:${200.h}dp', style: TextStyle( - color: Colors.white, - fontSize: ScreenUtil().setSp(12)), + color: Colors.white, + fontSize: 24.sp, + ), ), ), + // Without using Extensions Container( padding: EdgeInsets.all(ScreenUtil().setWidth(10)), - width: ScreenUtil().setWidth(375), + width: ScreenUtil().screenWidth * 0.5, height: ScreenUtil().setHeight(200), color: Colors.blue, - child: Text('Minha largura:${ScreenUtil().setWidth(375)}dp', - style: TextStyle( - color: Colors.white, - fontSize: ScreenUtil().setSp(12))), + child: Text( + 'My width:${ScreenUtil().screenWidth * 0.5}dp \n' + 'My height:${ScreenUtil().setHeight(200)}dp', + style: TextStyle( + color: Colors.white, + fontSize: ScreenUtil().setSp(24), + ), + ), ), ], ), - Text('Largura do dispositivo:${ScreenUtil().screenWidth}dp'), - Text('Altura do dispositivo:${ScreenUtil().screenHeight}dp'), - Text('Densidade de pixels do dispositivo:${ScreenUtil().pixelRatio}'), - Text('Distância segura do rodapé:${ScreenUtil().bottomBarHeight}dp'), - Text('Altura da status bar:${ScreenUtil().statusBarHeight}dp'), - Text( - 'Razão entre a largura atual e a largura do protótipo de design em pixels:${ScreenUtil().scaleWidth}', - textAlign: TextAlign.center, - ), - Text( - 'Razão entre a altura atual e a altura do protótipo de design em pixels:${ScreenUtil().scaleHeight}', - textAlign: TextAlign.center, - ), + 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( - 'Razão da fonte e largura para o tamanho do design:${ScreenUtil().scaleWidth * ScreenUtil.pixelRatio}', + 'Ratio of actual width dp to design draft px:${ScreenUtil().scaleWidth}', textAlign: TextAlign.center, ), Text( - 'Razão da fonte e altura para o tamanho do design:${ScreenUtil().scaleHeight * ScreenUtil.pixelRatio}', + 'Ratio of actual height dp to design draft px:${ScreenUtil().scaleHeight}', textAlign: TextAlign.center, ), SizedBox( - height: ScreenUtil().setHeight(100), + height: 5.h, ), - Text('Fator de escala da fonte do sistema:${ScreenUtil.textScaleFactor}'), + Text('System font scaling factor:${ScreenUtil().textScaleFactor}'), Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Text( - 'Minha fonte tem 24px no protótipo de design e não irá mudar com o sistema.', - style: TextStyle( - color: Colors.black, - fontSize: ScreenUtil().setSp(24), - )), + 'My font size is 24px on the design draft and will not change with the system.', + style: TextStyle( + color: Colors.black, + fontSize: 24.sp, + ), + ), Text( - 'Minha fonte tem 24px no protótipo de design e poderá mudar com o sistema.', - style: TextStyle( - color: Colors.black, - fontSize: ScreenUtil().setSp(24, allowFontScalingSelf: true), - )), + 'My font size is 24px on the design draft and will change with the system.', + style: TextStyle( + color: Colors.black, + fontSize: 24.ssp, + ), + ), ], ) ], @@ -291,6 +311,23 @@ import 'package:flutter_screenutil/flutter_screenutil.dart'; ), ); } + + void printScreenInformation() { + print('Device width dp:${1.sw}'); //Device width + print('Device height dp:${1.sh}'); //Device height + print('Device pixel density:${ScreenUtil().pixelRatio}'); //Device pixel density + print( + 'Bottom safe zone distance dp:${ScreenUtil().bottomBarHeight}'); //Bottom safe zone distance，suitable for buttons with full screen + print( + 'Status bar height px:${ScreenUtil().statusBarHeight}dp'); //Status bar height , Notch will be higher Unit px + print('Ratio of actual width dp to UI Design:${ScreenUtil().scaleWidth}'); + print('Ratio of actual height dp to UI Design:${ScreenUtil().scaleHeight}'); + print('System font scaling:${ScreenUtil().textScaleFactor}'); + print('0.5 times the screen width:${0.5.sw}'); + print('0.5 times the screen height:${0.5.sh}'); + } +} + ``` [widget test](https://github.com/OpenFlutter/flutter_screenutil/issues/115) diff --git a/example/lib/main.dart b/example/lib/main.dart index b1e117f..a4d1b94 100644 --- a/example/lib/main.dart +++ b/example/lib/main.dart @@ -1,5 +1,3 @@ -import 'dart:ui'; - import 'package:flutter/material.dart'; import 'package:flutter_screenutil/flutter_screenutil.dart'; @@ -8,40 +6,37 @@ void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { - return MaterialApp( - debugShowCheckedModeBanner: false, - title: 'Flutter_ScreenUtil', - theme: ThemeData( - primarySwatch: Colors.blue, - ), - home: MyHomePage(), - ); - } -} + return LayoutBuilder( + builder: (context, constraints) { + //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.init(constraints, designSize: Size(750, 1334), allowFontScaling: false); -class MyHomePage extends StatelessWidget { - @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.init(context, designSize: Size(750, 1334), allowFontScaling: false); - return ExampleWidget(title: 'FlutterScreenUtil Demo'); + return MaterialApp( + debugShowCheckedModeBanner: false, + title: 'Flutter_ScreenUtil', + theme: ThemeData( + primarySwatch: Colors.blue, + ), + home: HomePage(title: 'FlutterScreenUtil Demo'), + ); + }, + ); } } -class ExampleWidget extends StatefulWidget { - const ExampleWidget({Key key, this.title}) : super(key: key); +class HomePage extends StatefulWidget { + const HomePage({Key key, this.title}) : super(key: key); final String title; @override - _ExampleWidgetState createState() => _ExampleWidgetState(); + _HomePageState createState() => _HomePageState(); } -class _ExampleWidgetState extends State { +class _HomePageState extends State { @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.init(context, designSize: Size(750, 1334), allowFontScaling: false); printScreenInformation(); return Scaffold( @@ -127,30 +122,19 @@ class _ExampleWidgetState extends State { ], ), ), - floatingActionButton: FloatingActionButton( - child: Icon(Icons.title), - onPressed: () { - ScreenUtil.init(context, designSize: Size(750, 1334), allowFontScaling: false); - setState(() {}); - }, - ), ); } void printScreenInformation() { - print('Device width dp:${ScreenUtil().screenWidth}'); //Device width - print('Device height dp:${ScreenUtil().screenHeight}'); //Device height + print('Device width dp:${1.sw}'); //Device width + print('Device height dp:${1.sh}'); //Device height print('Device pixel density:${ScreenUtil().pixelRatio}'); //Device pixel density print( 'Bottom safe zone distance dp:${ScreenUtil().bottomBarHeight}'); //Bottom safe zone distance，suitable for buttons with full screen print( 'Status bar height px:${ScreenUtil().statusBarHeight}dp'); //Status bar height , Notch will be higher Unit px - print('Ratio of actual width dp to design draft px:${ScreenUtil().scaleWidth}'); - print('Ratio of actual height dp to design draft px:${ScreenUtil().scaleHeight}'); - print( - 'The ratio of font and width to the size of the design:${ScreenUtil().scaleWidth * ScreenUtil().pixelRatio}'); - print( - 'The ratio of height width to the size of the design:${ScreenUtil().scaleHeight * ScreenUtil().pixelRatio}'); + print('Ratio of actual width dp to UI Design:${ScreenUtil().scaleWidth}'); + print('Ratio of actual height dp to UI Design:${ScreenUtil().scaleHeight}'); print('System font scaling:${ScreenUtil().textScaleFactor}'); print('0.5 times the screen width:${0.5.sw}'); print('0.5 times the screen height:${0.5.sh}'); diff --git a/example/lib/main_zh.dart b/example/lib/main_zh.dart index 2408a8a..2aeb7f9 100644 --- a/example/lib/main_zh.dart +++ b/example/lib/main_zh.dart @@ -6,36 +6,34 @@ void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { - return MaterialApp( - debugShowCheckedModeBanner: false, - title: 'Flutter_ScreenUtil', - theme: ThemeData( - primarySwatch: Colors.blue, - ), - home: MyHomePage(), - ); - } -} + return LayoutBuilder( + builder: (context, constraints) { + //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.init(constraints, designSize: Size(750, 1334), allowFontScaling: false); -class MyHomePage extends StatelessWidget { - @override - Widget build(BuildContext context) { - //设置适配尺寸 (填入设计稿中设备的屏幕尺寸) 此处假如设计稿是按iPhone6的尺寸设计的(iPhone6 750*1334) - ScreenUtil.init(context, designSize: Size(750, 1334), allowFontScaling: false); - return ExampleWidget(title: 'FlutterScreenUtil 示例'); + return MaterialApp( + debugShowCheckedModeBanner: false, + title: 'Flutter_ScreenUtil', + theme: ThemeData( + primarySwatch: Colors.blue, + ), + home: HomePage(title: 'FlutterScreenUtil Demo'), + ); + }, + ); } } -class ExampleWidget extends StatefulWidget { - const ExampleWidget({Key key, this.title}) : super(key: key); +class HomePage extends StatefulWidget { + const HomePage({Key key, this.title}) : super(key: key); final String title; @override - _ExampleWidgetState createState() => _ExampleWidgetState(); + _HomePageState createState() => _HomePageState(); } -class _ExampleWidgetState extends State { +class _HomePageState extends State { @override Widget build(BuildContext context) { printScreenInformation(); @@ -113,42 +111,20 @@ class _ExampleWidgetState extends State { ], ), ), - floatingActionButton: FloatingActionButton( - child: Icon(Icons.title), - onPressed: () { - ScreenUtil.init( - context, - designSize: Size(750, 1334), - allowFontScaling: false, - ); - setState(() {}); - }, - ), ); } void printScreenInformation() { - print('设备宽度:${ScreenUtil().screenWidth}'); //Device width - print('设备高度:${ScreenUtil().screenHeight}'); //Device height - print('设备的像素密度:${ScreenUtil().pixelRatio}'); //Device pixel density - print( - '底部安全区距离:${ScreenUtil().bottomBarHeight}dp', - ); //Bottom safe zone distance，suitable for buttons with full screen - print( - '状态栏高度:${ScreenUtil().statusBarHeight}dp', - ); //Status bar height , Notch will be higher Unit px - + print('设备宽度:${1.sw}'); + print('设备高度:${1.sh}'); + print('设备的像素密度:${ScreenUtil().pixelRatio}'); + print('底部安全区距离:${ScreenUtil().bottomBarHeight}dp'); + print('状态栏高度:${ScreenUtil().statusBarHeight}dp'); print('实际宽度的dp与设计稿px的比例:${ScreenUtil().scaleWidth}'); print('实际高度的dp与设计稿px的比例:${ScreenUtil().scaleHeight}'); - - print( - '宽度和字体相对于设计稿放大的比例:${ScreenUtil().scaleWidth * ScreenUtil().pixelRatio}', - ); - print( - '高度相对于设计稿放大的比例:${ScreenUtil().scaleHeight * ScreenUtil().pixelRatio}', - ); + print('宽度和字体相对于设计稿放大的比例:${ScreenUtil().scaleWidth * ScreenUtil().pixelRatio}'); + print('高度相对于设计稿放大的比例:${ScreenUtil().scaleHeight * ScreenUtil().pixelRatio}'); print('系统的字体缩放比例:${ScreenUtil().textScaleFactor}'); - print('屏幕宽度的0.5:${0.5.sw}'); print('屏幕高度的0.5:${0.5.sh}'); } diff --git a/lib/screenutil.dart b/lib/screenutil.dart index f870ee8..e347fe2 100644 --- a/lib/screenutil.dart +++ b/lib/screenutil.dart @@ -4,6 +4,7 @@ */ import 'package:flutter/material.dart'; +import 'dart:ui' as ui; class ScreenUtil { static ScreenUtil _instance; @@ -17,12 +18,12 @@ class ScreenUtil { /// allowFontScaling Specifies whether fonts should scale to respect Text Size accessibility settings. The default is false. bool allowFontScaling = false; - static double _pixelRatio; + static double _pixelRatio = 1; + static double _textScaleFactor = 1; static double _screenWidth; static double _screenHeight; static double _statusBarHeight; static double _bottomBarHeight; - static double _textScaleFactor; ScreenUtil._(); @@ -35,7 +36,7 @@ class ScreenUtil { } static void init( - BuildContext context, { + BoxConstraints constraints, { Size designSize = defaultSize, bool allowFontScaling = false, }) { @@ -43,10 +44,11 @@ class ScreenUtil { _instance ..uiSize = designSize ..allowFontScaling = allowFontScaling; - MediaQueryData mediaQuery = MediaQuery.of(context); + _screenWidth = constraints.maxWidth; + _screenHeight = constraints.maxHeight; + + ui.Window mediaQuery = ui.window; _pixelRatio = mediaQuery.devicePixelRatio; - _screenWidth = mediaQuery.size.width; - _screenHeight = mediaQuery.size.height; _statusBarHeight = mediaQuery.padding.top; _bottomBarHeight = mediaQuery.padding.bottom; _textScaleFactor = mediaQuery.textScaleFactor; @@ -78,11 +80,11 @@ class ScreenUtil { /// 状态栏高度 dp 刘海屏会更高 /// The offset from the top - double get statusBarHeight => _statusBarHeight; + double get statusBarHeight => _statusBarHeight / _pixelRatio; /// 底部安全区距离 dp /// The offset from the bottom. - double get bottomBarHeight => _bottomBarHeight; + double get bottomBarHeight => _bottomBarHeight / _pixelRatio; /// 实际的dp与UI设计px的比例 /// The ratio of the actual dp to the design draft px @@ -114,12 +116,9 @@ 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)); } diff --git a/pubspec.yaml b/pubspec.yaml index ec22542..1ae0544 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -1,7 +1,7 @@ name: flutter_screenutil description: A flutter plugin for adapting screen and font size.Guaranteed to look good on different models -version: 3.2.0 -homepage: https://github.com/OpenFlutter/flutter_screenutil/tree/beta +version: 4.0.0-beta +homepage: https://github.com/OpenFlutter/flutter_screenutil environment: sdk: ">=2.6.0 <3.0.0"