fixed top bar cutout shape

This commit is contained in:
Vadim 2023-09-08 23:12:35 +02:00
parent cf4373d854
commit ad9112507f
2 changed files with 56 additions and 67 deletions

View file

@ -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

View file

@ -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(