79816251

Date: 2025-11-11 05:15:39
Score: 1
Natty:
Report link

enter image description here

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),
              ],
            ),
          ),
        ),
Reasons:
  • Probably link only (1):
  • Long answer (-1):
  • Has code block (-0.5):
  • Self-answer (0.5):
  • Low reputation (1):
Posted by: Raju Islam