CODEWITHSUNDEEP
flutterdartbordertabbarindicator
Hamza Mihfad
Hamza Mihfad

Reputation: 105

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

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?

enter image description here

Here is my current style:

enter image description here

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.

Upvotes: 2

Views: 3293

Answers (1)

Jim
Jim

Reputation: 7601

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

Upvotes: 2

Related Questions