Merge pull request #181 from Overman775/init_widget_master

Init widget

Author: lizhuoyuan

README.md

@@ -18,43 +18,41 @@
 ### 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
   # add flutter_screenutil
   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

README_CN.md

@@ -23,49 +23,48 @@
 
 安装之前请查看最新版本
 新版本如有问题请使用上一版
-```
+```yaml
 dependencies:
   flutter:
     sdk: flutter
   # 添加依赖
   flutter_screenutil: ^4.0.0-beta1
 ```
 ### 在每个使用的地方导入包：
-```
+```dart
 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());
 
 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)
 
 效果:
 

README_PT.md

@@ -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

example/lib/main.dart

@@ -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}');

example/lib/main_zh.dart

@@ -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'),
+      ),
     );
   }
 }

lib/flutter_screenutil.dart

@@ -7,3 +7,4 @@ library flutter_screenutil;
 
 export 'size_extension.dart';
 export 'screenutil.dart';
+export 'screenutil_init.dart';

lib/screenutil_init.dart

@@ -0,0 +1,36 @@
+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;
+      },
+    );
+  }
+}