https://github.com/datvu7/flutter_colorful_tab

A colorful TabBar Flutter library with color animating indicator where each tab has a color. (inspired by SmartNews app)
https://github.com/datvu7/flutter_colorful_tab

colorful flutter tabbar

Last synced: 4 months ago
JSON representation

A colorful TabBar Flutter library with color animating indicator where each tab has a color. (inspired by SmartNews app)

• Host: GitHub
• URL: https://github.com/datvu7/flutter_colorful_tab
• Owner: datvu7
• License: mit
• Created: 2020-11-09T13:12:00.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2024-04-16T11:52:22.000Z (about 2 years ago)
• Last Synced: 2026-01-11T10:41:36.480Z (5 months ago)
• Topics: colorful, flutter, tabbar
• Language: Dart
• Homepage: https://pub.dev/packages/flutter_colorful_tab
• Size: 2.22 MB
• Stars: 18
• Watchers: 1
• Forks: 9
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# Flutter Colorful TabBar

A colorful TabBar for Flutter where each tab has a color (inspired by SmartNews app).

![demo](https://raw.githubusercontent.com/datdescartes/flutter_colorful_tab/master/demo.gif)

## Getting Started

Add this to your package's pubspec.yaml file:

```yaml

  dependencies:

    flutter_colorful_tab: {current_version}

```

Import the library in your file:

```dart

import 'package:flutter_colorful_tab/flutter_colorful_tab.dart';

```

Use the flutter_colorful_tab like this: 

```dart

ColorfulTabBar(

  tabs: [

    TabItem(color: Colors.red, title: Text('Home')),

    TabItem(color: Colors.green, title: Text('Favorite')),

    TabItem(color: Colors.orange, title: Text('Search')),

    TabItem(color: Colors.green, title: Text('Settings')),

  ],

  controller: _tabController,

)

// all available parameters of TabItem

  TabItem(

    color: Colors.orange,

    unselectedColor: Colors.orange.shade600,

    title: const Text('Search'),

    labelColor: Colors.black,

    unselectedLabelColor: Colors.yellow,

    labelStyle: const TextStyle(fontWeight: FontWeight.bold),

    unselectedLabelStyle: const TextStyle(fontWeight: FontWeight.normal),

  ),

```