Flutter TabBar底部外侧圆角样式实现求助

修改步骤： #

1. 给TabBar所在容器添加底部圆角：修改外层Container的BoxDecoration，添加bottomLeft和bottomRight圆角，让整个Tab栏的底部左右呈现圆角效果。
2. 动态设置Tab指示器圆角：使用TabBar的indicatorBuilder替代原有的indicator参数，根据当前选中的Tab索引，为第一个Tab设置底部左圆角、最后一个Tab设置底部右圆角，中间Tab仅保留顶部圆角，匹配容器的圆角样式。

修改后的完整代码： #

final List<Tab> _tabs = [
  Tab(child: Container(width: 40, child: Icon(Icons.info_outline_rounded))),
  Tab(child: Container(width: displayWidth/2-70, alignment: Alignment.center, child: Text("Ich bin", style: TextStyle(fontSize: 17)))),
  Tab(child: Container(width: displayWidth/2-70, alignment: Alignment.center, child: Text("Ich suche", style: TextStyle(fontSize: 17)))),
];

body: SafeArea(
  child: Padding(
    padding: const EdgeInsets.all(0),
    child: Column(
      children: [
        Container(
          padding: EdgeInsets.only(
            top: 5,
            right: 20,
            left: 20,
            bottom: 0,
          ),
          height: 45, // 适当调高高度避免圆角截断内容
          decoration: BoxDecoration(
            color: colorone,
            borderRadius: BorderRadius.only(
              topLeft: Radius.circular(0),
              topRight: Radius.circular(0),
              bottomLeft: Radius.circular(15.0), // 添加底部左圆角
              bottomRight: Radius.circular(15.0), // 添加底部右圆角
            )
          ),
          child: TabBar(
            isScrollable: true,
            controller: _tabController,
            tabs: _tabs,
            onTap:(value) {
              currentProfilePage = value;
            },
            labelColor: colorone,
            unselectedLabelColor: colorfive,
            // 动态生成指示器样式
            indicatorBuilder: (context, index, isSelected) {
              if (!isSelected) return SizedBox.shrink();
              BorderRadius borderRadius;
              if (index == 0) {
                // 第一个Tab：顶部左右+底部左圆角
                borderRadius = BorderRadius.only(
                  topLeft: Radius.circular(15.0),
                  topRight: Radius.circular(15.0),
                  bottomLeft: Radius.circular(15.0),
                );
              } else if (index == _tabs.length - 1) {
                // 最后一个Tab：顶部左右+底部右圆角
                borderRadius = BorderRadius.only(
                  topLeft: Radius.circular(15.0),
                  topRight: Radius.circular(15.0),
                  bottomRight: Radius.circular(15.0),
                );
              } else {
                // 中间Tab：仅顶部左右圆角
                borderRadius = BorderRadius.only(
                  topLeft: Radius.circular(15.0),
                  topRight: Radius.circular(15.0),
                );
              }
              return Container(
                decoration: BoxDecoration(
                  borderRadius: borderRadius,
                  color: colorthirty,
                ),
              );
            },
            indicatorSize: TabBarIndicatorSize.label,
            labelPadding: EdgeInsets.symmetric(horizontal: 10.0),
          )
        ),
        // 下方Tab内容区域
        Expanded(
          child: TabBarView(
            controller: _tabController,
            children: [
              Container(child: Text("Info Tab")),
              Container(child: Text("Ich bin Tab")),
              Container(child: Text("Ich suche Tab")),
            ],
          ),
        )
      ],
    ),
  ),
);

关键说明： #

• 外层容器的圆角是实现整个Tab栏底部外侧圆角的基础，确保背景色区域的底部呈现圆角。
• indicatorBuilder可以根据Tab的选中状态和索引，灵活定制每个Tab的指示器样式，完美匹配容器的圆角效果。
• 适当调高容器高度是为了避免底部圆角截断Tab内容，你可以根据实际需求调整height值。

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