fixed top bar cutout shape

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();
+    late final Path path;
-    const circularRadius = Radius.circular(Dimens.borderRadiusL);
     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) {
+      ..close();
-      // 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,
-      );
-
-      // 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,
-      );
-
-      // 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,
-      );
-
-      // 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,
-      );
-
-      // 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 _drawAppendixOnLeft(Size size, double bottomRadius) {
+    final path = Path();
+    final circularRadius = Radius.circular(bottomRadius);
+    final appendixHeight = this.appendixHeight.abs();
+
+    // 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, 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,
+    );
+
     path.lineTo(size.width, 0);
     path.close();
-    canvas.drawPath(path, paint);
+
+    return path;
   }
 
   @override

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
+        appendixWidth: MediaQuery.of(context).size.width / 2 - Dimens.grid8 / 2 + Dimens.paddingM,
-            ? MediaQuery.of(context).size.width / 2 - Dimens.grid8 + Dimens.paddingM
-            : MediaQuery.of(context).size.width / 2 + Dimens.grid8 - Dimens.paddingM,
         appendixHeight: appendixHeight,
       ),
       child: Padding(