In Flutter, we can create Material Design using Scaffold which provides AppBar. The AppBar also provides a bottom area which can be used to create TabBar in the AppBar. As you have already known about AppBar in this part of the flutter application development series we are going to learn in detail about AppBar and TabBar along with its properties.

AppBar in Flutter

If you have developed a website you may have heard about navbar, AppBar is similar to the top navbar in websites. AppBar help to display one of the half dozen choices including icons and title. Besides the title in AppBar, there are many other properties to shows icons like menu icon, search icon, back arrow icon, etc.

appBar: AppBar(
  leading: Icon(Icons.menu), //Use to put icon before title
  title: Text("This is second app"), //title os the screen
  backgroundColor: Colors.red, //background color of AppBar
),

TabBar Widget in Flutter

A Widget that displays a horizontal row of tabs known as TabBar Widget in Flutter. TabBar is also a bottom part of AppBar along with TabBarView. TabBarView is the widget that displays page views that correspond to each tab. It is very useful to create multi-tab pages in a single flutter page.

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}
class _MyAppState extends State with SingleTickerProviderStateMixin {
  TabController _tcontrol;
  void initState(){
    _tcontrol= TabController(length: 3, vsync: this);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.red,
        title: Text("AppBar"),
        leading: Icon(Icons.menu),
        bottom: TabBar(
          controller: _tcontrol,
          tabs: [
            Tab(icon: Icon(Icons.home)),
            Tab(icon: Icon(Icons.supervisor_account)),
            Tab(icon: Icon(Icons.close)),
        ])
      ),
      body: TabBarView(
        controller: _tcontrol,
        children: [
          Column(
            children: [
              Text("This is First Tab"), //Code goes here inside first tab
            ],
          ),

          Row(
            children: [
              Text("This is Second Tab"), //Code goes here inside second tab
            ],
          ),

          Center(
            child: Text("This is Third Tab"), //Code goes here inside third tab
          ),
        ],
      )
    );
  }
}

Output of AppBar with TabBar Widget in Flutter

AppBar and TabBar Widget in FLutter

Complete Flutter Series List: Click here 

Categories: Blog Tags: flutter, review2tech flutter series, appbar widget, tabbar widget, design appbar widgets, appbar widgets properties, flutter android, flutter ios


1 Comments

  • Comment

    kyrie irving shoes

    2020-08-23 03:23:04

    I truly wanted to write a remark so as to express gratitude to you for the fabulous techniques you are giving here. My time consuming internet lookup has finally been compensated with awesome ideas to share with my great friends. I would declare that most of us site visitors actually are unquestionably lucky to live in a remarkable place with many brilliant professionals with good tips and hints. I feel rather happy to have used your site and look forward to many more thrilling moments reading here. Thanks a lot again for all the details.

    Reply

Leave a comment