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.
color: rgb(212, 212, 212); background-color: rgb(30, 30, 30); font-family: Consolas, "Courier New", monospace; line-height: 19px; white-space: pre-wrap;](color: #608b4e;](// Copyright 2017 The Chromium Authors. All rights reserved.color: #608b4e;](// Use of this source code is governed by a BSD-style license that can becolor: #608b4e;](// found in the LICENSE file.
color: #569cd6;](import color: #ce9178;]('package:flutter/material.dart';
color: #569cd6;](class color: #4ec9b0;](AppBarBottomSample color: #569cd6;](extends color: #4ec9b0;](StatefulWidget { color: #569cd6;](@override color: #4ec9b0;](_AppBarBottomSampleState color: #dcdcaa;](createState() => color: #4ec9b0;](_AppBarBottomSampleState();}
color: #569cd6;](class color: #4ec9b0;](_AppBarBottomSampleState color: #569cd6;](extends color: #4ec9b0;](State color: #569cd6;](with color: #4ec9b0;](SingleTickerProviderStateMixin { color: #4ec9b0;](TabController _tabController;
color: #569cd6;](@override color: #569cd6;](void color: #dcdcaa;](initState() { color: #569cd6;](super.color: #dcdcaa;](initState();_tabController = color: #4ec9b0;](TabController(vsync: color: #569cd6;](this, length: choices.length);}
color: #569cd6;](@override color: #569cd6;](void color: #dcdcaa;](dispose() {_tabController.color: #dcdcaa;](dispose(); color: #569cd6;](super.color: #dcdcaa;](dispose();}
color: #569cd6;](@override color: #4ec9b0;](Widget color: #dcdcaa;](build(color: #4ec9b0;](BuildContext context) { color: #c586c0;](return color: #4ec9b0;](MaterialApp(home: color: #4ec9b0;](DefaultTabController(length: color: #b5cea8;](6,child: color: #4ec9b0;](Scaffold(appBar: color: #4ec9b0;](AppBar(title: color: #569cd6;](const color: #4ec9b0;](Text(color: #ce9178;]('AppBar Bottom Widget'),bottom: color: #4ec9b0;](TabBar(tabs: [ color: #4ec9b0;](Tab(icon: color: #4ec9b0;](Icon(color: #4ec9b0;](Icons.directions_car)), color: #4ec9b0;](Tab(icon: color: #4ec9b0;](Icon(color: #4ec9b0;](Icons.directions_bike)), color: #4ec9b0;](Tab(icon: color: #4ec9b0;](Icon(color: #4ec9b0;](Icons.directions_boat)), color: #4ec9b0;](Tab(icon: color: #4ec9b0;](Icon(color: #4ec9b0;](Icons.directions_bus)), color: #4ec9b0;](Tab(icon: color: #4ec9b0;](Icon(color: #4ec9b0;](Icons.directions_railway)), color: #4ec9b0;](Tab(icon: color: #4ec9b0;](Icon(color: #4ec9b0;](Icons.directions_walk)),],controller: _tabController,isScrollable: color: #569cd6;](true,),),body: color: #4ec9b0;](TabBarView(controller: _tabController,children: choices.color: #dcdcaa;](map((color: #4ec9b0;](Choice choice) { color: #c586c0;](return color: #4ec9b0;](Padding(padding: color: #569cd6;](const color: #4ec9b0;](EdgeInsets.color: #dcdcaa;](all(color: #b5cea8;](16.0),child: color: #4ec9b0;](ChoiceCard(choice: choice),);}).color: #dcdcaa;](toList(),),),),);}}
color: #569cd6;](class color: #4ec9b0;](Choice { color: #569cd6;](const color: #4ec9b0;](Choice({color: #569cd6;](this.title, color: #569cd6;](this.icon});
color: #569cd6;](final color: #4ec9b0;](String title; color: #569cd6;](final color: #4ec9b0;](IconData icon;}
color: #569cd6;](const color: #4ec9b0;](List choices = color: #569cd6;](const [ color: #569cd6;](const color: #4ec9b0;](Choice(title: color: #ce9178;]('CAR', icon: color: #4ec9b0;](Icons.directions_car), color: #569cd6;](const color: #4ec9b0;](Choice(title: color: #ce9178;]('BICYCLE', icon: color: #4ec9b0;](Icons.directions_bike), color: #569cd6;](const color: #4ec9b0;](Choice(title: color: #ce9178;]('BOAT', icon: color: #4ec9b0;](Icons.directions_boat), color: #569cd6;](const color: #4ec9b0;](Choice(title: color: #ce9178;]('BUS', icon: color: #4ec9b0;](Icons.directions_bus), color: #569cd6;](const color: #4ec9b0;](Choice(title: color: #ce9178;]('TRAIN', icon: color: #4ec9b0;](Icons.directions_railway), color: #569cd6;](const color: #4ec9b0;](Choice(title: color: #ce9178;]('WALK', icon: color: #4ec9b0;](Icons.directions_walk),];
color: #569cd6;](class color: #4ec9b0;](ChoiceCard color: #569cd6;](extends color: #4ec9b0;](StatelessWidget { color: #569cd6;](const color: #4ec9b0;](ChoiceCard({color: #4ec9b0;](Key key, color: #569cd6;](this.choice}) : color: #569cd6;](super(key: key);
color: #569cd6;](final color: #4ec9b0;](Choice choice;
color: #569cd6;](@override color: #4ec9b0;](Widget color: #dcdcaa;](build(color: #4ec9b0;](BuildContext context) { color: #569cd6;](final color: #4ec9b0;](TextStyle textStyle = color: #4ec9b0;](Theme.color: #dcdcaa;](of(context).textTheme.display1; color: #c586c0;](return color: #4ec9b0;](Card(color: color: #4ec9b0;](Colors.white,child: color: #4ec9b0;](Center(child: color: #4ec9b0;](Column(mainAxisSize: color: #4ec9b0;](MainAxisSize.min,crossAxisAlignment: color: #4ec9b0;](CrossAxisAlignment.center,children: [ color: #4ec9b0;](Icon(choice.icon, size: color: #b5cea8;](128.0, color: textStyle.color), color: #4ec9b0;](Text(choice.title, style: textStyle),],),),);}}
color: #569cd6;](void color: #dcdcaa;](main() { color: #dcdcaa;](runApp(color: #4ec9b0;](AppBarBottomSample());}
Below is the final output of this program,
![](../../Uploads/4b1926ef-9b53-4ebe-8429-3f9213596245.gifwidth="50%height="auto](
Source: https://flutter.io/cookbook/design/tabs/
Thanks.