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(