From 7018f06270aa49e5f6c6419c522e003170a80c98 Mon Sep 17 00:00:00 2001
From: Vadim <44135514+vodemn@users.noreply.github.com>
Date: Sun, 11 Dec 2022 19:19:38 +0300
Subject: [PATCH] Open `AnimatedDialog` with `Navigator`

---
 .../bottom_controls/bottom_controls.dart      |  2 +-
 .../topbar/components/reading_container.dart  |  4 +-
 .../components/shared/animated_dialog.dart    | 56 ++++++++++---------
 3 files changed, 34 insertions(+), 28 deletions(-)

diff --git a/lib/screens/metering/components/bottom_controls/bottom_controls.dart b/lib/screens/metering/components/bottom_controls/bottom_controls.dart
index b3f53a1..a6eb370 100644
--- a/lib/screens/metering/components/bottom_controls/bottom_controls.dart
+++ b/lib/screens/metering/components/bottom_controls/bottom_controls.dart
@@ -28,7 +28,7 @@ class MeteringBottomControls extends StatelessWidget {
         child: SafeArea(
           top: false,
           child: Padding(
-            padding: const EdgeInsets.symmetric(vertical: Dimens.paddingM),
+            padding: const EdgeInsets.symmetric(vertical: Dimens.paddingL),
             child: Row(
               mainAxisAlignment: MainAxisAlignment.spaceEvenly,
               children: [
diff --git a/lib/screens/metering/components/topbar/components/reading_container.dart b/lib/screens/metering/components/topbar/components/reading_container.dart
index 35a79c0..a4abc3d 100644
--- a/lib/screens/metering/components/topbar/components/reading_container.dart
+++ b/lib/screens/metering/components/topbar/components/reading_container.dart
@@ -51,10 +51,10 @@ class _ReadingValueBuilder extends StatelessWidget {
           reading.label,
           style: textTheme.labelMedium?.copyWith(color: Theme.of(context).colorScheme.onPrimaryContainer),
         ),
-        const SizedBox(height: Dimens.grid8),
+        const SizedBox(height: Dimens.grid4),
         Text(
           reading.value,
-          style: textTheme.bodyLarge?.copyWith(color: Theme.of(context).colorScheme.onPrimaryContainer),
+          style: textTheme.titleMedium?.copyWith(color: Theme.of(context).colorScheme.onPrimaryContainer),
         ),
       ],
     );
diff --git a/lib/screens/metering/components/topbar/components/shared/animated_dialog.dart b/lib/screens/metering/components/topbar/components/shared/animated_dialog.dart
index a8ae8d9..9dbf0a5 100644
--- a/lib/screens/metering/components/topbar/components/shared/animated_dialog.dart
+++ b/lib/screens/metering/components/topbar/components/shared/animated_dialog.dart
@@ -22,7 +22,6 @@ class AnimatedDialog extends StatefulWidget {
 
 class AnimatedDialogState extends State<AnimatedDialog> with SingleTickerProviderStateMixin {
   final GlobalKey _key = GlobalKey();
-  final LayerLink _layerLink = LayerLink();
 
   late final Size _closedSize;
   late final Offset _closedOffset;
@@ -36,7 +35,8 @@ class AnimatedDialogState extends State<AnimatedDialog> with SingleTickerProvide
   late final Animation<double> _borderRadiusAnimation;
   late final Animation<double> _closedOpacityAnimation;
   late final Animation<double> _openedOpacityAnimation;
-  OverlayEntry? _overlayEntry;
+
+  bool _isDialogShown = false;
 
   @override
   void initState() {
@@ -88,8 +88,8 @@ class AnimatedDialogState extends State<AnimatedDialog> with SingleTickerProvide
         begin: _closedSize,
         end: widget.openedSize ??
             Size(
-              mediaQuery.size.width - mediaQuery.padding.horizontal - Dimens.paddingM * 4,
-              mediaQuery.size.height - mediaQuery.padding.vertical - Dimens.paddingM * 4,
+              mediaQuery.size.width - mediaQuery.padding.horizontal - Dimens.paddingM * 2,
+              mediaQuery.size.height - mediaQuery.padding.vertical - Dimens.paddingM * 2,
             ),
       );
       _sizeAnimation = _sizeTween.animate(_defaultCurvedAnimation);
@@ -120,16 +120,13 @@ class AnimatedDialogState extends State<AnimatedDialog> with SingleTickerProvide
     return InkWell(
       key: _key,
       onTap: _openDialog,
-      child: CompositedTransformTarget(
-        link: _layerLink,
-        child: Opacity(
-          opacity: _overlayEntry != null ? 0 : 1,
-          child: ClipRRect(
-            borderRadius: BorderRadius.circular(Dimens.borderRadiusM),
-            child: ColoredBox(
-              color: Theme.of(context).colorScheme.primaryContainer,
-              child: widget.child ?? widget.closedChild,
-            ),
+      child: Opacity(
+        opacity: _isDialogShown ? 0 : 1,
+        child: ClipRRect(
+          borderRadius: BorderRadius.circular(Dimens.borderRadiusM),
+          child: ColoredBox(
+            color: Theme.of(context).colorScheme.primaryContainer,
+            child: widget.child ?? widget.closedChild,
           ),
         ),
       ),
@@ -137,12 +134,14 @@ class AnimatedDialogState extends State<AnimatedDialog> with SingleTickerProvide
   }
 
   void _openDialog() {
-    setState(() {
-      _overlayEntry = OverlayEntry(
-        builder: (context) => CompositedTransformFollower(
-          offset: Offset(-_closedOffset.dx, -_closedOffset.dy),
-          link: _layerLink,
-          showWhenUnlinked: false,
+    Navigator.of(context).push(
+      PageRouteBuilder(
+        barrierColor: Colors.transparent,
+        opaque: false,
+        transitionDuration: Duration.zero,
+        reverseTransitionDuration: Duration.zero,
+        pageBuilder: (_, __, ___) => WillPopScope(
+          onWillPop: () => _animateReverse().then((value) => true),
           child: _AnimatedOverlay(
             controller: _animationController,
             barrierColorAnimation: _barrierColorAnimation,
@@ -164,20 +163,27 @@ class AnimatedDialogState extends State<AnimatedDialog> with SingleTickerProvide
             child: widget.child,
           ),
         ),
-      );
+      ),
+    );
+    _animateForward();
+  }
+
+  void _animateForward() {
+    setState(() {
+      _isDialogShown = true;
     });
-    Overlay.of(context)?.insert(_overlayEntry!);
     _animationController.forward();
   }
 
-  Future<void> close() async {
+  Future<void> _animateReverse() async {
     _animationController.reverse();
     await Future.delayed(_animationController.reverseDuration! * timeDilation);
-    _overlayEntry?.remove();
     setState(() {
-      _overlayEntry = null;
+      _isDialogShown = false;
     });
   }
+
+  Future<void> close() => _animateReverse().then((_) => Navigator.of(context).pop());
 }
 
 class _AnimatedOverlay extends StatelessWidget {