GitHub repositoryleo-elstin/fancy_bar

fancy_bar

A fancy yet beautiful animated widget for your Flutter apps

fancy_bar project cover
Stars
35
Forks
8
Last push (UTC)
May 26, 2021
Project status
Active

Original README

English project snapshot. Visit GitHub for the latest content.

Pub

FancyBar

A fancy yet beautiful animated widget for your Flutter apps

| Preview Version 1 | |---------|----------| |FancyBar Gif |

| Preview Version 2 | |---------|----------| |FancyBar Gif |

Customization (Optional)

FancyBar

items - navigation items, required more than one item and less than six

selectedIndex - the current item index. Use this to change the selected item. Default to zero

onItemSelected - required to listen when a item is tapped it provide the selected item's index

type - You can pass the required Fancy Bar type. Available FancyV1, FancyV2

FancyItem

icon - the widget of this item. Your can pass any widget as param.

title - the text that will appear next to the icon when this item is selected.

textColor - the active item's text color

Getting Started

Add the plugin:

dependencies:
  fancy_bar: ^1.2.0

Basic Usage

Adding the widget

bottomNavigationBar: FancyBottomBar(
        type: FancyType.FancyV2,   // Fancy Bar Type
        items: [
          FancyItem(
            textColor: Colors.orange,
            title: 'Home',
            icon: Icon(Icons.home),
          ),
          FancyItem(
            textColor: Colors.red,
            title: 'Trending',
            icon: Icon(Icons.trending_up),
          ),
          FancyItem(
            textColor: Colors.green,
            title: 'Search',
            icon: Icon(Icons.search),
          ),
          FancyItem(
            textColor: Colors.brown,
            title: 'Settings',
            icon: Icon(Icons.settings),
          ),
        ],
        onItemSelected: (index) {
          print(index);
        },
      ),

Catch me up on LinkedIn @Leo Elstin

💙 to Code👨🏽‍💻 Flutter Expert • Dart Kotlin Swift Node Js • Android • Full Stack Mobile Developer

Leo Elstin GitHub avatar
GitHub author

Leo Elstin ↗

Senior Mobile Engineer @Maersk-Global

@maersk-globalBangalore, IndiaOfficial website ↗
LanguagesDart

Categories

Dependencies used

Dependency list 2 items

  • flutter{"sdk":"flutter"}
  • flutter_testDevelopment{"sdk":"flutter"}

How do I choose a repository?

Start with your use case, compare repository activity, and check the original project before adopting it.

  1. Search by repository name, owner or description, then narrow the results by topic.
  2. Compare stars, forks and recent pushes. Stars show community interest, not a guarantee of quality.
  3. Read the README, license and issues on GitHub before using a project.

Sources and maintenance

“A repository is the most basic element of GitHub.”

GitHub Docs — About repositories ↗