FancyBottomNavigationImage

Fancy Gif

Getting Started

Add the plugin:

dependencies:
  ...
  fancy_bottom_navigation_image: 1.0.0

Limitations

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

Basic Usage

Adding the widget

bottomNavigationBar: FancyBottomNavigationImage(
    tabs: [
        TabData(imageData: "home-run.png", title: "Home"),
        TabData(imageData: "home-run.png", title: "Search"),
        TabData(imageData: "home-run.png", title: "Basket")
    ],
    onTabChangedListener: (position) {
        setState(() {
        currentPage = position;
        });
    },
)

TabData

imageData -> Image path to be used for the tab<br/> title -> String to be used for the tab<br/> onClick -> Optional function to be used when the circle itself is clicked, on an active tab

Attributes

required

tabs -> List of TabData objects<br/> onTabChangedListener -> Function to handle a tap on a tab, receives int position

optional

initialSelection -> Defaults to 0<br/> circleColor -> Defaults to null, derives from Theme<br/> activeIconColor -> Defaults to null, derives from Theme<br/> inactiveIconColor -> Defaults to null, derives from Theme<br/> taxtColor -> Defaults to null, derives from Theme<br/> barBackgroundColor -> Defaults to null, derives from Theme<br/> key -> Defaults to null<br/>

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://pub.dev/packages/fancy_bottom_navigation_image

Showcase

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

Clone

This package is clone of fancy_bottom_navigation plugins and changed for images instead of Icons.<br/> https://github.com/tunitowen/fancy_bottom_navigation

Libraries

fancy_bottom_navigation_image
half_clipper
half_painter
tab_item