如何自定义带有选中/未选中按钮样式的Tab Bar视图？

以下是实现具备选中与未选中按钮样式区分效果的Tab Bar的Dart代码示例，以及对应的效果展示：

Widget build(BuildContext context) {
    return SafeArea(
        child: DefaultTabController(
            length: 3,
            child: Scaffold(
              appBar: AppBar(
                automaticallyImplyLeading: false,
                title: const Text(
                  'My Merchants',
                  style: TextStyle(
                      color: Colors.black,
                      fontSize: 22,
                      fontWeight: FontWeight.w600,
                      fontFamily: '.SF UI Text'),
                ),
                actions: [
                  TextButton(
                      onPressed: () {},
                      child: const Text(
                        'Invite',
                        style: TextStyle(fontSize: 18),
                      ))
                ],
              ),
              body: Padding(
                padding: const EdgeInsets.all(8.0),
                child: Column(
                  children: [
                    // 自定义Tab Bar高度（可按需调整）
                    Container(
                      height: 50,
                      decoration: BoxDecoration(
                        gradient: const LinearGradient(
                            begin: Alignment.topCenter,
                            end: Alignment.bottomCenter,
                            colors: [
                              Color(0XFFD1E5D2),
                              Color(0XFFD2FBD4),
                              Color(0XFFD2FBD4),
                              Color(0XFFD2FCD4),
                            ]),
                        color: Colors.grey[300],
                        borderRadius: BorderRadius.circular(
                          10.0,
                        ),
                      ),
                      child: TabBar(
                        
                        dividerColor: Colors.white,
                        padding: const EdgeInsets.all(0),
                       
                        // 配置选中项的装饰（颜色和圆角）
                        indicator: BoxDecoration(
                          borderRadius: BorderRadius.circular(
                            10,
                          ),
                          color: Colors.green,
                        ),
                        labelColor: Colors.white,
                        unselectedLabelColor: Colors.black,
                        

                        tabAlignment: TabAlignment.fill,
                        indicatorSize: TabBarIndicatorSize.tab,
                        tabs: const [
                          // 第一个Tab（可通过icon属性添加图标）
                          Text(
                            'Merchants',
                            style: TextStyle(),
                          ),

                          // 第二个Tab（可通过icon属性添加图标）
                          Tab(
                            text: 'Merchnats Invitations',
                          ),
                          Tab(
                            text: 'My Inviations',
                          ),
                        ],
                      ),
                    ),
                    // Tab对应的内容视图
                    const Expanded(
                      child: TabBarView(
                        children: [
                          // 第一个Tab的内容
                          Center(
                            child: Text(
                              'Merchants',
                              style: TextStyle(
                                fontSize: 25,
                                fontWeight: FontWeight.w600,
                              ),
                            ),
                          ),

                          // 第二个Tab的内容
                          Center(
                            child: Text(
                              'Merchnats Invitations',
                              style: TextStyle(
                                fontSize: 25,
                                fontWeight: FontWeight.w600,
                              ),
                            ),
                          ),

                          // 第三个Tab的内容
                          Center(
                            child: Text(
                              'My Inviations',
                              style: TextStyle(
                                fontSize: 25,
                                fontWeight: FontWeight.w600,
                              ),
                            ),
                          ),
                        ],
                      ),
                    ),
                  ],
                ),
              ),
            )));

效果展示 #

这是带有选中和未选中按钮样式区分的Tab Bar：

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