flutter_package / flutter_screenutil

Go to a project
Toggle navigation Toggle navigation pinning
LiZhuoyuan
Committed by GitHub
c88f48c5 2 parents eea2cdca 4fb585c2

Merge pull request #181 from Overman775/init_widget_master 

Init widget
Inline Side-by-side
Showing 7 changed files with 111 additions and 77 deletions
... ... @@ -18,7 +18,7 @@
### Add dependency：
Please check the latest version before installation.
If there is any problem with the new version, please use the previous version
```
```yaml
dependencies:
flutter:
sdk: flutter
... ... @@ -26,35 +26,33 @@ dependencies:
flutter_screenutil: ^4.0.0-beta1
```
### Add the following imports to your Dart code:
```
```dart
import 'package:flutter_screenutil/flutter_screenutil.dart';
```
### Property
|Property|Type|Default Value|Description|
|:---|:---|:---|:---|
|:---|:---|:---|:---|
|designSize|Size|Size(1080, 1920)|The size of the device in the design draft, in px|
|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.
```
```dart
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(
...
);
},
//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),
allowFontScaling: false,
child: MaterialApp(
...
),
);
}
}
... ... @@ -112,14 +110,14 @@ If your dart sdk>=2.6, you can use extension functions:
example:
instead of :
```
```dart
Container(
width: ScreenUtil().setWidth(50),
height:ScreenUtil().setHeight(200),
)
```
you can use it like this:
```
```dart
Container(
width: 50.w,
height:200.h
... ...
... ... @@ -23,7 +23,7 @@
安装之前请查看最新版本
新版本如有问题请使用上一版
```
```yaml
dependencies:
flutter:
sdk: flutter
... ... @@ -31,7 +31,7 @@ dependencies:
flutter_screenutil: ^4.0.0-beta1
```
### 在每个使用的地方导入包：
```
```dart
import 'package:flutter_screenutil/flutter_screenutil.dart';
```
... ... @@ -39,14 +39,14 @@ import 'package:flutter_screenutil/flutter_screenutil.dart';
|属性|类型|默认值|描述|
|:---|:---|:---|:---|
|designSize|Size|Size(1080, 1920)|设计稿中设备的尺寸(单位px)|
|designSize|Size|Size(1080, 1920)|设计稿中设备的尺寸(单位随意,但在使用过程中必须保持一致)|
|allowFontScaling|bool|false|设置字体大小是否根据系统的“字体大小”辅助选项来进行缩放|
### 初始化并设置适配尺寸及字体大小是否根据系统的“字体大小”辅助选项来进行缩放
在使用之前请设置好设计稿的宽度和高度，传入设计稿的宽度和高度(单位随意,但在使用过程中必须保持一致)
一定要进行初始化(只需设置一次),以保证在每次使用之前设置好了适配尺寸:
```
```dart
//填入设计稿中设备的屏幕尺寸
void main() => runApp(MyApp());
... ... @@ -54,18 +54,17 @@ 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(
...
);
},
//设置适配尺寸 (填入设计稿中设备的屏幕尺寸) 此处假如设计稿是按iPhone6的尺寸设计的(iPhone6 750*1334)
return ScreenUtilInit(
designSize: Size(750, 1334),
allowFontScaling: false,
child: MaterialApp(
...
),
);
}
}
//默认 width : 1080px , height:1920px , allowFontScaling:false
ScreenUtil.init(constraints);
... ... @@ -119,7 +118,7 @@ setHeight譁ｹ豕穂ｸｻ隕∵弍蝨ｨ鬮伜ｺｦ荳願ｿ幄｡碁る, 蝨ｨ菴諠ｳ謗ｧ蛻ｶUI荳贋ｸ螻冗噪
例如:
```
```dart
//UI上是长方形:
Container(
width: ScreenUtil().setWidth(375),
... ... @@ -136,14 +135,14 @@ Container(
如果你的dart sdk>=2.6,可以使用扩展函数:
example:
不用这个:
```
```dart
Container(
width: ScreenUtil().setWidth(50),
height:ScreenUtil().setHeight(200),
)
```
而是用这个:
```
```dart
Container(
width: 50.w,
height:200.h
... ... @@ -153,7 +152,7 @@ height:200.h
#### 适配字体:
传入设计稿的字体大小：
```
```dart
//传入字体大小(单位和初始化时的单位保持一致)，默认不根据系统的“字体大小”辅助选项来进行缩放(可在初始化ScreenUtil时设置allowFontScaling)
ScreenUtil().setSp(28)
或
... ... @@ -184,12 +183,12 @@ Column(
)
```
```
[widget test](https://github.com/OpenFlutter/flutter_screenutil/issues/115)
### 使用示例:
[example demo](https://github.com/OpenFlutter/flutter_screenutil/blob/master/example/lib/main_zh.dart)
[example demo](https://github.com/OpenFlutter/flutter_ScreenUtil/blob/master/example/lib/main_zh.dart)
效果:
... ...
... ... @@ -19,16 +19,16 @@
### Adicionando a dependência：
Por favor, verifique a última versão antes da instalação.
Se houver algum problema com a nova versão, use a versão anterior
```
```yaml
dependencies:
flutter:
sdk: flutter
# add flutter_screenutil
flutter_screenutil: ^4.0.0-beta1
flutter_screenutil: ^4.0.0-beta
```
### Adicione o seguinte import em seu código Dart:
```
```dart
import 'package:flutter_screenutil/flutter_screenutil.dart';
```
... ... @@ -45,12 +45,20 @@ Por favor, defina a largura e altura do protótipo de design antes de usar (em p
Certifique-se de definir as dimensões na paginal inicial do MaterialApp (ou seja, no arquivo de entrada, defina apenas uma vez) para garantir que o tamanho de ajuste seja o mesmo antes de cada uso:
```dart
//Preencha o tamanho da tela do dispositivo no protótipo de design
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(constraints, designSize: Size(750, 1334), allowFontScaling: false);
runApp(MyApp());
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
//Preencha o tamanho da tela do dispositivo no protótipo de design
return ScreenUtilInit(
designSize: Size(750, 1334),
allowFontScaling: false,
child: MaterialApp(
...
),
);
}
}
//Valor padrão: width : 1080px , height:1920px , allowFontScaling:false
... ...
... ... @@ -6,21 +6,18 @@ 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(
debugShowCheckedModeBanner: false,
title: 'Flutter_ScreenUtil',
theme: ThemeData(
primarySwatch: Colors.blue,
textTheme: TextTheme(button: TextStyle(fontSize: 80.nsp)),
),
home: HomePage(title: 'FlutterScreenUtil Demo'),
);
},
//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),
allowFontScaling: false,
child: MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter_ScreenUtil',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: HomePage(title: 'FlutterScreenUtil Demo'),
),
);
}
}
... ... @@ -130,10 +127,8 @@ class _HomePageState extends State<HomePage> {
print('Device width dp:${1.sw}dp');
print('Device height dp:${1.sh}dp');
print('Device pixel density:${ScreenUtil().pixelRatio}');
print(
'Bottom safe zone distance dp:${ScreenUtil().bottomBarHeight}dp');
print(
'Status bar height dp:${ScreenUtil().statusBarHeight}dp');
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('System font scaling:${ScreenUtil().textScaleFactor}');
... ...
... ... @@ -6,21 +6,18 @@ 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(
debugShowCheckedModeBanner: false,
title: 'Flutter_ScreenUtil',
theme: ThemeData(
primarySwatch: Colors.blue,
textTheme: TextTheme(button: TextStyle(fontSize: 80.nsp)),
),
home: HomePage(title: 'FlutterScreenUtil Demo'),
);
},
//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),
allowFontScaling: false,
child: MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter_ScreenUtil',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: HomePage(title: 'FlutterScreenUtil Demo'),
),
);
}
}
... ...
... ... @@ -7,3 +7,4 @@ library flutter_screenutil;
export 'size_extension.dart';
export 'screenutil.dart';
export 'screenutil_init.dart';
... ...
import 'package:flutter/widgets.dart';
import 'screenutil.dart';
class ScreenUtilInit extends StatelessWidget {
/// A helper widget that initializes [ScreenUtil]
const ScreenUtilInit({
@required this.child,
this.designSize = ScreenUtil.defaultSize,
this.allowFontScaling = false,
Key key,
}) : super(key: key);
final Widget child;
/// The [Size] of the device in the design draft, in px
final Size designSize;
/// Sets whether the font size is scaled according to the system's "font size" assist option
final bool allowFontScaling;
@override
Widget build(BuildContext context) {
return LayoutBuilder(
builder: (_, BoxConstraints constraints) {
ScreenUtil.init(
constraints,
designSize: designSize,
allowFontScaling: allowFontScaling,
);
return child;
},
);
}
}
... ...