FlutterTabBarLite

A fully customizable and animated tab bar widget for Flutter applications. Designed to make navigation intuitive and visually appealing, this package is perfect for creating modern and dynamic tab interfaces.

FlutterTabBarLite

Features

  • Customizable Titles: Add unique titles to each tab.
  • Icon Support: Include prefix and suffix icons for enhanced aesthetics.
  • Scrollable & Fixed Layouts: Choose between scrollable and fixed tab bar layouts.
  • Gradient Backgrounds: Apply gradients for a modern look.
  • Responsive Design: Fully responsive for various screen sizes.
  • Tab Change Callback: Get notified when the user switches tabs.
  • Tab Axis Horizontal & Vertical: Horizontal and Vertical Tabs.

Installation

Add the following to your pubspec.yaml file:

dependencies:
  flutter_tabbar_lite: ^0.0.4

Run the command to fetch the package:

flutter pub get

Usage

FlutterTabBarLite Horizontal Example

import 'package:flutter/material.dart';
import 'package:flutter_tab_bar/flutter_tabbar_lite.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text("FlutterTabBarLite Horizontal Example")),
        body: Column(
          children: [
            FlutterTabBarLite.horizontal(
              scrollable: true,
              titles: const [
                "Home",
                "Profile",
                "Settings",
                "More",
                "Help",
                "About",
                "Contact"
              ],
              gradient: const LinearGradient(
                colors: [Colors.teal, Colors.green],
                begin: Alignment.centerLeft,
                end: Alignment.centerRight,
              ),
              onTabChange: (index) {
                print("Scrollable TabBar - Selected Tab: $index");
              },
            ),
          ],
        ),
      ),
    );
  }
}

Flutter TabBarLite Vertical Example

import 'package:flutter/material.dart';
import 'package:flutter_tab_bar/flutter_tabbar_lite.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text("FlutterTabBarLite Vertical Example")),
        body: Column(
          children: [
            FlutterTabBarLite.vertical(
              itemMargin: const EdgeInsets.symmetric(horizontal: 8, vertical: 2),
              titles: const [
                "Home",
                "Profile",
                "Settings",
                "More",
                "Help",
                "About",
                "Contact"
              ],
              gradient: const LinearGradient(
                colors: [Colors.purple, Colors.cyan],
                begin: Alignment.centerLeft,
                end: Alignment.centerRight,
              ),
              onTabChange: (index) {
                print("Selected Tab: $index");
              },
            ),
          ],
        ),
      ),
    );
  }
}

Properties

Property Type Default Value Description
scrollable bool false Enables horizontal scrolling for tabs.
titles List<String> ["Tab 1", "Tab 2"] Titles for each tab.
prefixIcons List<IconData>? null Icons before titles.
suffixIcons List<IconData>? null Icons after titles.
backgroundColor Color? Colors.blue Tab bar background color.
selectedTextColor Color Colors.black87 Color for the selected tab's text.
unselectedItemTextColor Color Colors.white Color for unselected tab's text.
gradient LinearGradient? null Gradient applied to the tab bar.
borderRadius double? 8.0 Border radius for TabBar
itemBorderRadius double? 4.0 Border radius for TabBar Item
itemMargin EdgeInsets? null Margin for TabBar Item
onTabChange Function(int)? null Callback function invoked on tab change.
horizontal constructor null Constructor to use horizontal tab bar
vertical constructor null Constructor to use vertical TabBar

Contributions

Contributions are welcome! Please fork the repository, make changes, and submit a pull request. Refer to the CONTRIBUTING.md for more details.

License

This project is licensed under the MIT License. See the LICENSE file for details.

Author

Developed with ❤️ by Khandakar Amir Hamza
GitHub Profile | Portfolio

Example App

Check the example directory for a fully functional implementation. Run it locally using:

cd example
flutter run

Feedback

If you encounter any issues or have suggestions, please create an issue in the GitHub repository.

Libraries

flutter_tabbar_lite