Tabs on Software are import on mobile as well as desktop applications. Herelet’s learn how to create tabs on Flutter Applications.
There are many ways to create tabs, here we use DefaultTabController, which is more simple and dynamic.
Inside the app build widget, you have to add TabBar on AppBar section and add TabBarView as tab contents inside the App body section.
Core Code:
Widget build(BuildContext context) {
return new DefaultTabController(
length: 2,
child: Scaffold(
appBar: new AppBar(
title: new Text("Flutter Tabs"),
elevation: 0,
bottom: TabBar(
tabs: <Widget>[
Tab(text: "Tab 1"),
Tab(text: "Tab 2"),
],
)
),
body: TabBarView(
children: <Widget>[
Center(child: Text("Tab1 Content")),
Center(child: Text("Tab2 Content"))
]
)
),
);
}
Where
- length is the number tabs that you want to insert on your flutter app.
- TabBar contains the text on each tab.
- TabBarView is the contents on each tab.
Note: You have to ensure that the number of tabs, number of tab bar and thenumber of tab contents should be same. If you make difference, then you will get error.
Sample Output:
More Structured Code:
You can structure the code by separating ‘build child’, ‘tab bar’ and ‘tab contents’ as different widgets like below:
(Tab bar names are similar to WhatsApp messenger and full app codes are included)
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return new DefaultTabController(
length: 3,
child: buildScaffold()
);
}
Widget buildScaffold(){
return Scaffold(
appBar: new AppBar(
title: new Text("Students Details"),
elevation: 0,
bottom: buildTabBar(),
),
body: buildTabBody()
);
}
Widget buildTabBar() {
return TabBar(
tabs: <Widget>[
Tab(text: "CHATS"),
Tab(text: "STATUS"),
Tab(text: "CALLS"),
],
);
}
Widget buildTabBody() {
return TabBarView(
children: <Widget>[
Center(child: Text("Messages")),
Center(child: Text("Friends' status")),
Center(child: Text("Call List")),
]
);
}
}
Sample Output:
How to Create Scrollable Tabs
It is simple to add scrollable on flutter. Just create SingleChildScrollView widget as a TabBarView and put all the contents as it’s child.
Example:
TabBarView(
children: <Widget>[
SingleChildScrollView(
child: Column(
children: <Widget>[
Container(
height: 125,
child: Text("hello"),
),
Container(
height: 125,
child: Text("hello"),
),
Container(
height: 125,
child: Text("hello"),
),
Container(
height: 125,
child: Text("hello"),
),
Container(
height: 125,
child: Text("hello"),
),
],
),
),
Center(child: Text("Tab2 Content"))
]
)
Tab Without AppBar
It is possible to create Tab without a AppBar text or appbar text’s space. For this just replace AppBar title content with TabBar.
return Scaffold(
appBar: new AppBar(
elevation: 0,
title: buildTabBar(),
),
body: buildTabBody()
);
Be First to Comment