flutter 自定义tabbar选中indicator

先看效果

效果.png

具体实现方式

在flutter源文件下找到tab_indicator.dart，复制一份放在自己的文件编辑

代码.png

这是接下来要修改的地方

我来绘制一个圆角的渐变图型作为选中效果

void paint(Canvas canvas, Offset offset, ImageConfiguration configuration) {
    assert(configuration != null);
    assert(configuration.size != null);
    final Rect rect = offset & configuration.size;
    final RRect rrect = RRect.fromRectAndRadius(rect, Radius.circular(40.0));
    Gradient gradient = LinearGradient(colors: [Colors.red[200], Colors.red[800]]);
    canvas.drawRRect(rrect,
        Paint()..style = PaintingStyle.fill
          ..shader = gradient.createShader(rect));
  }

具体使用: 在TabBar设置indicator

TabBar(
   indicator: CPSUnderlineTabIndicator(),
)

完整代码

class OrderPage extends StatefulWidget {
  @override
  _createOrder createState() => _createOrder();
}

class _createOrder extends State<OrderPage> {
  List<String> topList = ['one', 'two', 'three'];

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: topList.length,
      child: Scaffold(
        body: Column(
          children: <Widget>[
            Container(
              padding: EdgeInsets.only(
                  top: MediaQuery.of(context).padding.top,
                  left: ScreenUtil().setWidth(20),
                  right: ScreenUtil().setWidth(20),
                  bottom: ScreenUtil().setWidth(20)),
              color: CPSColors.primarySwatch,
              child: Container(
                margin: EdgeInsets.only(left: ScreenUtil().setWidth(100), right: ScreenUtil().setWidth(100)),
                decoration: BoxDecoration(
                    color: Colors.grey[300],
                    borderRadius: BorderRadius.all(Radius.circular(20.0))),
                child: TabBar(
                  indicator: CPSUnderlineTabIndicator(),
                  labelPadding: EdgeInsets.zero,
                  unselectedLabelColor: Colors.black,
                  tabs:
                      topList.map((String name) => Container(
                        height: ScreenUtil().setWidth(60),
                          child: Tab(text: name))).toList(),
                ),
              ),
            ),
            Expanded(
              child: TabBarView(
                physics: NeverScrollableScrollPhysics(),
                children: topList.map((String name) {
                  return SafeArea(
                    top: false,
                    bottom: false,
                    child: Builder(
                      builder: (BuildContext context) {
                        return Center(child: Text(name));
                      },
                    ),
                  );
                }).toList(),
              ),
            ),
          ],
        ),
      ),
    );
  }
}