How can I customize the TabBar indicator width and height? - dart

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.

Answer 1

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

Answer 2

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: ...
),
);
}
}

Answer 3

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

Answer 4

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

Answer 5

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

Answer 6

Check out Tab Indicator Styler package for more advanced styling.

Answer 7

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: ...
);

Answer 8

Try to do this in the TabBar
indicatorWeight: 0,
indicator: UnderlineTabIndicator(
borderSide: BorderSide(
width: 0.1,
color: AppColor.themeColor,
),

Answer 9

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

Answer 10

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