diff --git a/frontend/app_flowy/packages/flowy_infra_ui/example/lib/keyboard/keyboard_screen.dart b/frontend/app_flowy/packages/flowy_infra_ui/example/lib/keyboard/keyboard_screen.dart
index 28aa027b49..fde544365b 100644
--- a/frontend/app_flowy/packages/flowy_infra_ui/example/lib/keyboard/keyboard_screen.dart
+++ b/frontend/app_flowy/packages/flowy_infra_ui/example/lib/keyboard/keyboard_screen.dart
@@ -22,12 +22,13 @@ class KeyboardScreen extends StatefulWidget {
   const KeyboardScreen({Key? key}) : super(key: key);
 
   @override
-  _KeyboardScreenState createState() => _KeyboardScreenState();
+  State<KeyboardScreen> createState() => _KeyboardScreenState();
 }
 
 class _KeyboardScreenState extends State<KeyboardScreen> {
   bool _isKeyboardVisible = false;
-  final TextEditingController _controller = TextEditingController(text: 'Hello Flowy');
+  final TextEditingController _controller =
+      TextEditingController(text: 'Hello Flowy');
 
   @override
   Widget build(BuildContext context) {
diff --git a/frontend/app_flowy/packages/flowy_infra_ui/example/pubspec.yaml b/frontend/app_flowy/packages/flowy_infra_ui/example/pubspec.yaml
index 1f7a31fa6a..b9c8ec058e 100644
--- a/frontend/app_flowy/packages/flowy_infra_ui/example/pubspec.yaml
+++ b/frontend/app_flowy/packages/flowy_infra_ui/example/pubspec.yaml
@@ -14,6 +14,7 @@ dependencies:
     path: ../
 
   cupertino_icons: ^1.0.2
+  provider:
 
 dev_dependencies:
   flutter_test:
diff --git a/frontend/app_flowy/packages/flowy_infra_ui/lib/src/flowy_overlay/flowy_overlay.dart b/frontend/app_flowy/packages/flowy_infra_ui/lib/src/flowy_overlay/flowy_overlay.dart
index 25507b8f6d..54f8d3168f 100644
--- a/frontend/app_flowy/packages/flowy_infra_ui/lib/src/flowy_overlay/flowy_overlay.dart
+++ b/frontend/app_flowy/packages/flowy_infra_ui/lib/src/flowy_overlay/flowy_overlay.dart
@@ -398,8 +398,8 @@ class FlowyOverlayState extends State<FlowyOverlay> {
 
       if (style.blur) {
         child = BackdropFilter(
-          child: child,
           filter: ImageFilter.blur(sigmaX: 4, sigmaY: 4),
+          child: child,
         );
       }
     }
diff --git a/frontend/app_flowy/packages/flowy_infra_ui/lib/src/keyboard/keyboard_visibility_detector.dart b/frontend/app_flowy/packages/flowy_infra_ui/lib/src/keyboard/keyboard_visibility_detector.dart
index b4d084acc0..643ddd94b1 100644
--- a/frontend/app_flowy/packages/flowy_infra_ui/lib/src/keyboard/keyboard_visibility_detector.dart
+++ b/frontend/app_flowy/packages/flowy_infra_ui/lib/src/keyboard/keyboard_visibility_detector.dart
@@ -14,10 +14,12 @@ class KeyboardVisibilityDetector extends StatefulWidget {
   final void Function(bool)? onKeyboardVisibilityChange;
 
   @override
-  _KeyboardVisibilityDetectorState createState() => _KeyboardVisibilityDetectorState();
+  State<KeyboardVisibilityDetector> createState() =>
+      _KeyboardVisibilityDetectorState();
 }
 
-class _KeyboardVisibilityDetectorState extends State<KeyboardVisibilityDetector> {
+class _KeyboardVisibilityDetectorState
+    extends State<KeyboardVisibilityDetector> {
   FlowyInfraUIPlatform get _platform => FlowyInfraUIPlatform.instance;
 
   bool isObserving = false;
@@ -27,7 +29,8 @@ class _KeyboardVisibilityDetectorState extends State<KeyboardVisibilityDetector>
   @override
   void initState() {
     super.initState();
-    _keyboardSubscription = _platform.onKeyboardVisibilityChange.listen((newValue) {
+    _keyboardSubscription =
+        _platform.onKeyboardVisibilityChange.listen((newValue) {
       setState(() {
         isKeyboardVisible = newValue;
         if (widget.onKeyboardVisibilityChange != null) {
@@ -62,7 +65,8 @@ class _KeyboardVisibilityDetectorInheritedWidget extends InheritedWidget {
   final bool isKeyboardVisible;
 
   @override
-  bool updateShouldNotify(_KeyboardVisibilityDetectorInheritedWidget oldWidget) {
+  bool updateShouldNotify(
+      _KeyboardVisibilityDetectorInheritedWidget oldWidget) {
     return isKeyboardVisible != oldWidget.isKeyboardVisible;
   }
 }
diff --git a/frontend/app_flowy/packages/flowy_infra_ui/lib/style_widget/container.dart b/frontend/app_flowy/packages/flowy_infra_ui/lib/style_widget/container.dart
index 4e26d9bd2d..fc91998c1f 100644
--- a/frontend/app_flowy/packages/flowy_infra_ui/lib/style_widget/container.dart
+++ b/frontend/app_flowy/packages/flowy_infra_ui/lib/style_widget/container.dart
@@ -31,7 +31,6 @@ class FlowyContainer extends StatelessWidget {
     return AnimatedContainer(
         width: width,
         height: height,
-        child: child,
         margin: margin,
         alignment: align,
         duration: duration ?? Durations.medium,
@@ -39,6 +38,7 @@ class FlowyContainer extends StatelessWidget {
             color: color,
             borderRadius: borderRadius,
             boxShadow: shadows,
-            border: border));
+            border: border),
+        child: child);
   }
 }
diff --git a/frontend/app_flowy/packages/flowy_infra_ui/lib/style_widget/hover.dart b/frontend/app_flowy/packages/flowy_infra_ui/lib/style_widget/hover.dart
index b9440bf1f1..5a3b305e1e 100644
--- a/frontend/app_flowy/packages/flowy_infra_ui/lib/style_widget/hover.dart
+++ b/frontend/app_flowy/packages/flowy_infra_ui/lib/style_widget/hover.dart
@@ -51,7 +51,7 @@ class _FlowyHoverState extends State<FlowyHover> {
         child: child,
       );
     } else {
-      return Container(child: child, color: widget.style.backgroundColor);
+      return Container(color: widget.style.backgroundColor, child: child);
     }
   }
 }
diff --git a/frontend/app_flowy/packages/flowy_infra_ui/lib/style_widget/icon_button.dart b/frontend/app_flowy/packages/flowy_infra_ui/lib/style_widget/icon_button.dart
index f3ecd23005..0f56541516 100644
--- a/frontend/app_flowy/packages/flowy_infra_ui/lib/style_widget/icon_button.dart
+++ b/frontend/app_flowy/packages/flowy_infra_ui/lib/style_widget/icon_button.dart
@@ -57,7 +57,7 @@ class FlowyIconButton extends StatelessWidget {
           onPressed: onPressed,
           child: Padding(
             padding: iconPadding,
-            child: SizedBox.fromSize(child: child, size: childSize),
+            child: SizedBox.fromSize(size: childSize, child: child),
           ),
         ),
       ),
diff --git a/frontend/app_flowy/packages/flowy_infra_ui/lib/style_widget/scrolling/styled_scrollview.dart b/frontend/app_flowy/packages/flowy_infra_ui/lib/style_widget/scrolling/styled_scrollview.dart
index bf086f756e..b57b4059cf 100644
--- a/frontend/app_flowy/packages/flowy_infra_ui/lib/style_widget/scrolling/styled_scrollview.dart
+++ b/frontend/app_flowy/packages/flowy_infra_ui/lib/style_widget/scrolling/styled_scrollview.dart
@@ -27,10 +27,12 @@ class StyledSingleChildScrollView extends StatefulWidget {
   }) : super(key: key);
 
   @override
-  _StyledSingleChildScrollViewState createState() => _StyledSingleChildScrollViewState();
+  State<StyledSingleChildScrollView> createState() =>
+      StyledSingleChildScrollViewState();
 }
 
-class _StyledSingleChildScrollViewState extends State<StyledSingleChildScrollView> {
+class StyledSingleChildScrollViewState
+    extends State<StyledSingleChildScrollView> {
   late ScrollController scrollController;
 
   @override
@@ -92,10 +94,10 @@ class StyledCustomScrollView extends StatefulWidget {
   }) : super(key: key);
 
   @override
-  _StyledCustomScrollViewState createState() => _StyledCustomScrollViewState();
+  StyledCustomScrollViewState createState() => StyledCustomScrollViewState();
 }
 
-class _StyledCustomScrollViewState extends State<StyledCustomScrollView> {
+class StyledCustomScrollViewState extends State<StyledCustomScrollView> {
   late ScrollController controller;
 
   @override
diff --git a/frontend/app_flowy/packages/flowy_infra_ui/lib/widget/buttons/base_styled_button.dart b/frontend/app_flowy/packages/flowy_infra_ui/lib/widget/buttons/base_styled_button.dart
index 0c257f3d3a..d251f993fd 100644
--- a/frontend/app_flowy/packages/flowy_infra_ui/lib/widget/buttons/base_styled_button.dart
+++ b/frontend/app_flowy/packages/flowy_infra_ui/lib/widget/buttons/base_styled_button.dart
@@ -45,10 +45,10 @@ class BaseStyledButton extends StatefulWidget {
   }) : super(key: key);
 
   @override
-  _BaseStyledBtnState createState() => _BaseStyledBtnState();
+  State<BaseStyledButton> createState() => BaseStyledBtnState();
 }
 
-class _BaseStyledBtnState extends State<BaseStyledButton> {
+class BaseStyledBtnState extends State<BaseStyledButton> {
   late FocusNode _focusNode;
   bool _isFocused = false;
 
@@ -79,9 +79,16 @@ class _BaseStyledBtnState extends State<BaseStyledButton> {
         borderRadius: widget.borderRadius ?? Corners.s10Border,
         boxShadow: _isFocused
             ? [
-                BoxShadow(color: theme.shader6, offset: Offset.zero, blurRadius: 8.0, spreadRadius: 0.0),
                 BoxShadow(
-                    color: widget.bgColor ?? theme.surface, offset: Offset.zero, blurRadius: 8.0, spreadRadius: -4.0),
+                    color: theme.shader6,
+                    offset: Offset.zero,
+                    blurRadius: 8.0,
+                    spreadRadius: 0.0),
+                BoxShadow(
+                    color: widget.bgColor ?? theme.surface,
+                    offset: Offset.zero,
+                    blurRadius: 8.0,
+                    spreadRadius: -4.0),
               ]
             : [],
       ),
@@ -112,20 +119,21 @@ class _BaseStyledBtnState extends State<BaseStyledButton> {
         hoverColor: widget.hoverColor ?? theme.hover,
         highlightColor: widget.downColor ?? theme.main1,
         focusColor: widget.focusColor ?? Colors.grey.withOpacity(0.35),
-        child: Opacity(
-          child: Padding(
-            padding: widget.contentPadding ?? EdgeInsets.all(Insets.m),
-            child: widget.child,
-          ),
-          opacity: widget.onPressed != null ? 1 : .7,
-        ),
-        constraints: BoxConstraints(minHeight: widget.minHeight ?? 0, minWidth: widget.minWidth ?? 0),
+        constraints: BoxConstraints(
+            minHeight: widget.minHeight ?? 0, minWidth: widget.minWidth ?? 0),
         onPressed: widget.onPressed,
         shape: widget.shape ??
             RoundedRectangleBorder(
               side: BorderSide(color: widget.outlineColor, width: 1.5),
               borderRadius: widget.borderRadius ?? Corners.s10Border,
             ),
+        child: Opacity(
+          opacity: widget.onPressed != null ? 1 : .7,
+          child: Padding(
+            padding: widget.contentPadding ?? EdgeInsets.all(Insets.m),
+            child: widget.child,
+          ),
+        ),
       ),
     );
   }
diff --git a/frontend/app_flowy/packages/flowy_infra_ui/lib/widget/buttons/primary_button.dart b/frontend/app_flowy/packages/flowy_infra_ui/lib/widget/buttons/primary_button.dart
index 3cd1cdf81e..2c0725288c 100644
--- a/frontend/app_flowy/packages/flowy_infra_ui/lib/widget/buttons/primary_button.dart
+++ b/frontend/app_flowy/packages/flowy_infra_ui/lib/widget/buttons/primary_button.dart
@@ -38,8 +38,8 @@ class PrimaryButton extends StatelessWidget {
       hoverColor: theme.main1,
       downColor: theme.main1,
       borderRadius: bigMode ? Corners.s12Border : Corners.s8Border,
-      child: child,
       onPressed: onPressed,
+      child: child,
     );
   }
 }
diff --git a/frontend/app_flowy/packages/flowy_infra_ui/lib/widget/buttons/secondary_button.dart b/frontend/app_flowy/packages/flowy_infra_ui/lib/widget/buttons/secondary_button.dart
index dedef61295..9e6f7d331d 100644
--- a/frontend/app_flowy/packages/flowy_infra_ui/lib/widget/buttons/secondary_button.dart
+++ b/frontend/app_flowy/packages/flowy_infra_ui/lib/widget/buttons/secondary_button.dart
@@ -41,8 +41,8 @@ class SecondaryButton extends StatelessWidget {
       downColor: theme.main1,
       outlineColor: theme.main1,
       borderRadius: bigMode ? Corners.s12Border : Corners.s8Border,
-      child: child,
       onPressed: onPressed,
+      child: child,
     );
   }
 }
diff --git a/frontend/app_flowy/packages/flowy_infra_ui/lib/widget/dialog/styled_dialogs.dart b/frontend/app_flowy/packages/flowy_infra_ui/lib/widget/dialog/styled_dialogs.dart
index 5db6afacef..ecd8cfb4ae 100644
--- a/frontend/app_flowy/packages/flowy_infra_ui/lib/widget/dialog/styled_dialogs.dart
+++ b/frontend/app_flowy/packages/flowy_infra_ui/lib/widget/dialog/styled_dialogs.dart
@@ -151,9 +151,9 @@ class StyledDialogRoute<T> extends PopupRoute<T> {
   Widget buildPage(BuildContext context, Animation<double> animation,
       Animation<double> secondaryAnimation) {
     return Semantics(
-      child: _pageBuilder(context, animation, secondaryAnimation),
       scopesRoute: true,
       explicitChildNodes: true,
+      child: _pageBuilder(context, animation, secondaryAnimation),
     );
   }
 
diff --git a/frontend/app_flowy/packages/flowy_infra_ui/lib/widget/mouse_hover_builder.dart b/frontend/app_flowy/packages/flowy_infra_ui/lib/widget/mouse_hover_builder.dart
index 207775a275..81529ba16c 100644
--- a/frontend/app_flowy/packages/flowy_infra_ui/lib/widget/mouse_hover_builder.dart
+++ b/frontend/app_flowy/packages/flowy_infra_ui/lib/widget/mouse_hover_builder.dart
@@ -5,12 +5,14 @@ typedef HoverBuilder = Widget Function(BuildContext context, bool onHover);
 class MouseHoverBuilder extends StatefulWidget {
   final bool isClickable;
 
-  const MouseHoverBuilder({Key? key, required this.builder, this.isClickable = false}) : super(key: key);
+  const MouseHoverBuilder(
+      {Key? key, required this.builder, this.isClickable = false})
+      : super(key: key);
 
   final HoverBuilder builder;
 
   @override
-  _MouseHoverBuilderState createState() => _MouseHoverBuilderState();
+  State<MouseHoverBuilder> createState() => _MouseHoverBuilderState();
 }
 
 class _MouseHoverBuilderState extends State<MouseHoverBuilder> {
@@ -19,7 +21,9 @@ class _MouseHoverBuilderState extends State<MouseHoverBuilder> {
   @override
   Widget build(BuildContext context) {
     return MouseRegion(
-      cursor: widget.isClickable ? SystemMouseCursors.click : SystemMouseCursors.basic,
+      cursor: widget.isClickable
+          ? SystemMouseCursors.click
+          : SystemMouseCursors.basic,
       onEnter: (p) => setOnHover(true),
       onExit: (p) => setOnHover(false),
       child: widget.builder(context, _onHover),
diff --git a/frontend/app_flowy/packages/flowy_infra_ui/lib/widget/rounded_button.dart b/frontend/app_flowy/packages/flowy_infra_ui/lib/widget/rounded_button.dart
index 4d5a79fe79..33075f703c 100644
--- a/frontend/app_flowy/packages/flowy_infra_ui/lib/widget/rounded_button.dart
+++ b/frontend/app_flowy/packages/flowy_infra_ui/lib/widget/rounded_button.dart
@@ -42,11 +42,11 @@ class RoundedTextButton extends StatelessWidget {
         ),
         child: SizedBox.expand(
           child: TextButton(
+            onPressed: onPressed,
             child: Text(
               title ?? '',
               style: TextStyle(color: textColor, fontSize: fontSize),
             ),
-            onPressed: onPressed,
           ),
         ),
       ),
diff --git a/frontend/app_flowy/packages/flowy_infra_ui/lib/widget/route/animation.dart b/frontend/app_flowy/packages/flowy_infra_ui/lib/widget/route/animation.dart
index b4f53008d3..e0f328afc9 100644
--- a/frontend/app_flowy/packages/flowy_infra_ui/lib/widget/route/animation.dart
+++ b/frontend/app_flowy/packages/flowy_infra_ui/lib/widget/route/animation.dart
@@ -52,10 +52,10 @@ class PageRoutes {
       pageBuilder: (context, animation, secondaryAnimation) => pageBuilder(),
       transitionsBuilder: (context, animation, secondaryAnimation, child) {
         return SharedAxisTransition(
-          child: child,
           animation: animation,
           secondaryAnimation: secondaryAnimation,
           transitionType: type,
+          child: child,
         );
       },
     );
diff --git a/frontend/app_flowy/packages/flowy_infra_ui/lib/widget/seperated_column.dart b/frontend/app_flowy/packages/flowy_infra_ui/lib/widget/seperated_column.dart
index f25a74426e..7362f989e5 100644
--- a/frontend/app_flowy/packages/flowy_infra_ui/lib/widget/seperated_column.dart
+++ b/frontend/app_flowy/packages/flowy_infra_ui/lib/widget/seperated_column.dart
@@ -31,13 +31,13 @@ class SeparatedColumn extends StatelessWidget {
       if (i > 0 && separatorBuilder != null) c.insert(i, separatorBuilder!());
     }
     return Column(
-      children: c,
       mainAxisAlignment: mainAxisAlignment,
       crossAxisAlignment: crossAxisAlignment,
       mainAxisSize: mainAxisSize,
       textBaseline: textBaseline,
       textDirection: textDirection,
       verticalDirection: verticalDirection,
+      children: c,
     );
   }
 }
diff --git a/frontend/app_flowy/packages/flowy_infra_ui/pubspec.yaml b/frontend/app_flowy/packages/flowy_infra_ui/pubspec.yaml
index a7c01e78ba..c95ba1119e 100644
--- a/frontend/app_flowy/packages/flowy_infra_ui/pubspec.yaml
+++ b/frontend/app_flowy/packages/flowy_infra_ui/pubspec.yaml
@@ -20,6 +20,7 @@ dependencies:
   equatable: "^2.0.3"
   animations: ^2.0.0
   loading_indicator: ^3.0.1
+  async:
 
   # Federated Platform Interface
   flowy_infra_ui_platform_interface: