How to Customize TabBar Width In Flutter?

· 4 min read
How to Customize Tabbar Width In Flutter
How to Customize Tabbar Width In Flutter

TabBar Widget is nothing but a horizontal row of tabs and displays a widget that corresponds to the currently selected tab. To display a horizontal row of tabs, we can use the TabBar Widget. So in this article, we will learn about How to customize Tabbar width in Flutter?

How to Customize Tabbar Width In Flutter?

Users can give TabBar Widget a property of isScrollable: true if you don’t want the tabs to expand to fill the screen horizontally the way they do by default.

user can use a Container Widget wrapped in a PreferredSize to size the TabBar. The PreferredSize is only necessary if you want it to live in the bottom slot of an AppBar. This has the effect of making the indicators appear narrower because the TabBar doesn’t fill the screen. However, the indicator has a hard coded height. If you don’t like it, you’ll have to import your own copy of tabs.dart and customize the constants in that file. The code snippet will look like the below:

import 'package:flutter/material.dart';


void main() {
  runApp(new MaterialApp(
    home: new MyApp(),
  ));
}



class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new DefaultTabController(
      length: 2,
      child: new Scaffold(
        appBar: new AppBar(
          title: new Text('Tabs Demo'),
          bottom: new PreferredSize(
            preferredSize: new Size(200.0, 200.0),
            child: new Container(
              width: 200.0,
              child: new TabBar(
                tabs: [
                  new Container(
                    height: 200.0,
                    child: new Tab(text: 'hello'),
                  ),
                  new Container(
                    height: 200.0,
                    child: new Tab(text: 'world'),
                  ),
                ],
              ),
            ),
          ),
        ),
        // body: ...
      ),
    );
  }

}

We will get output like the below:

Custom Tab Bar Demo
Custom Tab Bar Demo

Users can use indicatorSize: TabBarIndicatorSize.label on the TabBar to make the indicator the same size as the label.

AppBar(
    bottom: TabBar(
        indicator: UnderlineTabIndicator(
          borderSide: BorderSide(width: 5.0),
          insets: EdgeInsets.symmetric(horizontal:16.0)
        ),
        tabs: [
          Tab(text: 'tab 1'),
          Tab(text: 'tab 2'),
          Tab(text: 'tab 3'),
        ],
     ),
);
  • User can also try the below way
    bottomNavigationBar: new Material(
        color: Colors.teal,
        child: new Container(
          height: 60.0,
          child: new TabBar(
            controller: controller,
            tabs: <Widget>[
                new Tab(icon: new Icon(Icons.access_alarm)),
                new Tab(icon: new Icon(Icons.account_balance)),
            ]
          ),
        )
      ),

    We will get output like the below:

    Tab Bar Demo Flutter
    Tab Bar Demo Flutter

 

Conclusion:

Hope you guys are enjoying our articles based on Flutter.

Do share your valuable feedback/suggestion for the same.

Keep Learning !!! Keep Fluttering !!!

FlutterAgency.com is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget GuideFlutter ProjectsCode libs and etc.

FlutterAgency.com is one of the most popular online portal dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge on Flutter.

Leave a Reply