Flutter: Creating Multi Widget Applications with TabBar
Flutter is a mobile App SDK by Google which helps in creating modern mobile apps for iOS and Android using a single(almost) code base. It’s a new entrant in the cross platform mobile application development and unlike other frameworks like React Native, it doesn’t use JavaScript but DART as a Programming Language.
This post is second in the mobile application development using Flutter series and it’s highly recommended to read my first post “Flutter: From Zero To Comfortable” to make some sense out of this post
Recap : Everything displayed on the screen is a widget.
TabBar : Creating Multi Widget Applications
In general, a multi widget application consists of widgets which are not visible at all times, instead they are constructed and displayed onto the screen based on some user actions or events.
TabBar display widgets based on user actions
TabBar is a part of Material Design header and can be created within the scaffold AppBar.
TabBar : Start With Basic Skeleton
To understand the usage, lets create the basic material design skeleton with AppBar which we’ve learned to use in “Flutter: From Zero To Comfortable”
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext ctxt) {
return new MaterialApp(
title: "MySampleApplication",
home: new Scaffold(
appBar: new AppBar(
title: new Text("Hello Flutter App"),
),
body: new Center(
child: new Text("Hello Flutter"),
),
),
);
}
}The overall widget hierarchy shall look like
TabBar: Adding Tabs
We can add Tabs into the bottom part of the AppBar and the code for AppBar shall look like
child: new Scaffold(
appBar: new AppBar(
title: new Text("Hello Flutter App"),
// Creating Tabs
bottom: new TabBar(
tabs: <Widget>[
new Tab(text: "First Tab"), // 1st Tab
new Tab(text: "Second Tab"), // 2nd Tab
],
),
),
body: new Center(
child: new Text("Hello Flutter"),
),
),However, TabBar can’t just be displayed by putting the tabs in the bottom part of the AppBar, because TabBar needs a tab controller so that tabs can be linked to the corresponding widgets in the body.
This is done by an entity called TabBar Controller
We can create a custom TabBar controller and pass the same onto the AppBar, however, Flutter provides a default TabBar Controller, which can be used for most of the functionality associated with the tabs. The only input parameter needed by the Default TabBar controller is the number of tabs i.e. length.
For the Default TabBar controller to work, the scaffold has to be the child of the Tab Controller. So the code above must be changed as
home: new DefaultTabController(
length: 2,
child: new Scaffold(
appBar: new AppBar(
title: new Text("Hello Flutter App"),
bottom: new TabBar(
tabs: <Widget>[
new Tab(text: "First Tab"),
new Tab(text: "Second Tab"),
],
),
),
body: new Center(
child: new Text("Hello Flutter"),
),
),
)The overall widget hierarchy shall now look like
This will create two tabs at the AppBar, however, it will be functionless in the beginning as clicking them will have no visible impacts on the body.
TabBar: Adding Functionality to the Tabs
Each tab can be associated with a widget if we create TabBarView in the body of Scaffold with multiple widgets.
The widget at the 1st position will automatically be assigned to the first tab, 2nd widget with second tab and so on.
The code for the body with TabBarView shall look like
body: new TabBarView(
children: <Widget>[
new Text("You've Selected First"),
new Text("You've Selected Second"),
]
)The overall hierarchy shall now look like
With this we can see different text widgets will be displayed based on the tab selected by the users.
TabBarView: Using Custom Widgets (Stateless / Stateful)
In TabBarView, we can use custom widgets like MyApp. As an example, we can create a stateless widget called SecondWidget which will be used inside the TabBarView which shall be displayed when the user selects the second tab
class SecondWidget extends StatelessWidget {
@override
Widget build(BuildContext ctxt) {
return new Text("Custom StateLessWidget");
}
}And if we change the TabBarView as
body: new TabBarView(
children: <Widget>[
new Text("You've Selected First"),
new SecondWidget()
]
)The SecondWidget shall be attached to the second tab and shall be displayed when selected by the user.
TabBar: Creates new Instance of Widget every time
Every time a tab is selected by the user, it creates a new instance of the widget and doesn’t load the existing instance irrespective of whether the widget is stateless or stateful.
We can visualise the same if we create a stateful widget with a counter which gets incremented every time a checkbox is the widget is clicked. However, if the user goes back to the first tab and comes back to second tab again, it’s starts the counter again with an initial value of zero.
The code for the SecondWidget as a stateful widget with checkbox and counter shall look like
class SecondWidget extends StatefulWidget {
@override
SecondWidgetApp createState() => new SecondWidgetApp();
}
class SecondWidgetApp extends State<SecondWidget> {
int counter = 0;
bool cboxValue = false;
@override
Widget build(BuildContext ctxt) {
return new Column(
children: <Widget>[
new Text("count = $counter"),
new Checkbox(
value: cboxValue,
onChanged: (bool newValue) {
setState((){
cboxValue = newValue;
counter++;
});
}
)
],
);
}
}As we can see from the code above that every time a tab is selected by the user, a new instance of the widget SecondWidget will be created.
TabBar: Using icons instead of texts in Tab
We can use Icons instead of text in the tabs of the TabBar. We can do the same by using icon: instead of text:
child: new Scaffold(
appBar: new AppBar(
title: new Text("Flutter Tab Application"),
bottom: new TabBar(
tabs: <Widget>[
new Tab(icon: new Icon(Icons.add_comment)),
new Tab(text: "Second Tab"),
],
),
),That’s all about creating and using TabBar in Flutter, we’ll explore more functionalities of Flutter in later posts.
Thanks for Reading…!!!
Daksh
