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 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 with SingleTickerProvide late final Animation _borderRadiusAnimation; late final Animation _closedOpacityAnimation; late final Animation _openedOpacityAnimation; - OverlayEntry? _overlayEntry; + + bool _isDialogShown = false; @override void initState() { @@ -88,8 +88,8 @@ class AnimatedDialogState extends State 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 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 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 with SingleTickerProvide child: widget.child, ), ), - ); + ), + ); + _animateForward(); + } + + void _animateForward() { + setState(() { + _isDialogShown = true; }); - Overlay.of(context)?.insert(_overlayEntry!); _animationController.forward(); } - Future close() async { + Future _animateReverse() async { _animationController.reverse(); await Future.delayed(_animationController.reverseDuration! * timeDilation); - _overlayEntry?.remove(); setState(() { - _overlayEntry = null; + _isDialogShown = false; }); } + + Future close() => _animateReverse().then((_) => Navigator.of(context).pop()); } class _AnimatedOverlay extends StatelessWidget {