Flutter tabbar left align

by

Flutter TabBar Left Align

To left align the tabs of a TabBar widget in Flutter, you can make use of the TabBar.tabs property and set the alignment property of the TabBar widget to Alignment.centerLeft. This will ensure that the tabs are aligned to the left.

Here’s an example demonstrating how to left align the tabs in a TabBar widget: 


import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Left Aligned Tabs'),
        ),
        body: DefaultTabController(
          length: 3,
          child: Column(
            children: [
              Container(
                alignment: Alignment.centerLeft,
                child: TabBar(
                  tabs: [
                    Tab(text: 'Tab 1'),
                    Tab(text: 'Tab 2'),
                    Tab(text: 'Tab 3'),
                  ],
                  isScrollable: true,
                  indicatorColor: Colors.white,
                  indicatorWeight: 4.0,
                  labelColor: Colors.white,
                  unselectedLabelColor: Colors.grey,
                  alignment: Alignment.centerLeft, // Align tabs to the left
                ),
              ),
              Expanded(
                child: TabBarView(
                  children: [
                    // Tab 1 content
                    Center(
                      child: Text('Tab 1 content'),
                    ),
                    // Tab 2 content
                    Center(
                      child: Text('Tab 2 content'),
                    ),
                    // Tab 3 content
                    Center(
                      child: Text('Tab 3 content'),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

In the above example, we have used the TabBar widget inside the AppBar widget of a Scaffold. We have set the alignment property of the TabBar widget to Alignment.centerLeft to align the tabs to the left.

The TabBar widget is wrapped inside a Container widget to provide the left alignment. Additionally, we have set the isScrollable property to true to enable horizontal scrolling if the number of tabs exceeds the screen width.

The TabBarView widget contains the content for each tab. In this example, we have used a simple Center widget with a Text widget to display the tab content.

Leave a comment