如何在 flutter 中实现自定义形状的标签栏指示器

Question

我想构建自定义形状指示器我知道可以使用 canvas 小部件绘制自定义形状来实现，但如果您可以提供一些提示或共享一些代码来实现此 UI，我无法做到。 这将非常有帮助。 谢谢。！。

Answer 1

我发现了一个技巧，我要求设计师提供指标的 svg 文件。 然后我将 go 发送到fluttershapemaker并上传 svg 文件，它为我提供了自定义绘画和代码，天哪，天哪，它工作得很好。

这是由fluttershapemaker生成的自定义绘画代码

class TabPainter extends CustomPainter {
  final Color? color;

  TabPainter({this.color});

  @override
  void paint(Canvas canvas, Size size) {
    Paint paint0Fill = Paint()..style = PaintingStyle.fill;
    paint0Fill.color = const Color(0xff9AE9E1).withOpacity(1.0);

    Path path_0 = Path();
    path_0.moveTo(size.width * 0.08426966, size.height * 0.2744795);
    path_0.cubicTo(
        size.width * 0.08426966,
        size.height * 0.03409159,
        size.width * 0.02544281,
        size.height * 0.001752948,
        0,
        size.height * 0.001753373);
    path_0.lineTo(size.width * 0.9438202, size.height * 0.001753373);
    path_0.cubicTo(
        size.width * 0.9748483,
        size.height * 0.001753373,
        size.width,
        size.height * 0.1035068,
        size.width,
        size.height * 0.2290250);
    path_0.lineTo(size.width, size.height * 0.9790273);
    path_0.cubicTo(
        size.width,
        size.height * 0.8863636,
        size.width * 0.9765899,
        size.height * 0.8653909,
        size.width * 0.9662921,
        size.height * 0.8653909);
    path_0.lineTo(size.width * 0.1460674, size.height * 0.8653909);
    path_0.cubicTo(
        size.width * 0.1095506,
        size.height * 0.8653909,
        size.width * 0.08426966,
        size.height * 0.7727273,
        size.width * 0.08426966,
        size.height * 0.5926636);
    path_0.lineTo(size.width * 0.08426966, size.height * 0.2744795);
    path_0.close();

    paint0Fill.color = const Color(0xff9AE9E1).withOpacity(1.0);
    canvas.drawPath(path_0, paint0Fill);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return true;
  }
}