TabBar example

<p id="4ec9b0;](AppBarBottomSample());" _tabController.color:="" color:="">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() 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;](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() Below is the final output of this program,</p> <p>![](../../Uploads/4b1926ef-9b53-4ebe-8429-3f9213596245.gifwidth="50%height="auto]( Source: <a href="https://flutter.io/cookbook/design/tabs/">https://flutter.io/cookbook/design/tabs/</a> Thanks.</p>