如何在选项卡栏中制作自定义选项卡以在选择时显示不同的颜色

Question

我一直在使用这个自定义容器来为 TabBar 创建选项卡。我希望选定的选项卡显示与未选定的选项卡不同的颜色。 “第二个”选项卡是所选选项卡应如何显示的示例，但我已对其进行硬编码以显示示例。

TabBar(
    padding: EdgeInsets.zero,
    labelPadding: EdgeInsets.zero,
    indicatorPadding: EdgeInsets.zero,
    tabs: [
      Container(
        height: 50,
        width: 120,
        decoration: BoxDecoration(
          color: const Color(0xFFF4F1F1),
          border: Border.all(color: const Color(0xFFFAC5C5), width: 2),
          borderRadius: const BorderRadius.all(Radius.circular(25)),
        ),
        child: OutlinedButton(
          onPressed: () {},
          child: const Text('1st'),
        ),
      ),
      Container(
        height: 50,
        width: 120,
        decoration: BoxDecoration(
          color: const Color(0xfffacdc9),
          border: Border.all(color: const Color(0xFFFAC5C5), width: 2),
          borderRadius: const BorderRadius.all(Radius.circular(25)),
        ),
        child: OutlinedButton(
          onPressed: () {},
          child: const Text('2nd'),
        ),
      ),
      Container(
        height: 50,
        width: 120,
        decoration: BoxDecoration(
          color: const Color(0xFFF4F1F1),
          border: Border.all(color: const Color(0xfffccccc), width: 2),
          borderRadius: const BorderRadius.all(Radius.circular(25)),
        ),
        child: OutlinedButton(
          onPressed: () {},
          child: const Text('3rd'),
        ),
      ),
    ],
  ),
),

我尝试使用 Tabbar 的一些指示器属性进行即兴创作，但没有成功，因为它只显示为容器的阴影而不是前景色。

TabBar(indicator: 
   BoxDecoration(
    color: Colors.blue,
    borderRadius: BorderRadius.circular(15)),'''

Answer 1

尝试以下操作 使用 Tabbar 和 tab 作为子项

TabBar(
          tabs: [
            Tab(icon: Icon(Icons.directions_car)),
            Tab(icon: Icon(Icons.directions_transit)),
            Tab(icon: Icon(Icons.directions_bike)),
          ],
        ),

可以自定义其他选项卡以适合您的设计