Flutter Fix
No Result
View All Result
  • Login
  • Register
  • Media
    • Music
    • Video
    • Images
    • Gallery
  • Flutter Apps
    • Finance App
    • Weather App
    • Video App
    • Music App
    • Shopping App
    • World Clock
    • ECommerce
    • Mobile Web Browser
  • Menu
    • Buttons
    • App Bar
    • Floating Action Button
    • Toast
    • Tab Bar
    • Swipe
  • Components
    • Developers Point
    • Animations
    • Loading
    • Flutter Packages
    • WebView
  • Inputs
    • Forms
    • TextField
    • Toggle Button
    • Download
    • Widgets
  • Games
  • UI
    • Material Design
    • Card
    • Flutter Widgets
    • Neomorphism
    • Navigation
  • Navigation
  • Q&A
  • Dart
    • Flutter Methods
FORUM
ASK QUESTION
  • Media
    • Music
    • Video
    • Images
    • Gallery
  • Flutter Apps
    • Finance App
    • Weather App
    • Video App
    • Music App
    • Shopping App
    • World Clock
    • ECommerce
    • Mobile Web Browser
  • Menu
    • Buttons
    • App Bar
    • Floating Action Button
    • Toast
    • Tab Bar
    • Swipe
  • Components
    • Developers Point
    • Animations
    • Loading
    • Flutter Packages
    • WebView
  • Inputs
    • Forms
    • TextField
    • Toggle Button
    • Download
    • Widgets
  • Games
  • UI
    • Material Design
    • Card
    • Flutter Widgets
    • Neomorphism
    • Navigation
  • Navigation
  • Q&A
  • Dart
    • Flutter Methods
No Result
View All Result
Flutter Fix
No Result
View All Result
Home Flutter Widgets

How to Create a Tab Bar/Tab Controller/Bottom TabBar in Flutter

July 14, 2020
in Flutter Widgets
4 min read
Flutter Tab Bar

The Tab Bar widget in Flutter is a simple and powerful part of Mobile app development. As you would imagine, a tab system matches N tabs with N widgets. When the user presses tab 1, they see widget 1, when they press tab 2, they see another widget which was assigned to tab 2 and so forth. The matching is done with a TabBar widget, a TabBarView widget, and a TabBarController.

RELATED FLUTTER RESOURCES

Understanding The Flutter ListView Widget

How To Build A Code Editor App In Flutter with code_editor Plugin

Flutter Form & FormField Widget – Implementation & Example

A flutter Tab bar at the top and at the bottom

Okay now, Lat’s talk about the Tab Controller which is also a very important part when creating a Tab Bar.

ADVERTISEMENT

Tab Controller

The TabController is the least obvious part. Just know that you have to have one or you get the error in the image below;

The error you most definitely would get if you don’t add the TabController

The easiest way to create one is to wrap everything in a DefaultTabController() with a length property. Problem solved. This part is pretty simple – so simple you may wonder why Flutter doesn’t create one implicitly for you. If you were thinking that, you wouldn’t be wrong:

Widget build(BuildContext context) {
  return DefaultTabController(
    length: 3,
    child: Scaffold(
    ...
  );
}

Wrapping it in the Flutter default Tab controller solves your error.

TabBar View

Next, you’ll want to add a TabBarView widget. This holds the widgets that will eventually be shown when the user presses a tab, defining where they will be shown. Usually, this is the entire rest of the screen, but you have the opportunity to put widgets above the TabBarView or below it or really anywhere around it:

child: Scaffold(
  body: TabBarView(
    children: <Widget>[
      WidgetA(),
      WidgetB(),
      WidgetC(),
    ],
),

You may choose to code up your Widget screen in another dart file or inside your TabBarView, all fall to your coding style. Now, we should go to the important part – “Building our Tabs“.

TabBar and Tabs

Lastly, we define the tabs themselves. Tabs can either hold text or an icon or both. Here’s a TabBar with three tabs, each having both an icon and text:

child: Scaffold(
  appBar: AppBar(
   title: const Text('Tab Navigating'),
   bottom: TabBar(
     tabs: const <Widget>[
        Tab(icon: Icon(Icons.looks_one), child:Text('Show A')),
        Tab(icon: Icon(Icons.looks_two), child:Text('Show B')),
        Tab(icon: Icon(Icons.looks_3), child: Text('Show C')),
     ]),
...

NOTE THAT: There’s a one-to-one correspondence between each tab and each TabBarView child; they are matched positionally. You must have the same number of tabs as you do widgets inside the TabBarView.

Let say you have 3 widgets inside your Tab Bar View, you must make sure that the children of your TabBar is also 3, else you’ll get an error.

Bottom TabBar

Sometimes, your UI plan may not permit a top appBar, and also note that previously we chose to put the TabBar in the appBar, which of course appears at the top of the screen. But
sometimes your design calls for the tabs to appear at the bottom of the screen. That’s easy because the Scaffold has a property called bottomNavigationBar and it is built to hold a TabBar:

child: Scaffold(
 ...
 bottomNavigationBar: Material(
   color: Theme.of(context).colorScheme.primary,
   child: TabBar(tabs: const <Widget>[
      Tab(icon: Icon(Icons.looks_one), child: Text('Show A')),
      Tab(icon: Icon(Icons.looks_two), child: Text('Show B')),
      Tab(icon: Icon(Icons.looks_3), child: Text('Show C')),
      ]),
),
),

ALSO NOTE: The TabBar has the normal appearance of light text on a dark background. Thus, when you place the TabBar on top of a light background, it may be difficult to see the text (light on light). To fix this, wrap your TabBar in a Material widget with a darker background color as we did earlier.

The TabBar widget is an easy one to code up, popular website like Facebook, Telegram, WhatsApp still uses TabBar.

RelatedFlutter Resource

fLUTTER ListView builder seperated
Flutter Widgets

Understanding The Flutter ListView Widget

August 3, 2020
Code Editor Package Flutter
Dart

How To Build A Code Editor App In Flutter with code_editor Plugin

August 3, 2020
Flutter Form & FormField Widget - Implementation & Example
Flutter Packages

Flutter Form & FormField Widget – Implementation & Example

July 30, 2020
flutter buttons, materialbutton, flatbutton, cupertinobutton, dismissible, iconbutton
Flutter Widgets

All Flutter Buttons – [RaisedButton, FlatButton, IconButton, FloatingActionButton, Dismissible]

July 27, 2020
custom fonts text style flutter
Flutter Widgets

Flutter Custom Fonts and How to Style Text

July 24, 2020
Understanding the Flutter COntainer
Flutter Widgets

Container Widget & Box Model in Flutter – All You Need To Know

July 22, 2020
Next Post
gridview widget flutter

How to use the Flutter GridView.count, GridView.extent

flutter future async await

Flutter Future, Await, and Async - All You Need To Know

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Recommended Stories

flutter progress indicator

Integrate Percent Indicator in Flutter (Circular & Linear)

July 2, 2020
5+ Important Reasons Why Every Developer Should Start a Blog

5+ Important Reasons Why Every Developer Should Start a Blog

June 23, 2020
flutter material design icon

Get Material Design Icons for Flutter App Developments

June 25, 2020

Popular Stories

  • FLUTTER-FUTUER-APP-DEVELOPMENT

    Why Google Flutter Is the Future of Mobile App Development

    0 shares
    Share 0 Tweet 0
  • Container Widget & Box Model in Flutter – All You Need To Know

    0 shares
    Share 0 Tweet 0
  • Flutter Future, Await, and Async – All You Need To Know

    0 shares
    Share 0 Tweet 0
  • Create a Beautiful & Customized Tab/Toggle in Flutter

    0 shares
    Share 0 Tweet 0
  • Flutter Form & FormField Widget – Implementation & Example

    0 shares
    Share 0 Tweet 0
  • HOME
  • ABOUT US
  • CONTACT US
  • DMCA
  • TERMS & CONDITIONS
  • PRIVACY POLICY
Call us: +234 705 505 5426

© 2020 FlutterFix - Best Flutter Tool, Library, Source Code, Forum and Tutorials FlutterFix.

No Result
View All Result
  • Media
    • Music
    • Video
    • Images
    • Gallery
  • Flutter Apps
    • Finance App
    • Weather App
    • Video App
    • Music App
    • Shopping App
    • World Clock
    • ECommerce
    • Mobile Web Browser
  • Menu
    • Buttons
    • App Bar
    • Floating Action Button
    • Toast
    • Tab Bar
    • Swipe
  • Components
    • Developers Point
    • Animations
    • Loading
    • Flutter Packages
    • WebView
  • Inputs
    • Forms
    • TextField
    • Toggle Button
    • Download
    • Widgets
  • Games
  • UI
    • Material Design
    • Card
    • Flutter Widgets
    • Neomorphism
    • Navigation
  • Navigation
  • Q&A
  • Dart
    • Flutter Methods

© 2020 FlutterFix - Best Flutter Tool, Library, Source Code, Forum and Tutorials FlutterFix.

Welcome Back!

Login to your account below

Forgotten Password? Sign Up

Create New Account!

Fill the forms bellow to register

All fields are required. Log In

Retrieve your password

Please enter your username or email address to reset your password.

Log In