Notched Bottom Navigation Bar with padding - flutter

Question

I am trying to use bottomNavigationBar with notched effect in flutter, and of course it is fine. But when I try to add padding to BottomAppBar on the left and right to make the navigator floating-like, the notch position shifts to the right!!
This means the floating action button is in its correct spot but the notch is not exactly under it but shifted to the right. It shifts to the right exactly as the amount of padding I give to the BottomAppBar! Why!
The shape feature I used for BottomAppBar is this:
AutomaticNotchedShape(RoundedRectangleBorder(borderRadius:
BorderRadius.all(Radius.circular(35))), StadiumBorder()),
Just to be clear, I want something like this but with the notched effect on the middle (FloatingActionButtonLocation.centerDocked).
Like this but with notch in the center
Edit
Sample code to demonstrate this issue:
#override
Widget build(BuildContext context) {
return Scaffold(
body: Container(),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: const Icon(Icons.add),
),
bottomNavigationBar: Padding(
padding: const EdgeInsets.all(
20.0,
),
child: ClipRRect(
borderRadius: BorderRadius.circular(30.0),
child: BottomAppBar(
notchMargin: 5.0,
shape: const CircularNotchedRectangle(),
child: Container(height: 50.0),
color: Colors.blue,
clipBehavior: Clip.hardEdge,
),
),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
);
}
Render for sample code:

Answer 1

I solved this problem by creating own CustomCircularNotchedRectangle. I'm added to original custom Offset - notchOffset...
Using:
Padding(
padding: const EdgeInsets.symmetric(horizontal: 10.0).copyWith(bottom: 13),
child: BottomAppBar(
shape: CustomCircularNotchedRectangle(
notchOffset: Offset(-10, 0),
),
notchMargin: 6.0,
color: widget.backgroundColor,
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: items,
),
),
);
CustomCircularNotchedRectangle:
class CustomCircularNotchedRectangle extends NotchedShape {
CustomCircularNotchedRectangle({
this.notchOffset = const Offset(0, 0),
});
final Offset notchOffset;
#override
Path getOuterPath(Rect host, Rect? guest) {
if (guest == null || !host.overlaps(guest)) return Path()..addRect(host);
// The guest's shape is a circle bounded by the guest rectangle.
// So the guest's radius is half the guest width.
final double notchRadius = guest.width / 2.0;
// We build a path for the notch from 3 segments:
// Segment A - a Bezier curve from the host's top edge to segment B.
// Segment B - an arc with radius notchRadius.
// Segment C - a Bezier curve from segment B back to the host's top edge.
//
// A detailed explanation and the derivation of the formulas below is
// available at: goo.gl/Ufzrqn
const double s1 = 30.0;
const double s2 = 1.0;
final double r = notchRadius;
final double a = -1.0 * r - s2;
final double b = host.top - guest.center.dy;
final double n2 = math.sqrt(b * b * r * r * (a * a + b * b - r * r));
final double p2xA = ((a * r * r) - n2) / (a * a + b * b);
final double p2xB = ((a * r * r) + n2) / (a * a + b * b);
final double p2yA = math.sqrt(r * r - p2xA * p2xA);
final double p2yB = math.sqrt(r * r - p2xB * p2xB);
final List<Offset?> p = List<Offset?>.filled(6, null);
// p0, p1, and p2 are the control points for segment A.
p[0] = Offset(a - s1, b);
p[1] = Offset(a, b);
final double cmp = b < 0 ? -1.0 : 1.0;
p[2] = cmp * p2yA > cmp * p2yB ? Offset(p2xA, p2yA) : Offset(p2xB, p2yB);
// p3, p4, and p5 are the control points for segment B, which is a mirror
// of segment A around the y axis.
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 points back to the absolute coordinate system.
for (int i = 0; i < p.length; i += 1) {
p[i] = p[i]! + guest.center + notchOffset;
}
return 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: false,
)
..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();
}
}
Before:
After: