I'm new to flutter and want to build a custom tab bar according to the picture below. Tried different ways but none of them are exactly like in the picture.
change to your icon and color
DefaultTabController(
length: 2, // length of tabs
initialIndex: 0,
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
TabBar(
indicatorColor: Colors.white,
labelColor: Colors.white,
unselectedLabelColor: Colors.grey,
labelStyle: TextStyle(
fontSize: 22.0,
fontWeight:
FontWeight.bold), //For Selected tab
unselectedLabelStyle: TextStyle(
fontSize: 17.0,
fontWeight: FontWeight.bold),
tabs: [
Tab(
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(Icons.compare_arrows),
const SizedBox(width: 8),
Text('GAMES'),
],
),
),
Tab(
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(Icons.chat),
const SizedBox(width: 8),
Text('CHAT'),
],
),
),
],
),
Container(
height: 450,
child: TabBarView(children: <Widget>[
Container(),
Container(),
]),
)
],),
),
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.