Hi Friends,
Welcome back to yet another Flutter app tutorial. In this post, let’s see how to bring in tabs into our application.
Let’s begin.
A screencast of this post.
Create a new app. Create two new files named firstpage.dart and secondpage.dart in the lib directory and add the below code.
firstpage.dart
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
import 'package:flutter/material.dart'; class FirstPage extends StatelessWidget { @override Widget build(BuildContext context) { return new Container( child: new Center( child: new Text('First Page', style: new TextStyle(fontSize: 25.0, color: Colors.teal), ), ), ); } } |
secondpage.dart
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
import 'package:flutter/material.dart'; class SecondPage extends StatelessWidget { @override Widget build(BuildContext context) { return new Container( child: new Center( child: new Text('Second Page', style: new TextStyle(fontSize: 25.0, color: Colors.teal), ), ), ); } } |
Okay, now we have 2 screens. We’ll bring a couple of tabs to show them on our device.
Open up main.dart and add the below code.
|
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 |
import 'package:flutter/material.dart'; import './firstpage.dart' as firstpage; import './secondpage.dart' as secondpage; void main() => runApp(new MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return new MaterialApp( theme: new ThemeData( primarySwatch: Colors.teal, ), home: new MyHomePage(), ); } } class MyHomePage extends StatefulWidget { @override _MyHomePageState createState() => new _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin { TabController controller; @override void initState() { super.initState(); controller = new TabController(vsync: this, length: 2); } @override void dispose() { controller.dispose(); super.dispose(); } @override Widget build(BuildContext context) { return new Scaffold( appBar: new AppBar( title: new Text('Tabs app'), backgroundColor: Colors.teal, bottom: new TabBar( controller: controller, tabs: <Widget>[ new Tab(icon: new Icon(Icons.access_alarm)), new Tab(icon: new Icon(Icons.account_balance)), ], ), ), body: new TabBarView( controller: controller, children: <Widget>[ new firstpage.FirstPage(), new secondpage.SecondPage(), ], ) ); } } |
Let’s break this down.
We have just created a tab controller to control the tabs. We also have created a tab bar with 2 tabs (Tabs with just icons).
In the body section, we have given the views for both the tabs, i.e., the pages that we created in the beginning.
Now run the app., You’ll see a screen as shown below.
Try navigating between the tabs, You could also swipe to switch tabs.
Now in some apps, the tabs bar might be on the bottom right ? Let’s see how to bring that here as well.
Open up your main.dart file and modify the code as shown below.
|
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 |
import 'package:flutter/material.dart'; import './firstpage.dart' as firstpage; import './secondpage.dart' as secondpage; void main() => runApp(new MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return new MaterialApp( theme: new ThemeData( primarySwatch: Colors.teal, ), home: new MyHomePage(), ); } } class MyHomePage extends StatefulWidget { @override _MyHomePageState createState() => new _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin { TabController controller; @override void initState() { super.initState(); controller = new TabController(vsync: this, length: 2); } @override void dispose() { controller.dispose(); super.dispose(); } @override Widget build(BuildContext context) { return new Scaffold( appBar: new AppBar( title: new Text('Tabs app'), backgroundColor: Colors.teal, ), bottomNavigationBar: new Material( color: Colors.teal, child: new TabBar( controller: controller, tabs: <Widget>[ new Tab(icon: new Icon(Icons.access_alarm)), new Tab(icon: new Icon(Icons.account_balance)), ], ) ), body: new TabBarView( controller: controller, children: <Widget>[ new firstpage.FirstPage(), new secondpage.SecondPage(), ], ) ); } } |
Now simply run the app and you would see the below screens.
Try navigating and you would see that it works fine as well.
Now this is how you bring in tabs into your flutter apps. There are a lot more stuff you could do with Tabs and the tab bar, but this is just a basic demo.
Hope this helped you guys. If you found this helpful, kindly share it with someone and help them too.
Join our flutter community – here.
Thanks for reading guys. Peace.. 
