FancyBottomNavigation

Fancy Gif

Getting Started

Add the plugin (pub coming soon):

dependencies:
  ...
  fancy_bottom_navigation: ^0.3.1

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: 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;
        });
    },
)

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

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).<br/> See example project, main.dart, line 75 for an example.

Inspiration

This package was inspired by a design on dribbble by Manoj Rajput:<br/> https://dribbble.com/shots/5419022-Tab

Contributing

Contributions are welcome, please submit a PR :)

Libraries

fancy_bottom_navigation
half_clipper
half_painter
tab_item

Dart

dart:ui
Built-in types and core primitives for a Flutter application. [...]

Core

dart:async
Support for asynchronous programming, with classes such as Future and Stream. [...]
dart:collection
Classes and utilities that supplement the collection support in dart:core. [...]
dart:convert
Encoders and decoders for converting between different data representations, including JSON and UTF-8. [...]
dart:core
Built-in types, collections, and other core functionality for every Dart program. [...]
dart:developer
Interact with developer tools such as the debugger and inspector. [...]
dart:math
Mathematical constants and functions, plus a random number generator. [...]
dart:typed_data
Lists that efficiently handle fixed sized data (for example, unsigned 8 byte integers) and SIMD numeric types. [...]

VM

dart:io
File, socket, HTTP, and other I/O support for non-web applications. [...]
dart:isolate
Concurrent programming using isolates: independent workers that are similar to threads but don't share memory, communicating only via messages. [...]