[Flutter ] 自定义一个标签栏tabBar

效果一

效果二

效果三

代码

  /// 头部视图绘制
  List<Widget> headItems() {
   
    var list = homeController.categoryClist.value.list ?? [];
    var items = <Widget>[];
    for (int i = 0; i < list.length; i++) {
   
      items.add(
        GestureDetector(
            onTap: () {
   
              setState(() {
   
                tabIndex = i;
              });
            },
            child: Container(
              /// item容器一, 用于动态修改底色, 方便圆角的视觉展示
              decoration: boxDecorationByIndex(i)[0],
              child: Container(
                  width: (343.w / list.length),
                  height: 35.h,
                  /// item内容容器, 用于动态修改底色/圆角等(选中/非选中), 方便圆角的视觉展示
                  decoration: boxDecorationByIndex(i)[1],
                  child: Row