Buttons TabBar

Buttons TabBar is an open-source Flutter package that provides a tabbar where each tab indicator is a toggle button. It allows you to create interactive and customizable tab bars for your Flutter applications.

Features

✨ Each tab indicator is a toggle button
🎨 Customizable appearance and behavior
🖌️ Supports various styling options, including background color, border color, label style, icon color, and more
🚀 Smooth transition animations
📱 Works like a native TabBar
⚙️ Simple and easy to use configuration with a wide range of parameters

Installation

To use Buttons TabBar in your Flutter project, follow these steps:

1. Add the dependency to your pubspec.yaml file:

dependencies:
  flutter:
    sdk: flutter
  buttons_tabbar: ^1.3.7+1

2. Run flutter pub get to install the package.

Usage

Import the package in your Dart file and customize the tab bar according to your needs:

import 'package:buttons_tabbar/buttons_tabbar.dart';

DefaultTabController(
  length: ...,
  child: Column(
    children: <Widget>[
      ButtonsTabBar(
        // Customize the appearance and behavior of the tab bar
        backgroundColor: Colors.red,
        borderWidth: 2,
        borderColor: Colors.black,
        labelStyle: TextStyle(
          color: Colors.white,
          fontWeight: FontWeight.bold,
        ),
        unselectedLabelStyle: TextStyle(
          color: Colors.black,
          fontWeight: FontWeight.bold,
        ),
        // Add your tabs here
        tabs: ...,
      ),
      Expanded(
        child: TabBarView(
          children: ...,
        ),
      ),
    ],
  ),
)

Examples

Here are a few examples of how you can use Buttons TabBar:

Example #1

DefaultTabController(
  length: ...,
  child: Column(
    children: <Widget>[
      ButtonsTabBar(
        backgroundColor: Colors.red,
        tabs: ...,
      ),
      Expanded(
        child: TabBarView(
          children: ...,
        ),
      ),
    ],
  ),
)

Example #2

DefaultTabController(
  length: ...,
  child: Column(
    children: <Widget>[
      ButtonsTabBar(
        backgroundColor: Colors.blue[600],
        unselectedBackgroundColor: Colors.white,
        labelStyle: TextStyle(
          color: Colors.white,
          fontWeight: FontWeight.bold,
        ),
        unselectedLabelStyle: TextStyle(
          color: Colors.blue[600],
          fontWeight: FontWeight.bold,
        ),
        borderWidth: 1,
        unselectedBorderColor: Colors.blue[600],
        radius: 100,
        tabs: ...,
      ),
      Expanded(
        child: TabBarView(
          children: ...,
        ),
      ),
    ],
  ),
)

Example #3

DefaultTabController(
  length: 6,
  child: Column(
    children: <Widget>[
      ButtonsTabBar(
        radius: 12,
        contentPadding: EdgeInsets.symmetric(horizontal: 12),
        borderWidth: 2,
        borderColor: Colors.transparent,
        center: true,
        decoration: BoxDecoration(
          gradient: LinearGradient(
            colors: <Color>[
              Color(0xFF0D47A1),
              Color(0xFF1976D2),
              Color(0xFF42A5F5),
            ],
          ),
        ),
        unselectedLabelStyle: TextStyle(color: Colors.black),
        labelStyle: TextStyle(color: Colors.white),
        height: 56,
        tabs: ...,
      ),
      Expanded(
        child: TabBarView(
          children: ...,
        ),
      ),
    ],
  ),
)

For more examples, please refer to the example.dart file.

Properties

Below are the properties available for customizing the ButtonsTabBar. For more detailed information, check the API reference.

Apps Using Buttons TabBar

Here are some apps that are using Buttons TabBar to create engaging and interactive tab bars:

1. Spotube - Open source Spotify client that doesn't require Premium nor uses Electron! Available for both desktop & mobile!

If you are using Buttons TabBar in your app and would like to showcase it here, please let us know. We would be happy to feature your app as well.

Please note that the above apps are provided as examples and may not be actively maintained or associated with the Buttons TabBar package.

Future Development

If you have any suggestions or encounter any issues, feel free to let me know. I am committed to improving and maintaining this package.

License

This package is licensed under the MIT License. For more information, see the LICENSE.md file.

More Information

For more information, visit the Buttons TabBar GitHub repository or the author's website.