DefaultTabController widget is used in Flutter android & iOS mobile applications to create beautiful material style TABS view. The DefaultTabController by default comes to Create Swipeable Top Tab Navigation View in flutter android iOS applications. In tab navigation multiple activities screen is connected to single view but works individually on their own. Each screen is connected to a Top level navigation button which automatically navigate to screens on onPress event. All we have to do is define how much number of screens we want in our application. So in this tutorial we would make beautiful material style Top Tab navigation view in flutter with multiple activities screens.
Contents in this project Flutter Create Swipeable Top Tab Navigation View using TabController Android iOS Example Tutorial:
1. Import material.dart package in your app’s main.dart file.
|
1 |
import 'package:flutter/material.dart'; |
2. Create void main runApp() method and call our main MyApp class here.
|
1 2 3 |
void main() { runApp(MyApp()); } |
3. Create our main Root Tab View class named as MyApp extends with State less widget.
|
1 2 3 4 |
class MyApp extends StatelessWidget { } |
4. Create the Material App widget in Widget build area in MyApp class and make the DefaultTabController widget in home section.
- DefaultTabController : Used to create swipeable top tab navigation view.
- length : Number of screen present in Tab controller.
- tabs : Top tabs Navigation Button title text.
- title : App bar title text.
- TabBarView : We have to pass here our Screens. In our case we are directly calling our all 3 Screens here using their names method.
|
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 |
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: DefaultTabController( length: 3, child: Scaffold( appBar: AppBar( bottom: TabBar( tabs: [ Tab(text: 'FIRST'), Tab(text: 'SECOND',), Tab(text: 'THIRD'), ], ), title: Text('TABS TITLE TEXT'), ), body: TabBarView( children: [ FirstScreen(), SecondScreen(), ThirdScreen() ], ), ), ), ); } } |
5. Create our First activity screen class named as FirstScreen extends StatelessWidget. This would be our first Tab screen.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
class FirstScreen extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, home: Scaffold( body: Center( child: Text('First Activity Screen', style: TextStyle(fontSize: 21),) ) ) ); } } |
6. Create another screen class named as SecondScreen extends StatelessWidget. This would be our Second Tab screen.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
class SecondScreen extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, home: Scaffold( body: Center( child: Text('Second Activity Screen', style: TextStyle(fontSize: 21),) ) ) ); } } |
7. Create another class named as ThirdScreen extends StatelessWidget. This would be our Third Tab view screen.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
class ThirdScreen extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, home: Scaffold( body: Center( child: Text('Third Activity Screen', style: TextStyle(fontSize: 21),) ) ) ); } } |
8. Complete source code for main.dart file:
|
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 79 80 81 82 83 |
import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: DefaultTabController( length: 3, child: Scaffold( appBar: AppBar( bottom: TabBar( tabs: [ Tab(text: 'FIRST'), Tab(text: 'SECOND',), Tab(text: 'THIRD'), ], ), title: Text('TABS TITLE TEXT'), ), body: TabBarView( children: [ FirstScreen(), SecondScreen(), ThirdScreen() ], ), ), ), ); } } class FirstScreen extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, home: Scaffold( body: Center( child: Text('First Activity Screen', style: TextStyle(fontSize: 21),) ) ) ); } } class SecondScreen extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, home: Scaffold( body: Center( child: Text('Second Activity Screen', style: TextStyle(fontSize: 21),) ) ) ); } } class ThirdScreen extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, home: Scaffold( body: Center( child: Text('Third Activity Screen', style: TextStyle(fontSize: 21),) ) ) ); } } |
Screenshots in Android device:
Screenshots in iOS device:
