How can I customize the TabBar indicator width and height?

Question

I'm using a TabBar widget and I'd like to customize the height and width of the indicator. I can't see any other property besides color I can modify.

score 48 · Answer 1 · answered Sep 20 '18 at 10:15

You can use indicatorSize: TabBarIndicatorSize.label on the TabBar to make the indicator the same size as the label.

Or you could set the indicator directly, this is a Decoration which you can customize:

AppBar(
    bottom: TabBar(
        indicator: UnderlineTabIndicator(
          borderSide: BorderSide(width: 5.0),
          insets: EdgeInsets.symmetric(horizontal:16.0)
        ),
        tabs: [
          Tab(text: 'tab 1'),
          Tab(text: 'tab 2'),
          Tab(text: 'tab 3'),
        ],
     ),
);

For more customisation options check this post

What if I need to use fixed width of indicator for all the `TabBar`? — Niraj, Jan 04 '21 at 08:13

Collin Jackson · Accepted Answer · 2017-06-10T21:58:43.007

Give your TabBar a property of isScrollable: true if you don't want the tabs to expand to fill the screen horizontally the way they do by default.

You can use a Container wrapped in a PreferredSize to size the TabBar. (The PreferredSize is only necessary if you want it to live in the bottom slot of an AppBar.) This has the effect of making the indicators appear narrower because the TabBar doesn't fill the screen. However, the indicator has a hard coded height. If you don't like it, you'll have to import your own copy of tabs.dart and customize the constants in that file.

Note that you can also use a Container to set the height of the individual Tabs, although that doesn't seem like what you're trying to do.

import 'package:flutter/material.dart';


void main() {
  runApp(new MaterialApp(
    home: new MyApp(),
  ));
}



class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new DefaultTabController(
      length: 2,
      child: new Scaffold(
        appBar: new AppBar(
          title: new Text('Tabs Demo'),
          bottom: new PreferredSize(
            preferredSize: new Size(200.0, 200.0),
            child: new Container(
              width: 200.0,
              child: new TabBar(
                tabs: [
                  new Container(
                    height: 200.0,
                    child: new Tab(text: 'hello'),
                  ),
                  new Container(
                    height: 200.0,
                    child: new Tab(text: 'world'),
                  ),
                ],
              ),
            ),
          ),
        ),
        // body: ...
      ),
    );
  }

}

This answer definitely helped me. Cant see why its not marked as the answer. Thank you — Rajeshwar, Jun 10 '18 at 08:31
How about setting the height of the `AppBar`? Do we have something similar to that solution? — Buğra Ekuklu, Jun 28 '18 at 19:15

Erick Dávila · Answer 3 · 2020-01-02T04:19:10.970

In the same way as this answer https://stackoverflow.com/a/44273493/5938089, The best is to use containers, but I will only use one.

For a change, I will use a bottom bar

bottomNavigationBar: new Material(
    color: Colors.teal,
    child: new Container(
      height: 60.0,
      child: new TabBar(
        controller: controller,
        tabs: <Widget>[
            new Tab(icon: new Icon(Icons.access_alarm)),
            new Tab(icon: new Icon(Icons.account_balance)),
        ]
      ),
    )
  ),

Screen Shot

score 4 · Answer 4 · answered Nov 19 '19 at 11:23

4

You can adjust the spacing between the tabs -> labelPadding: EdgeInsets.symmetric (horizontal: 5),

answered Nov 19 '19 at 11:23

Hasan_H

77
4

score 2 · Answer 5 · edited Jul 13 '19 at 09:50

2

You can use property TabBar(indicatorWeight:detail Height).

edited Jul 13 '19 at 09:50

double-beep

5,031
17
33
41

answered Jul 13 '19 at 06:44

Cavalier123

191
1
5

4

What do you mean by `detail Height`? – Corné Apr 13 '21 at 04:32

score 0 · Answer 6 · answered May 24 '21 at 09:30

0

Check out Tab Indicator Styler package for more advanced styling.

answered May 24 '21 at 09:30

K.Amanov

1,278
14
23

score 0 · Answer 7 · answered Oct 14 '21 at 09:59

appBar: new AppBar(
        title: Text("TabBar demo"),
        bottom: PreferredSize(
          preferredSize: Size.fromHeight(kToolbarHeight),
          child: Align(
            alignment: Alignment.centerLeft,
            child: new TabBar(
              controller: _tabController,
              indicator: UnderlineTabIndicator(
                borderSide: BorderSide(width: 3.0, color: Colors.red),
                insets: EdgeInsets.symmetric(horizontal: 20.0, vertical: 10),
              ),
              indicatorSize: TabBarIndicatorSize.label,
              isScrollable: true,
              onTap: (index) {
                print(index);
                _currentIndex = index;
                setState(() {});
              },
              tabs: [
                new Container(
                  height: 50.0,
                  width: 80,
                  // color: Colors.red,
                  child: new Tab(text: '1'),
                ),
                new Container(
                  height: 50.0,
                  width: 80,
                  // color: Colors.red,
                  child: new Tab(text: '222'),
                ),
                new Container(
                  height: 50.0,
                  width: 80,
                  // color: Colors.red,
                  child: new Tab(text: '333333'),
                ),
              ],
            ),
          ),
        ),
      ),
      // body: ...
    );

give tabs item fixed width,and set indicatorSize: TabBarIndicatorSize.label, — ilovesshan, Oct 14 '21 at 10:03
Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). — Muhammedogz, Oct 14 '21 at 11:18

score 0 · Answer 8 · answered Nov 15 '21 at 09:48

0

Try to do this in the TabBar

                  indicatorWeight: 0,
                  indicator: UnderlineTabIndicator(
                    borderSide: BorderSide(
                      width: 0.1,
                      color: AppColor.themeColor,
                    ),

answered Nov 15 '21 at 09:48

Dionke

11
1

1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Nov 15 '21 at 10:38

score 0 · Answer 9 · edited Feb 01 '22 at 09:12

You can design the underline indicator with border-radius, and the length of the indicator according to the text container length.

child: TabBar(
    indicatoenter code herer: BoxDecoration(
        borderRadius: BorderRadius.circular(10),
        color: widgetBlueColor,
    ),
    indicatorPadding: const EdgeInsets.only(top: 33, bottom: 2),
    labelColor: widgetBlueColor,
    unselectedLabelColor: Colors.black87,
    labelPadding: const EdgeInsets.only(bottom: 16),
    indicatorSize: TabBarIndicatorSize.label,
    labelStyle: const TextStyle(fontWeight: FontWeight.w500),
    tabs: const [
        Tab(
            child: SizedBox(
                width: 60,
                child: Text(
                    "DETAILS",
                    textAlign: TextAlign.center,
                ),
            ),
        ),
        Tab(
            child: SizedBox(
                width: 85,
                child: Text(
                    "DOCUMENTS",
                    textAlign: TextAlign.center,
                ),
            )
        )
    ]
)

score 0 · Answer 10 · answered Sep 15 '22 at 10:19

if you decrease default tab bar size use SizeBox().

                             SizedBox(
                                  height: 40,
                                  child: TabBar(
                                      isScrollable: true,
                                      indicatorSize: TabBarIndicatorSize.tab,
                                      labelColor: Colors.black,
                                      unselectedLabelColor: Colors.grey,
                                      labelStyle: TextStyle(
                                          fontSize: 15,
                                          fontWeight: FontWeight.w500),
                                      unselectedLabelStyle: TextStyle(
                                          fontSize: 14,
                                          fontWeight: FontWeight.w400),

                                      padding:
                                          EdgeInsets.symmetric(horizontal: 12),
                                      indicator: BoxDecoration(
                                          borderRadius: BorderRadius.circular(16),
                                          color: AppTheme().orange),
                                      tabs: getTab(),
                                      controller: _tabController),
                                ),

score 0 · Answer 11 · answered Mar 24 '23 at 12:33

For creating WhatsApp like tabbar you can isScrollable: true for TabBar then get the width of the screen and calculate the width for 3 tabs other than camera(now community), then wrap your 3 Tab widget inside SizedBox with calculated width. Here's the code

//get screen size
static Size screen =
      MediaQueryData.fromWindow(WidgetsBinding.instance.window).size;

// Calculate common width for 3 tabs
final double screenWidth = Data.screen.width;
final tabWidth = screenWidth / 4.8; // works for 6.5inch display

List<Widget> myTabs = [
      const HomePageTab(
        icon: Icons.groups_rounded,
      ),
      SizedBox(
        width: tabWidth,
        child: const HomePageTab(
          title: 'Chats',
        ),
      ),
      SizedBox(
        width: tabWidth,
        child: const HomePageTab(
          title: 'Status',
        ),
      ),
      SizedBox(
        width: tabWidth,
        child: const HomePageTab(
          title: 'Calls',
        ),
      ),
    ];

How can I customize the TabBar indicator width and height?

11 Answers11

Linked