Tabbar and Tabbarview in flutter

The Tabbar widget is one type of widgets which displays horizontal rows of a tab widgets.
Tabs are material design widgets and you can add tabs property by using this widgets .flutter also allowed to create custom widgets for tab.
The current selection of tab is marked with bottom selection line. we can able to customize the current selected tabs very easy. Instead of tapping each tab, users can swipe left or right to change the content.

For syncing tab selections between TabBar and a TabBarView ,The TabController property is used.
In other words The Controller property of a TabController is responsible for syncing tab selections.

Create a new Flutter project and name it tabbarexample. For this project, you need to create only the pages folder for storing pages.

Create home.dart file page in pages folder and import material.dart file on the top.

import 'package:flutter/material.dart';

After that paste following code

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
       appBar: AppBar(
        title: Text("Tabbar and TabView"),
      ),
      body: SafeArea(
        
      )
    );
  }
}

The TabController variable called _tabController is used to syncing tab selection. Add to the TabBarView children property the Tab1(), Tab2(), and Tab3() pages.

  body: SafeArea(
        child: TabBarView(
          controller: _tabController,
          children: [
            Tab1(),
            Tab2(),
            Tab3(),
          ],
        ),
      ),

Create 3 pages under Page folder called Tab1 ,Tab2 and Tab3 and create StatelessWidget See below code

//Tab 1
import 'package:flutter/material.dart';
class Tab1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Icon(
          Icons.verified_user_sharp,
          size: 150.0,
          color: Colors.green,
        ),
      ),
    );
  }
}
//Tab 2
import 'package:flutter/material.dart';
class Tab2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Icon(
          Icons.data_usage_sharp,
          size: 150.0,
          color: Colors.yellow
        ),
      ),
    );
  }
}
//Tab 3
import 'package:flutter/material.dart';
class Tab3 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Icon(
          Icons.date_range_rounded,
          size: 150.0,
          color: Colors.redAccent
        ),
      ),
    );
  }
}

Import each page in the home.dart file.

import 'package:flutter/material.dart';
import 'Tab1.dart';
import 'Tab2.dart';
import 'Tab3.dart';

Declare a TabController variable by the name of _tabController.
Override the initState() method to initialize the _tabController with the vsync argument and a length value of 3.
The vsync is referenced by this, meaning this reference of the _HomePageState class. The length represents the number of Tabs to show. Then override the dispose() method for when the page closes to properly dispose of the _tabController

class _HomeState extends State<Home> with SingleTickerProviderStateMixin {
 TabController _tabController;
 @override
 void initState() {
 super.initState();
 _tabController = TabController(vsync: this, length: 3);
 }
 @override
 void dispose() {
 _tabController.dispose();
 super.dispose();
 }
 
}

Add a TabBar as a child of the bottomNavigationBar Scaffold property.

bottomNavigationBar: SafeArea(
child: TabBar(),
),

Pass the _tabController for the TabBar controller property. You can customize the label Color and
un selected Label Color by settings property.

bottomNavigationBar: SafeArea(
child: TabBar(
controller: _tabController,
labelColor: Colors.red,
unselectedLabelColor: Colors.black,
),
),

Add three Tab widgets to the tabs widget list. Customize each Tab icon and text.

bottomNavigationBar: SafeArea(
 child: TabBar(
 controller: _tabController,
 labelColor: Colors.black54,
 unselectedLabelColor: Colors.black38,
 tabs: [
 Tab(
 icon: Icon(Icons.verified_user_sharp),
 text: 'Tab1',
 ),
 Tab(
 icon: Icon(Icons.data_usage_sharp),
 text: 'Tab2',
 ),
 Tab(
 icon: Icon(Icons.date_range_rounded),
 text: 'Tab3',
 ),
 ],
 ),
),

Demo