Display Tabs in Flutter

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});

  State<MyApp> createState() => _MyAppState();

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

Leave a Comment

Cancel reply

Your email address will not be published.