Display Tabs in Flutter

A tabs is used to organize content across different swipeable views. When a tab is selected, then associated view content is displayed.

To use a tabs, first we need a tab controller (DefaultTabController). It allows to keep the selected tab and the associated content. After that we can create a tabs using the TabBar. Finally, we use TabBarView to create the content of each tab.

import 'package:flutter/material.dart';

void main() => runApp(const MaterialApp(home: MyApp()));

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Tab controller')),
      body: DefaultTabController(
        length: 3,
        child: Column(
          children: const <Widget>[
            TabBar(
              labelColor: Colors.blue,
              unselectedLabelColor: Colors.black,
              tabs: [
                Tab(text: 'Account'),
                Tab(text: 'Call'),
                Tab(text: 'Camera'),
              ],
            ),
            Expanded(
              child: TabBarView(
                children: <Widget>[
                  Center(child: Text('Account')),
                  Center(child: Text('Call')),
                  Center(child: Text('Camera')),
                ],
              ),
            )
          ],
        ),
      ),
    );
  }
}