Halo teman – teman,
Kali ini kita akan membahas tentang Bubble TabBar di Flutter, Bubble Tabbar sendiri merupakan dependencies, kita perlu menambahkan pada pubspec.yaml

seperti pada gambar berikut :

Selanjutnya untuk dapat menggunakan bubble tab indicator ini, kita perlu menambahkan di dalam TabBar di indicator seperti berikut :

TabBar(
              indicator: BubbleTabIndicator(
                indicatorHeight: 33,
                indicatorColor: Color(0xff2B976B),
                tabBarIndicatorSize: TabBarIndicatorSize.tab,
                indicatorRadius: 5,
              ),
            ),

Untuk code lengkapnya seperti berikut :

TabBar(
              indicatorSize: TabBarIndicatorSize.tab,
              controller: tabcontrol,
              labelPadding: EdgeInsets.symmetric(horizontal: 5),
              isScrollable: true,
              unselectedLabelColor: Color(0xff2B976B),
              indicator: BubbleTabIndicator(
                indicatorHeight: 33,
                indicatorColor: Color(0xff2B976B),
                tabBarIndicatorSize: TabBarIndicatorSize.tab,
                indicatorRadius: 5,
              ),
              tabs: [
                Container(
                  padding: EdgeInsets.symmetric(horizontal: 10, vertical: 8),
                  decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(5),
                      border: Border.all(color: Color(0xff2B976B))),
                  child: Text(
                    'Disektiarmu',
                    style: TextStyle(fontSize: 10, fontFamily: 'OpenSans'),
                  ),
                ),
                Container(
                  padding: EdgeInsets.symmetric(horizontal: 10, vertical: 8),
                  decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(5),
                      border: Border.all(color: Color(0xff2B976B))),
                  child: Text(
                    'Disektiarmu',
                    style: TextStyle(fontSize: 10, fontFamily: 'OpenSans'),
                  ),
                ),
                Container(
                  padding: EdgeInsets.symmetric(horizontal: 10, vertical: 8),
                  decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(5),
                      border: Border.all(color: Color(0xff2B976B))),
                  child: Text(
                    'Disektiarmu',
                    style: TextStyle(fontSize: 10, fontFamily: 'OpenSans'),
                  ),
                ),
                Container(
                  padding: EdgeInsets.symmetric(horizontal: 10, vertical: 8),
                  decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(5),
                      border: Border.all(color: Color(0xff2B976B))),
                  child: Text(
                    'Disektiarmu',
                    style: TextStyle(fontSize: 10, fontFamily: 'OpenSans'),
                  ),
                ),
                Container(
                  padding: EdgeInsets.symmetric(horizontal: 10, vertical: 8),
                  decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(5),
                      border: Border.all(color: Color(0xff2B976B))),
                  child: Text(
                    'Disektiarmu',
                    style: TextStyle(fontSize: 10, fontFamily: 'OpenSans'),
                  ),
                ),
              ],
            ),

Selain itu, kita juga dapat membuatnya menjadi seperti lingkaran dengan memanfaatkan labelPadding dan indicatorPadding, seperti pada gambar berikut :

Berikut untuk code lengkapnya :

TabBar(
                              indicatorSize: TabBarIndicatorSize.label,
                              controller: value.tabController!,
                              indicatorColor: Colors.transparent,
                              labelColor: Colors.white,
                              indicatorPadding:
                                  EdgeInsets.symmetric(horizontal: 8),
                              labelPadding: EdgeInsets.only(top: 2),
                              unselectedLabelColor: Colors.black,
                              indicator: BubbleTabIndicator(
                                indicatorHeight: 39,
                                indicatorColor: Color(0XFF2B976B),
                                tabBarIndicatorSize: TabBarIndicatorSize.label,
                              ),
                              tabs: [
                                Column(
                                  children: [
                                    Container(
                                      width: 43,
                                      height: 43,
                                      decoration: BoxDecoration(
                                        borderRadius: BorderRadius.circular(50),
                                        border: Border.all(color: Color(0xff2B976B))
                                      ),
                                      child: Center(
                                        child: Text(
                                          '1',
                                          style: TextStyle(
                                            fontSize: 12,
                                            fontWeight: FontWeight.w600,
                                            fontFamily: 'OpenSans',
                                            // color: Colors.white,
                                          ),
                                        ),
                                      ),
                                    ),
                                  ],
                                ),
                              ],
                            ),