Skip to content
Readerstacks logo Readerstacks
  • Home
  • Softwares
  • Angular
  • Php
  • Laravel
  • Flutter
Readerstacks logo
Readerstacks
Create a top tab in flutter

How to create top tab bar in flutter ?

Aman Jain, January 9, 2022January 15, 2022

In this tutorial i will show you to create top tab in flutter. Top tab bar is useful when we wanted to switch on different content easily by sliding the tabs like whatsapp in android.

I will show you in this article to change the color of tab , icon, tabbar without appbar, and customize the icon of the tab. We will use sample content in each tab.

There is two ways to create top tab bat in flutter first is by DefaultTabController to create simple tabs without much customizations and other one is using TabController.

In this tutorial we will use TabBarView and TabBar with TabController and will customize the tabs.

Let’s begin the tutorial of create top tab bar in flutter by step by step

Step 1 : Create flutter project

Very first step is to create the fluter application using command line tool or in Android studio.

flutter create example_app

This will create a new project with name example_app then go in to the folder.

Step 2 : Create a widgets for Top Tab

Now, Create a widget to create the multiple tabs and show the content in it. Here we will use BottomNavigationBar and Scaffold to use the material design.

File : lib/TopTabBarWidget.dart

import 'package:flutter/material.dart';

class TopTabBarWidget extends StatefulWidget {

  const TopTabBarWidget({Key? key}) : super(key: key);

  @override
  State<TopTabBarWidget> createState() => _TopTabBarWidget();

}
class _TopTabBarWidget extends State<TopTabBarWidget> with SingleTickerProviderStateMixin {
  late TabController _tabController;

  List<Tab> tabs = <Tab>[
    const Tab(text: 'Car',icon: Icon(Icons.car_rental)),
    const Tab(text: 'Book',icon: Icon(Icons.book)),
    const Tab(text: 'Computer',icon: Icon(Icons.laptop)),
  ];

  @override
  void initState() {
    super.initState();
    _tabController = TabController(vsync: this, length: tabs.length);
  }

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Readerstacks Top Tab'),
        ),

        body:Column(

          children: [ TabBar(
            // labelStyle: const TextStyle(fontWeight: FontWeight.bold),
            // automaticIndicatorColorAdjustment: true,
            indicatorColor: Colors.red,
            labelColor: Colors.red,
            controller: _tabController,
            tabs: tabs,
            ),
          Expanded(child:TabBarView(

              controller: _tabController,
              children: tabs.map((Tab tab) {
                return Center(
                  child: Text(
                    '${tab.text!} Tab',
                    style: Theme.of(context).textTheme.headline5,
                  ),
                );
              }).toList(),
            ))],
        )
      )
    );

  }
}

Here as you can see we have used TabBar to build the Top tab bar view and also user TabBarView to show the content in top tab with 3 menu items. We also used TabController to controller and linked the both TabBarView and TabBar widget using TabController.

we used scaffold body to show the main content using TabBarView and Expended to fit in screen height.

 Expanded(child:TabBarView(

              controller: _tabController,
              children: tabs.map((Tab tab) {
                return Center(
                  child: Text(
                    '${tab.text!} Tab',
                    style: Theme.of(context).textTheme.headline5,
                  ),
                );
              }).toList(),
            ))


and tab bar using TabBar

      TabBar(
            // labelStyle: const TextStyle(fontWeight: FontWeight.bold),
            // automaticIndicatorColorAdjustment: true,
            indicatorColor: Colors.red,
            labelColor: Colors.red,
            controller: _tabController,
            tabs: tabs,
            )

Step 3 : Add Page to main file

Add you new pages to main.dart and start tabbing.

import 'package:flutter/material.dart';
import 'package:example_app/TopTabBarWidget.dart';

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

 

Step 4: Run the project

Simply run the project using command line or in android studio to check the implementation.

flutter run lib/main.dart

Live Preview:

Related

Flutter Dart Fluttertabtop

Post navigation

Previous post
Next post

Related Posts

Dart Create rounded corner using border radius in flutter

Create rounded corner using border radius in flutter ?

September 15, 2022March 16, 2024

Rounded corner gives a decent look to any widget and rounded corner can be create using the border radius property of container. we can add border radius or shape to any container, image, button, text, input and etc. so in this article we will learn to create rounded corner using…

Read More
Dart How to add rounded border radius to image in flutter

How to add rounded border radius to image in flutter ?

September 19, 2022March 16, 2024

In this article we will learn to add rounded border radius to image in flutter. In flutter rounded corner border can be added using borderRadius but to add the rounded border to image is not same because by adding the border radius to container it won’t apply to child image….

Read More
Dart Create Drawer in flutter

How to create drawer in flutter with example ?

January 3, 2022January 15, 2022

Flutter itself provides various widgets to create the industry level standard layout. One of the feature of flutter is creating default drawer in flutter with Scaffold. Using the drawer we can show our application menus list and hide show in sidebar. In this s tutorial i will create a simple…

Read More

Aman Jain
Aman Jain

With years of hands-on experience in the realm of web and mobile development, they have honed their skills in various technologies, including Laravel, PHP CodeIgniter, mobile app development, web app development, Flutter, React, JavaScript, Angular, Devops and so much more. Their proficiency extends to building robust REST APIs, AWS Code scaling, and optimization, ensuring that your applications run seamlessly on the cloud.

Categories

  • Angular
  • CSS
  • Dart
  • Devops
  • Flutter
  • HTML
  • Javascript
  • jQuery
  • Laravel
  • Laravel 10
  • Laravel 11
  • Laravel 9
  • Mysql
  • Php
  • Softwares
  • Ubuntu
  • Uncategorized

Archives

  • May 2025
  • April 2025
  • October 2024
  • July 2024
  • February 2024
  • January 2024
  • December 2023
  • November 2023
  • October 2023
  • July 2023
  • March 2023
  • November 2022
  • October 2022
  • September 2022
  • August 2022
  • July 2022
  • June 2022
  • May 2022
  • April 2022
  • March 2022
  • February 2022
  • January 2022
  • December 2021
  • November 2021
  • October 2021
  • September 2021
  • August 2021
  • July 2021
  • June 2021

Recent Posts

  • Understanding High Vulnerabilities: A Deep Dive into Recent Security Concerns
  • Understanding High Vulnerabilities in Software: A Week of Insights
  • Blocking Spam Requests with LaraGuard IP: A Comprehensive Guide
  • Enhancing API Development with Laravel API Kit
  • Exploring the Future of Web Development: Insights from Milana Cap
©2023 Readerstacks | Design and Developed by Readerstacks
Go to mobile version