A fancy animated bottom navigation bar 💫.

Overview

Stacky_bottom_nav_bar

A fancy animated bottom navigation bar.

Preview

Default Light Mode Default Dark Mode

⚠️ IMPORTANT: when adding this widget don’t force it with a specific size like wrapping it with sizedbox or whatever . you can use it in stack widget and put it on the top and consider getting the default height of this nav bar with StackyBottomNavBar.defaultHeigh as a padding to the widget below .

Getting Started

Add the dependency in pubspec.yaml:

dependencies:
  ...
  stacky_bottom_nav_bar: ^0.0.2

Customization

StackyBottomNavBar

params a StackyBottomNavBarParams class already come-in with the package that hold all of required and optional parametres.

StackyBottomNavBarParams

simpleNavBarItems a list of StackySimpleNavBarItem's , must be 2 length.

animatedNavBarItems a list of StackyAnimatedNavBarItem's , must be 3 length.

brightness customize nav bar brightness.

bgColor change nav bar background color.

currentSelectedTabIndex current selected tab item , Defaults to zero . must be 0 or 1.

StackySimpleNavBarItem

icon simple nav bar item iconData

onTap nav bar iconData

iconColor use it to override unselected Icon Color (Optional).

selectedIconColor use it to override unselected Icon Color (Optional).

StackyAnimatedNavBarItem

icon animated nav bar item iconData

onTap nav bar iconData

iconColor use it to override Icon Color (Optional).

bgColor use it to override Animated Nav Bar Item Background Color (Optional).

BASIC USAGE EXAMPLE

StackyBottomNavBar(
          params: StackyBottomNavBarParams(
            animatedNavBarItems: [
              StackyAnimatedNavBarItem(
                icon: MyFlutterApp.videocam,
                onTap: () => log("videocam"),
              ),
              StackyAnimatedNavBarItem(
                icon: MyFlutterApp.camera,
                onTap: () => log("camera"),
              ),
              StackyAnimatedNavBarItem(
                icon: MyFlutterApp.picture,
                onTap: () => log("picture"),
              ),
            ],
            simpleNavBarItems: [
              StackySimpleNavBarItem(
                icon: MyFlutterApp.house,
                onTap: () => log("house"),
              ),
              StackySimpleNavBarItem(
                icon: MyFlutterApp.user,
                onTap: () => log("user"),
              )
            ],
            currentSelectedTabIndex: 0,
          ),
   ),
You might also like...

A fancy yet beautiful animated widget for your Flutter apps

A fancy yet beautiful animated widget for your Flutter apps

FancyBar A fancy yet beautiful animated widget for your Flutter apps | Preview Version 1 | |---------|----------| | | | Preview Version 2 | |---------

Oct 10, 2022

A flutter Package provides you a modern animated fancy segment

A flutter Package provides you a modern animated fancy segment

animated_segment This package will animates a segment. Package provides you a mo

Dec 10, 2022

Flutter circle bottom bar by animation

Flutter circle bottom bar by animation

Animation circle bottom bar Flutter circle bottom bar by animation how to use: 1. add dependencies to pubspec.yaml: circle_bottombar: ^1.1.1 2. create

Oct 29, 2022

Expandable bottom app bar widget for Flutter SDK

Expandable bottom app bar widget for Flutter SDK

Expandable bottom app bar widget for Flutter SDK

Dec 28, 2022

Notched Bottom Tab Bar Example using Flutter Framework

Notched Bottom Tab Bar Example using Flutter Framework

bottom_tab_bar Notched Bottom Tab Bar Example using Flutter Framework Getting Started Flutter tutorial explaining how to create a notched shaped botto

Dec 6, 2022

Doctor Consultation App in Flutter containing splash screen on boarding screen Routing state management Dash board Bottom navigation Decorated Drawer and Doctors Screen in the last.

Doctor Consultation App in Flutter containing splash screen on boarding screen  Routing  state management Dash board Bottom navigation Decorated Drawer and Doctors Screen in the last.

Online doctor Consultation App UI in Flutter Doctor Consultation App UI in Flutter Visit Website Features State Management Navigation Bar Responsive D

Jan 1, 2023

A flutter plugin about qr code or bar code scan , it can scan from file、url、memory and camera qr code or bar code .Welcome to feedback your issue.

A flutter plugin about qr code or bar code scan , it can scan from file、url、memory and camera qr code or bar code .Welcome to feedback your issue.

r_scan A flutter plugin about qr code or bar code scan , it can scan from file、url、memory and camera qr code or bar code .Welcome to feedback your iss

Nov 11, 2022

Starlight search bar - Starlight search bar with flutter

Starlight search bar - Starlight search bar with flutter

starlight_search_bar If you find the easiest way to search your item, this is fo

Apr 20, 2022

This is a JazzCash UI clone ( Modern Wallet App in Pakistan), implementing modern app bar animmation. One can take a concept of making app bar with animation.

jazzcash_ui This is a JazzCash UI clone ( Modern Wallet App in Pakistan), implementing modern app bar animmation. One can take a concept of making app

Nov 27, 2022
Owner
null
Custom bottom bar - A bottom tool bar that can be swiped left or right to expose more tools.

custom_bottom_bar A bottom tool bar that can be swiped left or right to expose more tools. usage Create your custom bottom bars with up to four custom

null 4 Jan 26, 2020
Animation nav bar - Flutter Animated Navigation Bar

Flutter Animated Navigation Bar Getting Started This project is a starting point

Sudesh Nishshanka Bandara 23 Dec 30, 2022
Bottom navigation bar with sliding clip effect.

Sliding Clipped Nav Bar Design Credit Toolbar icons animation by Cuberto How to use? API reference barItems → List<BarItem> List of bar items that sho

Watery Desert 55 Dec 3, 2022
A custom bottom navigation bar with box animation for flutter

A custom bottom navigation bar with box animation. This is inspired from some of the earlier designs, but in a more simplified and yet exiting way. De

SHIVAM SONI 1 Jul 31, 2022
New trick on how to create your own custom icons in flutter with bottom bar navigation

Customized Bottom Navigation Bar in Flutter | Tech With Sam Customized Bottom Navigation Bar in Flutter - Watch on youtube ✌   App Preview App Screens

Samuel Adekunle 10 Oct 26, 2022
This is repository for Spin Circle Bottom Navigation Bar Package for Flutter

Spin Circle Bottom Bar An easy to implement Spin Circle Bottom Navigation Bar for Flutter Applications. Current Features Initial Release for Spin Circ

Paras Jain 79 Dec 22, 2022
simple flutter bottom navigation bar widget

bmnav A very flexible Flutter implementation of the Bottom Navigation Bar. Get Started Add bmanv to your pubspec.yaml file: dependencies: bmnav: ^0.

Edwin 21 Oct 8, 2022
A 3D Bottom Navigation Bar in Flutter

flip_box_bar A 3D BottomNavigationBar inspired by Dribbble design by Dannniel [https://dribbble.com/shots/4811135-Tab-Bar-Cube-Interaction]. Demo Exam

Deven Joshi 258 Nov 19, 2022
Playful and customizable bottom navigation bar for Flutter

rolling_nav_bar A bottom nav bar with layout inspired by this design and with heavily customizable animations, colors, and shapes. Getting Started To

Craig Labenz 117 Dec 22, 2022
Custom Shaped Bottom Navigation Bar in Flutter

CustomShapedBottomBar Custom Shaped Bottom Navigation Bar in Flutter **Usage: ** Add CustomPaint Widget to use this Painter class like this: C

Shraddha Sojitra 5 May 6, 2022