Some fixes & adding rebuildFactor

Performance tip: rebuildFactor is for those who want to set some breakpoints or to rebuild based on steps

@@ -16,12 +16,12 @@ class MyApp extends StatelessWidget {
           // You can use the library anywhere in the app even in theme
           // You can use the library anywhere in the app even in theme
           theme: ThemeData(
           theme: ThemeData(
             primarySwatch: Colors.blue,
             primarySwatch: Colors.blue,
-            textTheme: TextTheme(bodyText2: TextStyle(fontSize: 16.sp)),
+            textTheme: Typography.englishLike2018.apply(fontSizeFactor: 1.sp),
           ),
           ),
           home: child,
           home: child,
         );
         );
       },
       },
-      child: HomePage(title: 'First Method'),
+      child: const HomePage(title: 'First Method'),
     );
     );
   }
   }
 }
 }

@@ -24,7 +24,7 @@ class HomePageScaffold extends StatelessWidget {
     printScreenInformation();
     printScreenInformation();
 
 
     /// Uncomment if you wanna force current widget to be rebuilt with updated values
     /// Uncomment if you wanna force current widget to be rebuilt with updated values
-    /// Use it only if you use the second method, or if you use ScreenUtilInit's child.
+    /// Must use it if you use the second method, or if you use ScreenUtilInit's child.
     /// Note: don't use it along with ScreenUtil.init()
     /// Note: don't use it along with ScreenUtil.init()
     // ScreenUtil.registerToBuild(context);
     // ScreenUtil.registerToBuild(context);
     return Scaffold(
     return Scaffold(
@@ -82,20 +82,33 @@ class HomePageScaffold extends StatelessWidget {
                 ),
                 ),
               ),
               ),
             ),
             ),
+            Padding(
+              padding: const EdgeInsets.all(18).r,
+              child: Column(
+                crossAxisAlignment: CrossAxisAlignment.stretch,
+                children: [
+                  TextField(
+                    decoration: InputDecoration(
+                      border: OutlineInputBorder(),
+                    ),
+                  ),
+                  18.verticalSpace,
                   Text('Device width:${ScreenUtil().screenWidth}dp'),
                   Text('Device width:${ScreenUtil().screenWidth}dp'),
                   Text('Device height:${ScreenUtil().screenHeight}dp'),
                   Text('Device height:${ScreenUtil().screenHeight}dp'),
                   Text('Device pixel density:${ScreenUtil().pixelRatio}'),
                   Text('Device pixel density:${ScreenUtil().pixelRatio}'),
-            Text('Bottom safe zone distance:${ScreenUtil().bottomBarHeight}dp'),
+                  Text(
+                      'Bottom safe zone distance:${ScreenUtil().bottomBarHeight}dp'),
                   Text('Status bar height:${ScreenUtil().statusBarHeight}dp'),
                   Text('Status bar height:${ScreenUtil().statusBarHeight}dp'),
                   Text(
                   Text(
                       'The ratio of actual width to UI design:${ScreenUtil().scaleWidth}'),
                       'The ratio of actual width to UI design:${ScreenUtil().scaleWidth}'),
                   Text(
                   Text(
                       'The ratio of actual height to UI design:${ScreenUtil().scaleHeight}'),
                       'The ratio of actual height to UI design:${ScreenUtil().scaleHeight}'),
                   10.verticalSpace,
                   10.verticalSpace,
-            Text('System font scaling factor:${ScreenUtil().textScaleFactor}'),
+                  Text(
+                      'System font scaling factor:${ScreenUtil().textScaleFactor}'),
                   5.verticalSpace,
                   5.verticalSpace,
                   Column(
                   Column(
-              crossAxisAlignment: CrossAxisAlignment.start,
+                    crossAxisAlignment: CrossAxisAlignment.stretch,
                     children: <Widget>[
                     children: <Widget>[
                       Text(
                       Text(
                         '16sp, will not change with the system.',
                         '16sp, will not change with the system.',
@@ -113,7 +126,10 @@ class HomePageScaffold extends StatelessWidget {
                         ),
                         ),
                       ),
                       ),
                     ],
                     ],
-            )
+                  ),
+                ],
+              ),
+            ),
           ],
           ],
         ),
         ),
       ),
       ),

@@ -2,15 +2,21 @@ import 'package:flutter/widgets.dart';
 
 
 import 'screen_util.dart';
 import 'screen_util.dart';
 
 
-class ScreenUtilInit extends StatelessWidget {
+typedef RebuildFactor = bool Function(MediaQueryData old, MediaQueryData data);
+
+bool defaultRebuildFactor(old, data) => old.size != data.size;
+
+class ScreenUtilInit extends StatefulWidget {
   /// A helper widget that initializes [ScreenUtil]
   /// A helper widget that initializes [ScreenUtil]
   const ScreenUtilInit({
   const ScreenUtilInit({
+    Key? key,
     this.builder,
     this.builder,
     this.child,
     this.child,
+    this.rebuildFactor = defaultRebuildFactor,
     this.designSize = ScreenUtil.defaultSize,
     this.designSize = ScreenUtil.defaultSize,
     this.splitScreenMode = false,
     this.splitScreenMode = false,
     this.minTextAdapt = false,
     this.minTextAdapt = false,
-    Key? key,
+    this.useInheritedMediaQuery = false,
   })  : assert(
   })  : assert(
           builder != null || child != null,
           builder != null || child != null,
           'You must either pass builder or child or both',
           'You must either pass builder or child or both',
@@ -21,43 +27,106 @@ class ScreenUtilInit extends StatelessWidget {
   final Widget? child;
   final Widget? child;
   final bool splitScreenMode;
   final bool splitScreenMode;
   final bool minTextAdapt;
   final bool minTextAdapt;
+  final bool useInheritedMediaQuery;
+  final RebuildFactor rebuildFactor;
 
 
   /// The [Size] of the device in the design draft, in dp
   /// The [Size] of the device in the design draft, in dp
   final Size designSize;
   final Size designSize;
 
 
   @override
   @override
-  Widget build(BuildContext context) {
-    bool firstFrameAllowed = false;
-    final binding = WidgetsFlutterBinding.ensureInitialized();
-    binding.deferFirstFrame();
+  State<ScreenUtilInit> createState() => _ScreenUtilInitState();
+}
+
+class _ScreenUtilInitState extends State<ScreenUtilInit>
+    with WidgetsBindingObserver {
+  late MediaQueryData mediaQueryData;
+  bool wrappedInMediaQuery = false;
+
+  WidgetsBinding get binding => WidgetsFlutterBinding.ensureInitialized();
+
+  MediaQueryData get newData {
+    if (widget.useInheritedMediaQuery) {
+      final el = context.getElementForInheritedWidgetOfExactType<MediaQuery>();
+      final mq = el?.widget as MediaQuery?;
+      final data = mq?.data;
+
+      if (data != null) {
+        wrappedInMediaQuery = true;
+        return data;
+      }
+    }
+
+    return MediaQueryData.fromWindow(binding.window);
+  }
+
+  Widget get child {
+    return SizedBox(
+      key: GlobalObjectKey(
+        hashValues(
+          mediaQueryData.size.width,
+          mediaQueryData.size.height,
+        ),
+      ),
+      child: widget.builder?.call(widget.child) ?? widget.child!,
+    );
+  }
+
+  @override
+  void initState() {
+    super.initState();
+    mediaQueryData = newData;
+    binding.addObserver(this);
+  }
 
 
-    final rootMediaQueryData = (context
-            .getElementForInheritedWidgetOfExactType<MediaQuery>()
-            ?.widget as MediaQuery?)
-        ?.data;
+  @override
+  void didChangeMetrics() {
+    final old = mediaQueryData;
+    final data = newData;
+
+    if (widget.rebuildFactor(old, data)) setState(() => mediaQueryData = data);
+  }
 
 
-    return LayoutBuilder(
-      builder: (_, constraints) {
-        if (constraints.biggest == Size.zero) return const SizedBox.shrink();
+  @override
+  void didChangeDependencies() {
+    super.didChangeDependencies();
+    didChangeMetrics();
+  }
 
 
-        if (!firstFrameAllowed) {
-          binding.allowFirstFrame();
-          firstFrameAllowed = true;
+  @override
+  void dispose() {
+    binding.removeObserver(this);
+    super.dispose();
   }
   }
 
 
+  @override
+  Widget build(BuildContext _context) {
+    if (mediaQueryData.size == Size.zero) return const SizedBox.shrink();
+
+    if (!wrappedInMediaQuery) {
       return MediaQuery(
       return MediaQuery(
-          data: rootMediaQueryData ?? MediaQueryData.fromWindow(binding.window),
-          child: Builder(builder: (_context) {
+        // key: GlobalObjectKey('mediaQuery'),
+        data: mediaQueryData,
+        child: Builder(
+          builder: (__context) {
             ScreenUtil.init(
             ScreenUtil.init(
-              _context,
-              designSize: designSize,
-              splitScreenMode: splitScreenMode,
-              minTextAdapt: minTextAdapt,
-            );
-            return builder?.call(child) ?? child!;
-          }),
+              __context,
+              designSize: widget.designSize,
+              splitScreenMode: widget.splitScreenMode,
+              minTextAdapt: widget.minTextAdapt,
             );
             );
+            return child;
           },
           },
+        ),
       );
       );
     }
     }
+
+    ScreenUtil.init(
+      _context,
+      designSize: widget.designSize,
+      splitScreenMode: widget.splitScreenMode,
+      minTextAdapt: widget.minTextAdapt,
+    );
+
+    return child;
+  }
 }
 }