Как обрезать путь к круговой траектории изогнутой панели навигации в флаттере

Question

Я использую Изогнутая панель навигации в моем проекте флаттера. но не совсем так, как я хочу. Кто-нибудь может обрезать его до точного круга, как на картинке? Вот код пути клипа.

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);

}

что у меня есть

Что я хочу

Answer 1

Вместо того, чтобы рисовать самостоятельно, я предлагаю вам использовать формы, уже имеющиеся в коробке из библиотек Флаттера.

Посмотрите на этот пример, который использует 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,
  );
}
}

, который выдает следующий результат:

Вы можете настроить форму для достижения желаемого результата. Вы даже можете использовать CircularNotchedRectangle.getOuterPath, чтобы получить Path, который описывает прямоугольник с гладкой круглой выемкой, и изменить его так, как вы хотите.