ScrollTabPage In Flutter :
Screenshot :

ScrollTabPage.dart
import 'package:flutter/material.dart'; class _Page { _Page({this.icon, this.text, this.content}); final IconData icon; final String text; final Widget content; } List<_Page> _allPages = <_Page>[ _Page(icon: Icons.grade, text: 'TRIUMPH', content: Container(color: Colors.black12, child: Center(child: Text('first page')))), _Page(icon: Icons.playlist_add, text: 'NOTE'), _Page(icon: Icons.check_circle, text: 'SUCCESS'), _Page(icon: Icons.question_answer, text: 'OVERSTATE'), _Page(icon: Icons.sentiment_very_satisfied, text: 'SATISFACTION'), _Page(icon: Icons.camera, text: 'APERTURE'), ]; class ScrollTabPage extends StatelessWidget { @override Widget build(BuildContext context) { return new ScrollTabWidget(); } } class ScrollTabWidget extends StatefulWidget { @override State<StatefulWidget> createState() { return new ScrollTabState(); } } class ScrollTabState extends State<ScrollTabWidget> with SingleTickerProviderStateMixin { TabController _controller; @override void initState() { super.initState(); _controller = new TabController(vsync: this, length: _allPages.length) ..addListener(() { setState(() {}); }); } @override void dispose() { _controller.dispose(); super.dispose(); } Decoration getIndicator2() { return UnderlineTabIndicator(borderSide: BorderSide(width: 3.0, color: Colors.white)); } Decoration getIndicator() { return new ShapeDecoration( shape: const RoundedRectangleBorder( borderRadius: const BorderRadius.all(const Radius.circular(4.0)), side: const BorderSide( color: Colors.yellow, width: 2.0, ), ) + const RoundedRectangleBorder( borderRadius: const BorderRadius.all(const Radius.circular(4.0)), side: const BorderSide( color: Colors.red, width: 4.0, ), ), ); } @override Widget build(BuildContext context) { return new Scaffold( appBar: new AppBar( title: new Text('Tab Bar'), bottom: new TabBar( controller: _controller, isScrollable: true, indicator: getIndicator2(), tabs: _allPages.map((_Page page) { return new Tab(text: page.text, icon: new Icon(page.icon)); }).toList(), ), ), body: Column( children: <Widget>[ SizedBox( height: 40.0, child: Center( child: TabPageSelector( indicatorSize: 8.0, controller: _controller, selectedColor: Colors.black, ), ), ), Expanded( child: new TabBarView( controller: _controller, children: _allPages.map((_Page page) { return new SafeArea( // top: true, // bottom: true, child: new Container( key: new ObjectKey(page.icon), padding: const EdgeInsets.all(12.0), child: page.content != null ? page.content : new Text(page.text), ), ); }).toList()), ), ], ), bottomNavigationBar: new Container( color: Theme.of(context).primaryColor, child: SafeArea( child: new TabBar( controller: _controller, isScrollable: true, indicator: getIndicator2(), tabs: _allPages.map((_Page page) { return new Tab(text: page.text, icon: new Icon(page.icon)); }).toList(), ), ), ), // bottomNavigationBar: Theme( // data: Theme.of(context).copyWith( // canvasColor: Colors.green, // primaryColor: Colors.red, // textTheme: // Theme.of(context).textTheme.copyWith(caption: TextStyle(color: Colors.orange))), // child: BottomNavigationBar( // items: [ // BottomNavigationBarItem(icon: Icon(Icons.local_airport), title: Text('airport')), // BottomNavigationBarItem(icon: Icon(Icons.local_airport), title: Text('airport2')) // ], // onTap: (index) { // setState(() { // _controller.index = index; // }); // }, // currentIndex: _controller.index, // ), // ), ); } }
The flutter tutorial is a website that bring you the latest and amazing resources of code. All the languages codes are included in this website. The languages like flutter, android, java,kotlin etc.with the help of this languages any user can develop the beautiful application
For more information about Flutter. visit www.fluttertutorial.in