I created the design without external packages by extracting and customizing the necessary shape from the convex_bottom_bar package for my bottom navbar.
Full Code:
import 'dart:math' as math;
import 'package:flutter/material.dart';
class ConvexNotchedRectangle extends NotchedShape {
/// The corner radius of the top-left and top-right edges of the bar.
final double radius;
/// Create a convex notched rectangle with optional rounded top corners.
const ConvexNotchedRectangle({this.radius = 0});
@override
Path getOuterPath(Rect host, Rect? guest) {
if (guest == null || !host.overlaps(guest)) {
// If there’s no overlap or no guest (FAB), just draw a normal rectangle.
return Path()..addRect(host);
}
// The guest (FAB) is circular, bounded by the guest rectangle.
final notchRadius = guest.width / 2.0;
// These control the smoothness of the convex curve.
const s1 = 18.0;
const s2 = 2.0;
final r = notchRadius;
final a = -1.0 * r - s2;
final b = host.top - guest.center.dy;
// Compute control points using Bezier curve math
final n2 = math.sqrt(b * b * r * r * (a * a + b * b - r * r));
final p2xA = ((a * r * r) - n2) / (a * a + b * b);
final p2xB = ((a * r * r) + n2) / (a * a + b * b);
final p2yA = -math.sqrt(r * r - p2xA * p2xA);
final p2yB = -math.sqrt(r * r - p2xB * p2xB);
final p = List<Offset>.filled(6, Offset.zero, growable: false);
// p0, p1, and p2 are control points for the left side curve
p[0] = Offset(a - s1, b);
p[1] = Offset(a, b);
final cmp = b < 0 ? -1.0 : 1.0;
p[2] = cmp * p2yA > cmp * p2yB ? Offset(p2xA, p2yA) : Offset(p2xB, p2yB);
// p3, p4, and p5 are mirrored on the x-axis for the right curve
p[3] = Offset(-1.0 * p[2].dx, p[2].dy);
p[4] = Offset(-1.0 * p[1].dx, p[1].dy);
p[5] = Offset(-1.0 * p[0].dx, p[0].dy);
// Translate all control points to the FAB’s center position
for (var i = 0; i < p.length; i++) {
p[i] = p[i] + guest.center;
}
// Build the final path with optional corner radius
return radius > 0
? (Path()
..moveTo(host.left, host.top + radius)
..arcToPoint(
Offset(host.left + radius, host.top),
radius: Radius.circular(radius),
)
..lineTo(p[0].dx, p[0].dy)
..quadraticBezierTo(p[1].dx, p[1].dy, p[2].dx, p[2].dy)
..arcToPoint(
p[3],
radius: Radius.circular(notchRadius),
clockwise: true,
)
..quadraticBezierTo(p[4].dx, p[4].dy, p[5].dx, p[5].dy)
..lineTo(host.right - radius, host.top)
..arcToPoint(
Offset(host.right, host.top + radius),
radius: Radius.circular(radius),
)
..lineTo(host.right, host.bottom)
..lineTo(host.left, host.bottom)
..close())
: (Path()
..moveTo(host.left, host.top)
..lineTo(p[0].dx, p[0].dy)
..quadraticBezierTo(p[1].dx, p[1].dy, p[2].dx, p[2].dy)
..arcToPoint(
p[3],
radius: Radius.circular(notchRadius),
clockwise: true,
)
..quadraticBezierTo(p[4].dx, p[4].dy, p[5].dx, p[5].dy)
..lineTo(host.right, host.top)
..lineTo(host.right, host.bottom)
..lineTo(host.left, host.bottom)
..close());
}
}
BottomAppBar(
padding: EdgeInsets.zero,
color: Colors.white,
shape: const ConvexNotchedRectangle(),
notchMargin: 8,
elevation: 0,
clipBehavior: Clip.antiAlias,
child: SizedBox(
height: 88,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
_buildNavItem(0),
_buildNavItem(1),
_buildNavItem(2),
_buildNavItem(3),
_buildNavItem(4),
],
),
),
),
