Here I want to ask or can I make a tutorial like tabs
, focusing center but the left and right tabs are 30% transparent like this, thank you!
Same can be achieved using - unselectedLabelColor:
& indicatorColor:
of TabBar
widget.
Example Code:
@override
Widget build(BuildContext context) {
return DefaultTabController(
length: 6,
child: Scaffold(
appBar: AppBar(
centerTitle: true,
leading: Icon(Icons.person_outline),
title: Text('DASHBOARD',style: TextStyle(fontSize: 16.0),),
bottom: PreferredSize(
child: TabBar(
isScrollable: true,
unselectedLabelColor: Colors.white.withOpacity(0.3),
indicatorColor: Colors.white,
tabs: [
Tab(
child: Text('Tab 1'),
),
Tab(
child: Text('Investment'),
),
Tab(
child: Text('Your Earning'),
),
Tab(
child: Text('Current Balance'),
),
Tab(
child: Text('Tab 5'),
),
Tab(
child: Text('Tab 6'),
)
]),
preferredSize: Size.fromHeight(30.0)),
actions: <Widget>[
Padding(
padding: const EdgeInsets.only(right: 16.0),
child: Icon(Icons.add_alert),
),
],
),
body: TabBarView(
children: <Widget>[
Container(
child: Center(
child: Text('Tab 1'),
),
),
Container(
child: Center(
child: Text('Tab 2'),
),
),
Container(
child: Center(
child: Text('Tab 3'),
),
),
Container(
child: Center(
child: Text('Tab 4'),
),
),
Container(
child: Center(
child: Text('Tab 5'),
),
),
Container(
child: Center(
child: Text('Tab 6'),
),
),
],
)),
);
}
Output: