How can I change the Flutter tabbar indicator to be exactly like google play store

Question

I want to add a border radius to the bottom border indicator so it can be like google play store tabbar.

Is there any way to do this with flutter tabbar?

Here is my current style:

here is my current code:

import 'package:app/components/home/Search.dart';
import 'package:app/screens/home/homeScreen.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 4,
      child: Scaffold(
        body: NestedScrollView(
            floatHeaderSlivers: true,
            headerSliverBuilder: (context, innerBoxIsScrolled) => [
                  SliverAppBar(
                    snap: true,
                    floating: true,
                    toolbarHeight: 80,
                    backgroundColor: Colors.white,
                    title: Search(),
                    centerTitle: true,
                    bottom: PreferredSize(
                      preferredSize: Size(0.0, 48.0),
                      child: Column(
                        children: [
                          TabBar(
                            isScrollable: true,
                            indicatorWeight: 3,
                            indicatorColor: green,
                            labelColor: green,
                            unselectedLabelColor: grey,
                            indicatorSize: TabBarIndicatorSize.label,
                            labelStyle: TextStyle(
                                fontWeight: FontWeight.bold, fontSize: 16.0),
                            tabs: [
                              Tab(text: "screen1"),
                              Tab(text: "screen2"),
                              Tab(text: "screen3"),
                              Tab(text: "s"),
                            ],
                          ),
                          Container(
                            width: Get.width,
                            height: 0.5,
                            color: lightGrey.withOpacity(0.7),
                          )
                        ],
                      ),
                    ),
                  )
                ],
            body: TabBarView(
              children: [
                HomeScreen(),
                HomeScreen(),
                HomeScreen(),
                HomeScreen(),
              ],
            )),
      ),
    );
  }
}

I want to add a border radius to the bottom border indicator so it can be like google play store tabbar.

Answer 1

this should work fine for you, tab_indicator_styler:

// Directly use inside yoru [TabBar]
TabBar(
  indicatorColor: Colors.green,
  tabs: [
    Tab(
      text: "Home",
    ),
    Tab(
      text: "Work",
    ),
    Tab(
      text: "Play",
    ),
  ],
  labelColor: Colors.black,
  // add it here
  indicator: DotIndicator(
    color: Colors.black,
    distanceFromCenter: 16,
    radius: 3,
    paintingStyle: PaintingStyle.fill,
  ),
),