Horizontally scrollable tabs focus on center with snap in flutter. Same can be achieved using – unselectedLabelColor: & indicatorColor: of TabBar widget.
Here is an example:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 | @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'), ), ), ], )), ); } |
If you like this question & answer and want to contribute, then write your question & answer and email to freewebmentor[@]gmail.com. Your question and answer will appear on FreeWebMentor.com and help other developers.
