Flutter TabBar A complete tutorial with examples

Flutter TabBar example with TabBarView

Flutter Tutorial for beginner

Hi In this flutter tutorial we make flutter TabBar with TabBarView and some adding UI. When we use TabBar, we should use a TabController to handle the various aspects of a tab. In this flutter example, we use DefaultTabController, which makes it easy. You can also use a custom TabController, but that requires additional inputs. Let us stick to DefaultTabController for this example.

Futter TabBar with DefaultTabController

Let start to make it Create a basic Flutter Application in Android Studio or your favourite IDE and replace the main. dart file with the following code to make TabBar in your App.

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 3,
      child: Scaffold(
        appBar: AppBar(
          bottom: TabBar(
            indicator: BoxDecoration(
                borderRadius: BorderRadius.circular(50), // Creates border
                color: Colors.blue.shade700), //Change background color from here
            tabs: [
              Tab(icon: Icon(Icons.flight)),
              Tab(icon: Icon(Icons.directions_transit)),
              Tab(icon: Icon(Icons.directions_car)),
            ],
          ),
          title: Text('Tabs Demo - Codeplayon.com'),
        ),
        body: TabBarView(
          children: [
            Icon(Icons.flight, size: 350),
            Icon(Icons.directions_transit, size: 350),
            Icon(Icons.directions_car, size: 350),
          ],
        ),
      ),
    );
  }
}

Run your flutter project and see the output in you want more advance on your skills in flutter learn more here;