Flutter中如何实现自定义Tab？为选中Tab添加渐变色

因为SwitchTab组件没有提供直接设置选中项渐变色的API，你可以自己实现一个自定义Tab栏，完全控制选中状态的样式：

class GradientTabBar extends StatefulWidget {
  final List<String> tabs;
  final ValueChanged<int> onTabChanged;

  const GradientTabBar({super.key, required this.tabs, required this.onTabChanged});

  @override
  State<GradientTabBar> createState() => _GradientTabBarState();
}

class _GradientTabBarState extends State<GradientTabBar> {
  int _selectedIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        color: const Color.fromARGB(255, 31, 89, 169),
        borderRadius: BorderRadius.circular(20), // 和原SwitchTab的圆角样式匹配
      ),
      padding: const EdgeInsets.all(4),
      child: Row(
        children: List.generate(widget.tabs.length, (index) {
          return Expanded(
            child: GestureDetector(
              onTap: () {
                setState(() => _selectedIndex = index);
                widget.onTabChanged(index);
              },
              child: AnimatedContainer(
                duration: const Duration(milliseconds: 300),
                padding: const EdgeInsets.symmetric(vertical: 10),
                decoration: _selectedIndex == index
                    ? BoxDecoration(
                        gradient: const LinearGradient(
                          colors: [Colors.white, Colors.lightBlueAccent], // 自定义渐变色
                          begin: Alignment.topLeft,
                          end: Alignment.bottomRight,
                        ),
                        borderRadius: BorderRadius.circular(16),
                      )
                    : null,
                alignment: Alignment.center,
                child: Text(
                  widget.tabs[index],
                  style: TextStyle(
                    color: _selectedIndex == index ? Colors.black : Colors.white,
                    fontWeight: FontWeight.w500,
                  ),
                ),
              ),
            ),
          );
        }),
      ),
    );
  }
}

使用示例 #

// 在你的页面State中
int selected = 0;

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Column(
      children: [
        GradientTabBar(
          tabs: const ["Personal", "Group"],
          onTabChanged: (index) {
            setState(() => selected = index);
          },
        ),
        // 内容区域
        Expanded(
          child: selected == 0 
              ? const Center(child: Text("Personal Tab Content"))
              : const Center(child: Text("Group Tab Content")),
        ),
      ],
    ),
  );
}

细节说明 #

• 用AnimatedContainer实现选中状态的平滑过渡，和原SwitchTab的交互体验一致
• 可直接修改LinearGradient的colors参数调整渐变色，支持任意颜色组合
• 外层容器背景色和原代码的backgroundColour保持统一，保证视觉一致性
• 结构完全自定义，后续可灵活调整圆角、内边距、文字样式等细节

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