如何在Flutter中更改单个选项卡背景

cld4siwp  于 2023-02-09  发布在  Flutter
关注(0)|答案(1)|浏览(106)

如何像这样更改Flutter中单个选项卡背景

更改flutter中单个选项卡的背景颜色

TabBar(
                            isScrollable: true,
                            unselectedLabelStyle: TextStyle(color: Colors.black),
                            unselectedLabelColor: Colors.black,
                            indicator:BoxDecoration(
                                borderRadius: BorderRadius.circular(15),
                                color: Colors.black),
                            tabs: [
                              Tab(
                                child: Container(
                                  color: Color(0xffebe7e2),
                                  child: Text(
                                    "All",
                                    textAlign: TextAlign.center,
                                  ),
                                ),
                              ),
                            ],
                          ),
4uqofj5v

4uqofj5v1#

您可以在容器装饰上提供选项卡项外观,如

class FA extends StatefulWidget {
  const FA({super.key});

  @override
  State<FA> createState() => _FAState();
}

class _FAState extends State<FA> with SingleTickerProviderStateMixin {
  late final controller = TabController(length: 3, vsync: this)
    ..addListener(() {
      setState(() {});
    });
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: TabBar(
        controller: controller,
        isScrollable: true,
        unselectedLabelStyle: TextStyle(color: Colors.black),
        unselectedLabelColor: Colors.transparent,
        indicator: BoxDecoration(),
        indicatorPadding: EdgeInsets.zero,
        // splashBorderRadius: ,
        tabs: [
          Tab(
            iconMargin: EdgeInsets.zero,
            child: Container(
              decoration: BoxDecoration(
                  color: controller.index == 0
                      ? Colors.black
                      : Color.fromARGB(255, 164, 164, 164),
                  borderRadius: BorderRadius.circular(16)),
              padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
              child: Text(
                "All",
                textAlign: TextAlign.center,
                style: TextStyle(
                  color: controller.index == 0 ? Colors.white : Colors.black,
                ),
              ),
            ),
          ),
          Tab(
            iconMargin: EdgeInsets.zero,
            child: Container(
              decoration: BoxDecoration(
                  color: controller.index == 1
                      ? Colors.black
                      : Color.fromARGB(255, 164, 164, 164),
                  borderRadius: BorderRadius.circular(16)),
              padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
              child: Text(
                "Next btn",
                textAlign: TextAlign.center,
                style: TextStyle(
                  color: controller.index == 1 ? Colors.white : Colors.black,
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

相关问题