https://github.com/electronsz/fancybottomnavigation

Fancy Bottom Navigation Flutter UI Library
https://github.com/electronsz/fancybottomnavigation

Last synced: 23 days ago
JSON representation

Fancy Bottom Navigation Flutter UI Library

• Host: GitHub
• URL: https://github.com/electronsz/fancybottomnavigation
• Owner: ElectronSz
• License: mit
• Created: 2022-08-27T06:54:43.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2022-08-27T07:56:40.000Z (over 2 years ago)
• Last Synced: 2024-11-13T18:35:29.271Z (2 months ago)
• Language: Dart
• Size: 12.7 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# CoolBottomNavigation

![Cool Gif](https://github.com/ElectronSz/cool_bottom_navigation/blob/main/cool_gif.gif "Cool Gif")

## Getting Started

Add the plugin (pub coming soon):

```yaml

dependencies:

  ...

  cool_bottom_navigation: ^0.1.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: CoolBottomNavigation(

    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`


**textColor** -> 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:

![Cool Theming](https://github.com/electronsz/cool_bottom_navigation/blob/maun/cool_theming.png "Cool 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.

## Showcase

Using this package in a live app, let me know, and I'll add your app here.

## Inspiration

This package was inspired by a design on dribbble by Manoj Rajput:


https://dribbble.com/shots/5419022-Tab

## Contributing

Contributions are welcome, please submit a PR :)