Play Flutter Quiz. Click here .

TabBar example

This Article is posted by at 20-08-2018 12:26:20

In this example, you are going to create a TabBar using Fultter. 
Below is the main.dart code. You don't have to modify anything else during this example. Just add the below code and debug.
// Copyright 2017 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
import 'package:flutter/material.dart';
class AppBarBottomSample extends StatefulWidget {
_AppBarBottomSampleState createState() => _AppBarBottomSampleState();
class _AppBarBottomSampleState extends State<AppBarBottomSample>
with SingleTickerProviderStateMixin {
TabController _tabController;
void initState() {
_tabController = TabController(vsync: this, length: choices.length);
void dispose() {
Widget build(BuildContext context) {
return MaterialApp(
home: DefaultTabController(
length: 6,
child: Scaffold(
appBar: AppBar(
title: const Text('AppBar Bottom Widget'),
bottom: TabBar(
tabs: [
Tab(icon: Icon(Icons.directions_car)),
Tab(icon: Icon(Icons.directions_bike)),
Tab(icon: Icon(Icons.directions_boat)),
Tab(icon: Icon(Icons.directions_bus)),
Tab(icon: Icon(Icons.directions_railway)),
Tab(icon: Icon(Icons.directions_walk)),
controller: _tabController,
isScrollable: true,
body: TabBarView(
controller: _tabController,
children: choice) {
return Padding(
padding: const EdgeInsets.all(16.0),
child: ChoiceCard(choice: choice),
class Choice {
const Choice({this.title, this.icon});
final String title;
final IconData icon;
const List<Choice> choices = const <Choice>[
const Choice(title: 'CAR', icon: Icons.directions_car),
const Choice(title: 'BICYCLE', icon: Icons.directions_bike),
const Choice(title: 'BOAT', icon: Icons.directions_boat),
const Choice(title: 'BUS', icon: Icons.directions_bus),
const Choice(title: 'TRAIN', icon: Icons.directions_railway),
const Choice(title: 'WALK', icon: Icons.directions_walk),
class ChoiceCard extends StatelessWidget {
const ChoiceCard({Key key, this.choice}) : super(key: key);
final Choice choice;
Widget build(BuildContext context) {
final TextStyle textStyle = Theme.of(context).textTheme.display1;
return Card(
color: Colors.white,
child: Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Icon(choice.icon, size: 128.0, color: textStyle.color),
Text(choice.title, style: textStyle),
void main() {
Below is the final output of this program,

Tags: TabBar example; TabBar in Flutter;

Login to comment.

Recent Comments

Be the first to Comment. You can ask a Query or Share your toughts or Just say thanks.

© 2018 - Fluttercentral | Email to me -

Terms | Privacy