如何在 flutter 标签栏中为未选择的标签添加背景颜色？

Question

我正在制作一个带有多个选项卡的页面的应用程序。 我希望它看起来像这样：

我希望未选择的选项卡具有带有黑色字体的白色背景。 我设法做到了这一点：

但我找不到更改未选中标签的背景颜色的选项。 我已使用unselectedLabelColor属性将未选定选项卡的文本颜色更改为黑色。 我尝试将标签栏小部件包装在一个容器中并为其着色，但它只是填充了它周围的整个区域，而不仅仅是标签。 关于如何在不使用任何外部软件包的情况下获得它的任何想法？

Answer 1

设置 Scaffold backgroundColor类似于backgroundColor: Colors.grey.shade100,并使用 TabController

class _TabBarDemoState extends State<TabBarDemo>
    with SingleTickerProviderStateMixin {
  late TabController controller = TabController(length: 10, vsync: this)
    ..addListener(() {
      setState(() {});
    });

和

TabBar(
    isScrollable: true,
    controller: controller,
    tabs: List.generate(
      10,
      (index) => AnimatedContainer(
        duration: Duration(milliseconds: 100),
        width: 34,//do as you like
        height: 34,//do as you like
        alignment: Alignment.center,
        decoration: ShapeDecoration(
          color: controller.index == index
              ? Colors.deepPurple
              : Colors.white,
          shape: CircleBorder(),
        ),
        child: Text(
          "$index",
          style: controller.index == index
              ? TextStyle()
              : TextStyle(color: Colors.black),
        ),
      ),
    )),

Answer 2

ListView.separated(
  itemCount: 10,
  scrollDirection: Axis.horizontal,
  shrinkWrap: true,
  separatorBuilder: (BuildContext context, int index) => const SizedBox(width: 5,),
  itemBuilder: (context, index) {
    return GestureDetector(
      onTap: () {
        setState(() {
          isSelected = index;
        });
      },
      child: Container(
        height: 40,
        width: 40,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(25),
          color: isSelected == index ? Colors.pink : Colors.white
        ),
        child: Padding(
          padding: const EdgeInsets.all(10),
          child: Center(child: Text("${index.toString()}", style: TextStyle(color: isSelected == index ? Colors.white : Colors.black),)),
        ),
      ),
    );
  }
),