Simple Tab Bar

This code demonstrates how to create a simple Tab Bar using Flutter. It includes a Tab Bar with two tabs and displays different content for each tab within a TabBarView.

Requirements

• lib/theme/colors.dart

Notes

To modify the appearance of tabs, edit TabBarTheme in files lib/theme/light_theme/tab_bar_theme.dart and lib/theme/dark_theme/tab_bar_theme.dart

To change the alignment and scrollability of the tabs, use the tabAlignment and isScrollable properties inside TabBar widget.

To change indicator size, use the indicatorSize property inside TabBar widget.

Code

  import 'package:flutter/material.dart';

  class SimpleTabBar extends StatefulWidget {
    const SimpleTabBar({super.key});

    @override
    State<SimpleTabBar> createState() => _SimpleTabBarState();
  }

  class _SimpleTabBarState extends State<SimpleTabBar>
      with SingleTickerProviderStateMixin{
    /// Variables
    late TabController _tabController;

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

    /// Widget
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          title: const Text("Market Movers"),
          leading: const BackButton(),
          bottom: TabBar(
            controller: _tabController,
            tabAlignment: TabAlignment.fill,
            indicatorSize: TabBarIndicatorSize.tab,
            tabs: const [
              Tab(text: "TOP GAINERS"),
              Tab(text: "TOP LOSERS"),
            ],
          ),
        ),
        body: SafeArea(
            child: TabBarView(controller: _tabController, children: [
              ListView.builder(
                  padding: const EdgeInsets.all(8),
                  itemCount: 40,
                  itemBuilder: (BuildContext context, int index) {
                    return Container(
                      height: 30,
                      color: index % 2 == 0
                          ? Colors.white
                          : Colors.green[200],
                      child: Center(child: Text('$index')),
                    );
                  }),
              ListView.builder(
                  padding: const EdgeInsets.all(8),
                  itemCount: 40,
                  itemBuilder: (BuildContext context, int index) {
                    return Container(
                      height: 30,
                      color: index % 2 == 0
                          ? Colors.white
                          : Colors.red[100],
                      child: Center(child: Text('$index')),
                    );
                  }),
            ])),
      );
    }
  }