flutter_package / flutter_screenutil

Go to a project
Toggle navigation Toggle navigation pinning
李卓原
26fa97b9 1 parent 0aef18d3

4.0.0-beta

Inline Side-by-side
Showing 8 changed files with 267 additions and 270 deletions
... ... @@ -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
... ...
... ... @@ -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
... ...
... ... @@ -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<ExampleWidget> {
class _HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
printScreenInformation();
... ... @@ -290,42 +298,20 @@ class _ExampleWidgetState extends State<ExampleWidget> {
],
),
),
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}');
}
... ...
# 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<HomePage> {
@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: <Widget>[
Row(
children: <Widget>[
// 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: <Widget>[
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)
... ...
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<ExampleWidget> {
class _HomePageState extends State<HomePage> {
@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<ExampleWidget> {
],
),
),
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}');
... ...
... ... @@ -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<ExampleWidget> {
class _HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
printScreenInformation();
... ... @@ -113,42 +111,20 @@ class _ExampleWidgetState extends State<ExampleWidget> {
],
),
),
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}');
}
... ...
... ... @@ -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));
}
... ...
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"
... ...