Flutter 自定义标签栏

Question

我是 Flutter 的新手，想根据下图构建一个自定义标签栏。 尝试了不同的方法，但没有一个与图片中的完全一样。

图片

Answer 1

更改为您的图标和颜色

DefaultTabController(
                                length: 2, // length of tabs
                                initialIndex: 0,
                                child: Column(
                                  crossAxisAlignment: CrossAxisAlignment.stretch,
                                  children: [
                                    TabBar(
                                      indicatorColor: Colors.white,
                                      labelColor: Colors.white,
                                      unselectedLabelColor: Colors.grey,
                                      labelStyle: TextStyle(
                                          fontSize: 22.0,
                                          fontWeight:
                                          FontWeight.bold), //For Selected tab
                                      unselectedLabelStyle: TextStyle(
                                          fontSize: 17.0,
                                          fontWeight: FontWeight.bold),
                                      tabs: [
                                        Tab(
                                          child: Row(
                                            mainAxisSize: MainAxisSize.min,
                                            children: [
                                              Icon(Icons.compare_arrows),
                                              const SizedBox(width: 8),
                                              Text('GAMES'),
                                            ],
                                          ),
                                        ),
                                        Tab(
                                          child: Row(
                                            mainAxisSize: MainAxisSize.min,
                                            children: [
                                              Icon(Icons.chat),
                                              const SizedBox(width: 8),
                                              Text('CHAT'),
                                            ],
                                          ),
                                        ),
                                      ],
                                    ),
                                    Container(
                                      height: 450,
                                      child: TabBarView(children: <Widget>[
                                        Container(),
                                        Container(),
                                      ]),
                                    )
                                  ],),
                              ),