Flutter TabBar如何实现顶部弧形下划线效果？

首先，TabBar自身默认的UnderlineTabIndicator只能实现矩形下划线，没法直接做出你要的顶部弧形效果，所以得靠自定义实现，而非TabBar自身功能。

你可以从这几个方向查找相关信息：

• 自定义Tab指示器：重点查TabBar的indicator参数，这个参数支持传入自定义的Decoration类，你需要继承Decoration或者实现TabIndicator相关接口，重写绘制逻辑。
• Flutter路径绘制：学习用Path类绘制弧形/贝塞尔曲线，比如用quadraticBezierTo来实现顶部的弧形轮廓，结合自定义Decoration的paint方法完成绘制。
• 指示器位置适配：了解自定义指示器如何获取Tab的位置与尺寸，通过paint方法提供的Rect参数确定弧形下划线的绘制范围，保证和对应Tab对齐。
• 参考现有自定义Indicator案例：搜Flutter自定义TabBarIndicator的实现示例，借鉴别人实现异形下划线的思路。

内容的提问来源于stack exchange，提问作者Akira Yoshimura