https://github.com/rrifafauzikomara/flutter_fancy_bottom_bar

Animated Fancy Bottom Navigation in Flutter
https://github.com/rrifafauzikomara/flutter_fancy_bottom_bar

animation flutter flutter-animation

Last synced: 5 days ago
JSON representation

Animated Fancy Bottom Navigation in Flutter

• Host: GitHub
• URL: https://github.com/rrifafauzikomara/flutter_fancy_bottom_bar
• Owner: rrifafauzikomara
• Created: 2019-05-22T16:41:21.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2019-05-22T17:18:47.000Z (about 6 years ago)
• Last Synced: 2025-04-15T02:51:39.747Z (2 months ago)
• Topics: animation, flutter, flutter-animation
• Language: Dart
• Homepage: https://pub.dev/packages/fancy_bottom_navigation
• Size: 256 KB
• Stars: 12
• Watchers: 0
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# FancyBottomNavigation

[pub package](https://pub.dev/packages/fancy_bottom_navigation)

A Flutter package for easy implementation of fancy bottom navigation. 

![Fancy Gif](https://github.com/rrifafauzikomara/flutter_fancy_bottom_bar/blob/master/fancy_gif.gif "Fancy Gif")



## Add dependency

```yaml

dependencies:

  ...

  fancy_bottom_navigation: ^0.3.2

```

## Limitations

For now this is limited to more than 1 tab, and less than 5. So 2-4 tabs.

## Basic Usage

Adding the widget

```dart

bottomNavigationBar: FancyBottomNavigation(

    tabs: [

        TabData(iconData: Icons.home, title: "Home"),

        TabData(iconData: Icons.search, title: "Search"),

        TabData(iconData: Icons.shopping_cart, title: "Basket")

    ],

    onTabChangedListener: (position) {

        setState(() {

        currentPage = position;

        });

    },

)

```

## TabData

**iconData** -> Icon to be used for the tab


**title** -> String to be used for the tab


**onClick** -> Optional function to be used when the circle itself is clicked, on an active tab

## Attributes

### required

**tabs** -> List of `TabData` objects


**onTabChangedListener** -> Function to handle a tap on a tab, receives `int position`

### optional

**initialSelection** -> Defaults to 0


**circleColor** -> Defaults to null, derives from `Theme`


**activeIconColor** -> Defaults to null, derives from `Theme`


**inactiveIconColor** -> Defaults to null, derives from `Theme`


**taxtColor** -> Defaults to null, derives from `Theme`


**barBackgroundColor** -> Defaults to null, derives from `Theme`


**key** -> Defaults to null


## Theming

The bar will attempt to use your current theme out of the box, however you may want to theme it. Here are the attributes:

![Fancy Theming](https://github.com/rrifafauzikomara/flutter_fancy_bottom_bar/blob/master/fancy_theming.png "Fancy Theming")

## Programmatic Selection

To select a tab programmatically you will need to assign a GlobalKey to the widget. When you want to change tabs you will need to access the State using this key, and then call `setPage(position)`.


See example project, main.dart, line 75 for an example.

## Author

* **R Rifa Fauzi Komara**

Don't forget to follow and ★