Создание более плавных кривых радиуса границы в Flutter

Question

Я пытаюсь создать одну нижнюю панель приложений в стиле дриблинг, я хочу, чтобы эти кривые были плавными, как дизайн, но выемка плавающей кнопки действия не такая гладкая, как в дизайне. Я не могу придумать другого способа добиться этого.

вот мой код для Scaffold -

    bottomNavigationBar: ClipRRect(
    borderRadius: BorderRadius.only(
        topLeft: Radius.circular(40), topRight: Radius.circular(40)),
    child: Container(
      child: BottomAppBar(
        shape: CircularNotchedRectangle(),
        color: Colors.blue,
        child: SizedBox(
          height: height * 0.12,
          width: width,
        ),
      ),
    ),
  ),
  floatingActionButton: Container(
    margin: EdgeInsets.all(8),
    width: 80.0,
    height: 80.0,
    child: FloatingActionButton(
      onPressed: () {},
      child: Icon(
        Icons.add,
        size: 25.0,
      ),
    ),
  ),
  floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,

Левое изображение - это то, чего я хочу достичь, правое - это то, чего я добился, обратите внимание на плавные границы на первом изображении. Я пробовал использовать Custom painter для quadraticBezierCurve, но не смог

помощь оценена

Answer 1

Потратив много времени, я написал свой собственный класс Custom, который расширяет CustomClipper, и с помощью виджета ClipPath смог добиться его с помощью

• 1-я квадрантная кривая Безье

• затем в центре 2 кубические кривые Безье,

• в конце снова четвертая кривая Безье.

Затем обернул виджет ClipPath материалом, а d дал прозрачный фон и высоту 100.

вывод вроде этого: