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 @override
void paint(Canvas canvas, Size size) { void paint(Canvas canvas, Size size) {
final paint = Paint()..color = color; final paint = Paint()..color = color;
final path = Path(); late final Path path;
const circularRadius = Radius.circular(Dimens.borderRadiusL);
if (appendixHeight == 0 || appendixWidth == 0) { 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( RRect.fromLTRBAndCorners(
0, 0,
0, 0,
@ -43,73 +56,51 @@ class MeteringTopBarShape extends CustomPainter {
bottomLeft: circularRadius, bottomLeft: circularRadius,
bottomRight: 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.lineTo(size.width, 0);
path.close(); path.close();
canvas.drawPath(path, paint);
return path;
} }
@override @override

View file

@ -20,9 +20,7 @@ class MeteringTopBar extends StatelessWidget {
return CustomPaint( return CustomPaint(
painter: MeteringTopBarShape( painter: MeteringTopBarShape(
color: Theme.of(context).colorScheme.surface, 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, appendixHeight: appendixHeight,
), ),
child: Padding( child: Padding(