I am developing a Flutter app. In this app I have used TabBarController in app bar. I am not using icons and title for AppBar so height is showing me more than expectation. I need help to do this with desired size. I am using following code:
class Dashboard extends StatefulWidget{
@override
State<StatefulWidget> createState() => new _DashboardState();
}
class _DashboardState extends State<Dashboard> with SingleTickerProviderStateMixin{
final List<Tab> myTabs = <Tab>[
new Tab(text: 'page1.',),
new Tab(text: 'page2.'),
];
TabController _tabController;
@override
void initState() {
super.initState();
_tabController = new TabController(length: 3, vsync: this
);
}
@override
void dispose() {
_tabController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: new AppBar(
bottom: new TabBar(
indicatorSize:TabBarIndicatorSize.tab,
controller: _tabController,
tabs: myTabs,
labelStyle: styleTabText,
),
),
body: new TabBarView(
controller: _tabController,
children: myTabs.map((Tab tab) {
return new Center(
child: new Text(
tab.text
)
);
}).toList(),
),
);
}
}
Also for reference I am adding screenshot of app.
You can use PreferredSize to adjust the TabBar's height:
@override
Widget build(BuildContext context) {
TabBar _tabBar = new TabBar(
indicatorSize:TabBarIndicatorSize.tab,
controller: _tabController,
tabs: myTabs,
labelStyle: styleTabText,
);
return Scaffold(
appBar: new AppBar(
bottom: PreferredSize(
preferredSize: Size.fromHeight(_tabBar.preferredSize.height - 50),
child: _tabBar,
),
),
// (...)
);
}
Use toolbarHeight
:
AppBar(
toolbarHeight: 44,
// ...
)
The easiest way is to use toolbarHeight
property in your AppBar
Example :
AppBar(
title: Text('Flutter is great'),
toolbarHeight: 100,
),
Output:
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With