简体   繁体   中英

Flutter Custom Tab bar

I'm new to flutter and want to build a custom tab bar according to the picture below. Tried different ways but none of them are exactly like in the picture.

Pic

change to your icon and color

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(),
                                      ]),
                                    )
                                  ],),
                              ),

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM