From 8415f4e51511241637efe3bde2ce558d5efb6ade Mon Sep 17 00:00:00 2001 From: Vadim <44135514+vodemn@users.noreply.github.com> Date: Fri, 8 Sep 2023 23:46:31 +0200 Subject: [PATCH] ML-114 Metering container issues (#116) * fixed top bar cutout shape * update closed offset on layout change --- .../shape_top_bar_metering.dart | 119 ++++++++---------- .../widget_top_bar_metering.dart | 4 +- .../widget_dialog_animated.dart | 78 +++++++----- 3 files changed, 100 insertions(+), 101 deletions(-) diff --git a/lib/screens/metering/components/shared/metering_top_bar/shape_top_bar_metering.dart b/lib/screens/metering/components/shared/metering_top_bar/shape_top_bar_metering.dart index c8f04fa..acc5986 100644 --- a/lib/screens/metering/components/shared/metering_top_bar/shape_top_bar_metering.dart +++ b/lib/screens/metering/components/shared/metering_top_bar/shape_top_bar_metering.dart @@ -31,10 +31,23 @@ class MeteringTopBarShape extends CustomPainter { @override void paint(Canvas canvas, Size size) { final paint = Paint()..color = color; - final path = Path(); - const circularRadius = Radius.circular(Dimens.borderRadiusL); + late final Path path; if (appendixHeight == 0 || appendixWidth == 0) { - path.addRRect( + path = _drawNoAppendix(size, Dimens.borderRadiusL); + } else if (appendixHeight < 0) { + path = _drawAppendixOnLeft(size, Dimens.borderRadiusL); + canvas.scale(-1, 1); + canvas.translate(-size.width, 0); + } else { + path = _drawAppendixOnLeft(size, Dimens.borderRadiusL); + } + canvas.drawPath(path, paint); + } + + Path _drawNoAppendix(Size size, double bottomRadius) { + final circularRadius = Radius.circular(bottomRadius); + return Path() + ..addRRect( RRect.fromLTRBAndCorners( 0, 0, @@ -43,73 +56,51 @@ class MeteringTopBarShape extends CustomPainter { bottomLeft: circularRadius, bottomRight: circularRadius, ), - ); - } else if (appendixHeight < 0) { - // Left side with bottom corner - path.lineTo(0, size.height + appendixHeight - Dimens.borderRadiusL); - path.arcToPoint( - Offset(Dimens.borderRadiusL, size.height + appendixHeight), - radius: circularRadius, - clockwise: false, - ); + ) + ..close(); + } - // Bottom side with step - final allowedRadius = min(appendixHeight.abs() / 2, Dimens.borderRadiusL); - path.lineTo(appendixWidth - allowedRadius, size.height + appendixHeight); - path.arcToPoint( - Offset(appendixWidth, size.height + appendixHeight + allowedRadius), - radius: circularRadius, - ); - path.lineTo(appendixWidth, size.height - allowedRadius); - path.arcToPoint( - Offset(appendixWidth + allowedRadius, size.height), - radius: circularRadius, - clockwise: false, - ); + Path _drawAppendixOnLeft(Size size, double bottomRadius) { + final path = Path(); + final circularRadius = Radius.circular(bottomRadius); + final appendixHeight = this.appendixHeight.abs(); - // Right side with bottom corner - path.lineTo(size.width - Dimens.borderRadiusL, size.height); - path.arcToPoint( - Offset(size.width, size.height - Dimens.borderRadiusL), - radius: circularRadius, - clockwise: false, - ); - } else { - // Left side with bottom corner - path.lineTo(0, size.height - Dimens.borderRadiusL); - path.arcToPoint( - Offset(Dimens.borderRadiusL, size.height), - radius: circularRadius, - clockwise: false, - ); + // Left side with bottom corner + path.lineTo(0, size.height - bottomRadius); + path.arcToPoint( + Offset(bottomRadius, size.height), + radius: circularRadius, + clockwise: false, + ); - // Bottom side with step - final allowedRadius = min(appendixHeight.abs() / 2, Dimens.borderRadiusL); - path.relativeLineTo(appendixWidth - allowedRadius * 2, 0); - path.relativeArcToPoint( - Offset(allowedRadius, -allowedRadius), - radius: Radius.circular(allowedRadius), - rotation: 90, - clockwise: false, - ); - path.relativeLineTo(0, -appendixHeight + allowedRadius * 2); - path.relativeArcToPoint( - Offset(allowedRadius, -allowedRadius), - radius: Radius.circular(allowedRadius), - rotation: 90, - ); + // Bottom side with step + final allowedRadius = min(appendixHeight.abs() / 2, bottomRadius); + path.lineTo(appendixWidth - allowedRadius, size.height); + path.arcToPoint( + Offset(appendixWidth, size.height - allowedRadius), + radius: Radius.circular(allowedRadius), + rotation: 90, + clockwise: false, + ); + path.lineTo(appendixWidth, size.height - appendixHeight + allowedRadius); + path.arcToPoint( + Offset(appendixWidth + allowedRadius, size.height - appendixHeight), + radius: Radius.circular(allowedRadius), + rotation: 90, + ); + + // Right side with bottom corner + path.lineTo(size.width - bottomRadius, size.height - appendixHeight); + path.arcToPoint( + Offset(size.width, size.height - appendixHeight - bottomRadius), + radius: circularRadius, + clockwise: false, + ); - // Right side with bottom corner - path.lineTo(size.width - Dimens.borderRadiusL, size.height - appendixHeight); - path.arcToPoint( - Offset(size.width, size.height - appendixHeight - Dimens.borderRadiusL), - radius: circularRadius, - clockwise: false, - ); - } path.lineTo(size.width, 0); path.close(); - canvas.drawPath(path, paint); + + return path; } @override diff --git a/lib/screens/metering/components/shared/metering_top_bar/widget_top_bar_metering.dart b/lib/screens/metering/components/shared/metering_top_bar/widget_top_bar_metering.dart index 0682e7e..a005b85 100644 --- a/lib/screens/metering/components/shared/metering_top_bar/widget_top_bar_metering.dart +++ b/lib/screens/metering/components/shared/metering_top_bar/widget_top_bar_metering.dart @@ -20,9 +20,7 @@ class MeteringTopBar extends StatelessWidget { return CustomPaint( painter: MeteringTopBarShape( color: Theme.of(context).colorScheme.surface, - appendixWidth: appendixHeight > 0 - ? MediaQuery.of(context).size.width / 2 - Dimens.grid8 + Dimens.paddingM - : MediaQuery.of(context).size.width / 2 + Dimens.grid8 - Dimens.paddingM, + appendixWidth: MediaQuery.of(context).size.width / 2 - Dimens.grid8 / 2 + Dimens.paddingM, appendixHeight: appendixHeight, ), child: Padding( diff --git a/lib/screens/metering/components/shared/readings_container/components/animated_dialog_picker/components/animated_dialog/widget_dialog_animated.dart b/lib/screens/metering/components/shared/readings_container/components/animated_dialog_picker/components/animated_dialog/widget_dialog_animated.dart index cea97da..72e770b 100644 --- a/lib/screens/metering/components/shared/readings_container/components/animated_dialog_picker/components/animated_dialog/widget_dialog_animated.dart +++ b/lib/screens/metering/components/shared/readings_container/components/animated_dialog_picker/components/animated_dialog/widget_dialog_animated.dart @@ -22,15 +22,15 @@ class AnimatedDialog extends StatefulWidget { class AnimatedDialogState extends State with SingleTickerProviderStateMixin { final GlobalKey _key = GlobalKey(); - late final Size _closedSize; - late final Offset _closedOffset; + late Size _closedSize; + late Offset _closedOffset; late final AnimationController _animationController; late final CurvedAnimation _defaultCurvedAnimation; late final Animation _barrierColorAnimation; - late final SizeTween _sizeTween; - late final Animation _sizeAnimation; - late final Animation _offsetAnimation; + late SizeTween _sizeTween; + late Animation _sizeAnimation; + late Animation _offsetAnimation; late final Animation _borderRadiusAnimation; late final Animation _closedOpacityAnimation; late final Animation _openedOpacityAnimation; @@ -88,35 +88,7 @@ class AnimatedDialogState extends State with SingleTickerProvide ), ); - WidgetsBinding.instance.addPostFrameCallback((_) { - final mediaQuery = MediaQuery.of(context); - - _closedSize = _key.currentContext!.size!; - _sizeTween = SizeTween( - begin: _closedSize, - end: widget.openedSize ?? - Size( - mediaQuery.size.width - - mediaQuery.padding.horizontal - - Dimens.dialogMargin.horizontal, - mediaQuery.size.height - mediaQuery.padding.vertical - Dimens.dialogMargin.vertical, - ), - ); - _sizeAnimation = _sizeTween.animate(_defaultCurvedAnimation); - - final renderBox = _key.currentContext!.findRenderObject()! as RenderBox; - _closedOffset = renderBox.localToGlobal(Offset.zero); - _offsetAnimation = SizeTween( - begin: Size( - _closedOffset.dx + _closedSize.width / 2, - _closedOffset.dy + _closedSize.height / 2, - ), - end: Size( - mediaQuery.size.width / 2, - mediaQuery.size.height / 2 + mediaQuery.padding.top / 2 - mediaQuery.padding.bottom / 2, - ), - ).animate(_defaultCurvedAnimation); - }); + _setClosedOffset(); } @override @@ -133,6 +105,12 @@ class AnimatedDialogState extends State with SingleTickerProvide ).animate(_defaultCurvedAnimation); } + @override + void didUpdateWidget(covariant AnimatedDialog oldWidget) { + super.didUpdateWidget(oldWidget); + _setClosedOffset(); + } + @override void dispose() { _animationController.dispose(); @@ -151,6 +129,38 @@ class AnimatedDialogState extends State with SingleTickerProvide ); } + void _setClosedOffset() { + WidgetsBinding.instance.addPostFrameCallback((_) { + final renderBox = _key.currentContext?.findRenderObject()! as RenderBox?; + if (renderBox != null) { + final size = MediaQuery.sizeOf(context); + final padding = MediaQuery.paddingOf(context); + _closedSize = _key.currentContext!.size!; + _sizeTween = SizeTween( + begin: _closedSize, + end: widget.openedSize ?? + Size( + size.width - padding.horizontal - Dimens.dialogMargin.horizontal, + size.height - padding.vertical - Dimens.dialogMargin.vertical, + ), + ); + _sizeAnimation = _sizeTween.animate(_defaultCurvedAnimation); + + _closedOffset = renderBox.localToGlobal(Offset.zero); + _offsetAnimation = SizeTween( + begin: Size( + _closedOffset.dx + _closedSize.width / 2, + _closedOffset.dy + _closedSize.height / 2, + ), + end: Size( + size.width / 2, + size.height / 2 + padding.top / 2 - padding.bottom / 2, + ), + ).animate(_defaultCurvedAnimation); + } + }); + } + void _openDialog() { Navigator.of(context).push( PageRouteBuilder(