flutter_package / flutter_screenutil

Go to a project
Toggle navigation Toggle navigation pinning
LiZhuoyuan
4aef3eec 1 parent 9a06dfb8

beta

Inline Side-by-side
Showing 4 changed files with 73 additions and 77 deletions
... ... @@ -123,7 +123,7 @@ height:200.h
```
**Note**
Height is also adapted according to setWidth to ensure no deformation (when you want a square)
The height can also use setWidth to ensure that it is not deformed(when you want a square)
setHeight method is mainly adapted in height, you want to control the height and actuality of a screen on the UIUsed when the same is displayed.
... ... @@ -139,23 +139,28 @@ Container(
////If you want to display a square:
Container(
width: ScreenUtil().setWidth(300),
height: ScreenUtil().setWidth(300),
height: 300.w,
),
```
#### Adapter font:
``` dart
//Incoming font size，the unit is pixel, fonts will not scale to respect Text Size accessibility settings
//(AllowallowFontScaling when initializing ScreenUtil)
ScreenUtil().setSp(28)
ScreenUtil().setSp(28)
28.sp
//Incoming font size，the unit is pixel，fonts will scale to respect Text Size accessibility settings
//(If somewhere does not follow the global allowFontScaling setting)
//(If somewhere follow the global allowFontScaling setting)
ScreenUtil().setSp(24, allowFontScalingSelf: true)
28.ssp
//for example:
//(If somewhere does not follow the global allowFontScaling setting)
ScreenUtil().setSp(24, allowFontScalingSelf: false)
28.nsp
//for example:
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
... ...
... ... @@ -181,10 +181,12 @@ Column(
```
```dart
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
void main() => runApp( MyApp());
void main() {
WidgetsFlutterBinding.ensureInitialized();
//设置适配尺寸 (填入设计稿中设备的屏幕尺寸) 此处假如设计稿是按iPhone6的尺寸设计的(iPhone6 750*1334)
ScreenUtil.init(designSize: Size(750, 1334), allowFontScaling: false);
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
... ... @@ -195,32 +197,11 @@ class MyApp extends StatelessWidget {
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
home: ExampleWidget(title: 'FlutterScreenUtil示例'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
//设置适配尺寸 (填入设计稿中设备的屏幕尺寸) 此处假如设计稿是按iPhone6的尺寸设计的(iPhone6 750*1334)
ScreenUtil.init(width: 750, height: 1334, allowFontScaling: false);
ScreenUtil.init();
ScreenUtil.init(width: 750, height: 1334, allowFontScaling: false);
return ExampleWidget(title: 'FlutterScreenUtil示例');
}
}
class ExampleWidget extends StatefulWidget {
const ExampleWidget({Key key, this.title}) : super(key: key);
... ... @@ -250,7 +231,7 @@ class _ExampleWidgetState extends State<ExampleWidget> {
height: ScreenUtil().setHeight(200),
color: Colors.red,
child: Text(
'我的宽度:${ScreenUtil().setWidth(375)}dp \n'
'我的宽度:${0.5.wp}dp \n'
'我的高度:${ScreenUtil().setHeight(200)}dp',
style: TextStyle(
color: Colors.white, fontSize: ScreenUtil().setSp(24)),
... ... @@ -258,25 +239,25 @@ class _ExampleWidgetState extends State<ExampleWidget> {
),
Container(
padding: EdgeInsets.all(ScreenUtil().setWidth(10)),
width: ScreenUtil().setWidth(375),
height: ScreenUtil().setHeight(200),
width: 375.w,
height: 200.h,
color: Colors.blue,
child: Text(
'我的宽度:${ScreenUtil().setWidth(375)}dp \n'
'我的高度:${ScreenUtil().setHeight(200)}dp',
'我的宽度:${375.w}dp \n'
'我的高度:${200.h}dp',
style: TextStyle(
color: Colors.white,
fontSize: ScreenUtil().setSp(24))),
),
],
),
Text('设备宽度:${ScreenUtil.screenWidth}dp'),
Text('设备高度:${ScreenUtil.screenHeight}dp'),
Text('设备宽度:${ScreenUtil.screenWidthPx}px'),
Text('设备高度:${ScreenUtil.screenHeightPx}px'),
Text('设备的像素密度:${ScreenUtil.pixelRatio}'),
Text('底部安全区距离:${ScreenUtil.bottomBarHeight}dp'),
Text('状态栏高度:${ScreenUtil.statusBarHeight}dp'),
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}',
textAlign: TextAlign.center,
... ... @@ -286,22 +267,20 @@ class _ExampleWidgetState extends State<ExampleWidget> {
textAlign: TextAlign.center,
),
SizedBox(
height: ScreenUtil().setHeight(100),
height: 100.h,
),
Text('系统的字体缩放比例:${ScreenUtil.textScaleFactor}'),
Text('系统的字体缩放比例:${ScreenUtil().textScaleFactor}'),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text('我的文字大小在设计稿上是24px，不会随着系统的文字缩放比例变化',
style: TextStyle(
color: Colors.black,
fontSize: ScreenUtil().setSp(24),
)),
Text('我的文字大小在设计稿上是24px，会随着系统的文字缩放比例变化',
style: TextStyle(
color: Colors.black,
fontSize: ScreenUtil()
.setSp(24, allowFontScalingSelf: true))),
Text(
'我的文字大小在设计稿上是24px，不会随着系统的文字缩放比例变化',
style: ts.t2,
),
Text(
'我的文字大小在设计稿上是24px，会随着系统的文字缩放比例变化',
style: ts.t1,
),
],
)
],
... ... @@ -310,7 +289,10 @@ class _ExampleWidgetState extends State<ExampleWidget> {
floatingActionButton: FloatingActionButton(
child: Icon(Icons.title),
onPressed: () {
ScreenUtil.init(width: 1500, height: 1334, allowFontScaling: false);
ScreenUtil.init(
designSize: Size(1500, 1334),
allowFontScaling: false,
);
setState(() {});
},
),
... ... @@ -318,20 +300,29 @@ class _ExampleWidgetState extends State<ExampleWidget> {
}
void printScreenInformation() {
print('设备宽度:${ScreenUtil.screenWidth}'); //Device width
print('设备高度:${ScreenUtil.screenHeight}'); //Device height
print('设备的像素密度:${ScreenUtil.pixelRatio}'); //Device pixel density
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
'底部安全区距离:${ScreenUtil().bottomBarHeight}dp',
); //Bottom safe zone distance，suitable for buttons with full screen
print(
'状态栏高度:${ScreenUtil.statusBarHeight}dp'); //状态栏高度 , 刘海屏会更高，单位dp
'状态栏高度:${ScreenUtil().statusBarHeight}dp',
); //Status bar height , Notch will be higher Unit px
print('实际宽度的dp与设计稿px的比例:${ScreenUtil().scaleWidth}');
print('实际高度的dp与设计稿px的比例:${ScreenUtil().scaleHeight}');
print(
'宽度和字体相对于设计稿放大的比例:${ScreenUtil().scaleWidth * ScreenUtil.pixelRatio}');
print('高度相对于设计稿放大的比例:${ScreenUtil().scaleHeight * ScreenUtil.pixelRatio}');
print('系统的字体缩放比例:${ScreenUtil.textScaleFactor}');
'宽度和字体相对于设计稿放大的比例:${ScreenUtil().scaleWidth * ScreenUtil().pixelRatio}',
);
print(
'高度相对于设计稿放大的比例:${ScreenUtil().scaleHeight * ScreenUtil().pixelRatio}',
);
print('系统的字体缩放比例:${ScreenUtil().textScaleFactor}');
print('屏幕宽度的0.5:${0.5.wp}');
print('屏幕高度的0.5:${0.5.hp}');
}
}
... ...
... ... @@ -193,16 +193,16 @@ import 'package:flutter_screenutil/flutter_screenutil.dart';
@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(width: 750, height: 1334, allowFontScaling: false);
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('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
'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
'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
'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(
... ... @@ -246,11 +246,11 @@ import 'package:flutter_screenutil/flutter_screenutil.dart';
),
],
),
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('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,
... ...
name: flutter_screenutil
description: A flutter plugin for adapting screen and font size.Guaranteed to look good on different models
version: 3.0.0-beta.1
version: 3.0.0-beta.2
homepage: https://github.com/OpenFlutter/flutter_screenutil/tree/beta
environment:
... ...