如何在颤动中将路径剪切为弯曲导航栏的圆形路径

Question

I'm using Curved Navigation Bar in my flutter project. but is not exactly the same as I want. Can anyone clip it to exact circular like the picture attached? Here is the clip path code.

class NavCustomPainter extends CustomPainter {
double loc;
double s;
Color color;
TextDirection textDirection;

NavCustomPainter(
  double startingLoc, int itemsLength, this.color, this.textDirection) {
final span = 1.0 / itemsLength;
s = 0.2;
double l = startingLoc + (span - s) / 2;
loc = textDirection == TextDirection.rtl ? 0.8 - l : l;
}

 @override
 void paint(Canvas canvas, Size size) {
final paint = Paint()
  ..color = color
  ..style = PaintingStyle.fill;

final path = Path()
  ..moveTo(0, 0)
 ..lineTo((loc + 0.0) * size.width, 0)
  ..lineTo((loc + 0.015) * size.width, 0)
  ..cubicTo(
    (loc + s * 0.05) * size.width,
    size.height * 0.07,
    loc * size.width,
    size.height * 0.65,
    (loc + s * 0.50) * size.width,
    size.height * 0.65,
  )
  ..cubicTo(
    (loc + s + 0.01) * size.width,
    size.height * 0.65,
    (loc + s - s * 0.1) * size.width,
    size.height * 0.07,
    (loc + s - 0.01) * size.width,
    0,
  )
  ..lineTo(size.width, 0)
  ..lineTo(size.width, size.height)
  ..lineTo(0, size.height)
  ..close();
canvas.drawPath(path, paint);

}

what i have

What I want

Answer 1

Instead of doing your own painting, I suggest you use the shapes already available out of the box from the Flutter libraries.

Take a look at this example that takes advantage of the CircularNotchedRectangle shape:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text('Sample Code'),
    ),
    body: Center(
      child: Text('You have pressed the button $_counter times.'),
    ),
    bottomNavigationBar: BottomAppBar(
      shape: const CircularNotchedRectangle(),
      child: Container(height: 50.0,),
    ),
    floatingActionButton: FloatingActionButton(
      onPressed: _incrementCounter,
      tooltip: 'Increment Counter',
      child: Icon(Icons.add),
    ),
    floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
  );
}
}

Which produces the following output:

You can customise the shape to achieve the output you want exactly. You can even use CircularNotchedRectangle.getOuterPath to get the Path that describes a rectangle with a smooth circular notch, and modify it however you want.