Custom Bottom navigation bar on Flutter.

Overview

Intro

Custom Bottom navigation bar on Flutter.

The updated one Support : Null safety & Support 9 items on Tabs & Some Color, Size, Effects and font customization.

Check the screenshot :

alt text

P.S

Make sure to upgrade your Flutter version to Latest version which support Null Safety.

Flutter upgrade

Usage

{}), TabData(iconData: Icons.message, title: "Message", onclick: () => {}), TabData( iconData: Icons.notifications, title: "Notification", onclick: () => {}), TabData( iconData: Icons.person, title: "Profile", onclick: () => {}, ) ], initialSelection: 2, activeIconColor: Colors.white, circleColor: Color.fromARGB(255, 245, 154, 67), barBackgroundColor: Color.fromARGB(255, 229, 233, 234), inactiveIconColor: Colors.grey, key: bottomNavigationKey, onTabChangedListener: (position) { setState(() { currentPage = position; }); }, ), ">
bottomNavigationBar: FancyBottomNavigation(
        tabs: [
          TabData(iconData: Icons.home, title: "Home", onclick: () {}),
          TabData(
              iconData: Icons.shopping_bag,
              title: "My Cart",
              onclick: () => {}),
          TabData(iconData: Icons.message, title: "Message", onclick: () => {}),
          TabData(
              iconData: Icons.notifications, title: "Notification", onclick: () => {}),
          TabData(
            iconData: Icons.person,
            title: "Profile",
            onclick: () => {},
          )
        ],
        initialSelection: 2,
        activeIconColor: Colors.white,
        circleColor: Color.fromARGB(255, 245, 154, 67),
        barBackgroundColor: Color.fromARGB(255, 229, 233, 234),
        inactiveIconColor: Colors.grey,
        key: bottomNavigationKey,
        onTabChangedListener: (position) {
          setState(() {
            currentPage = position;
          });
        },
      ),

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.

I'm available for new projects : [email protected]

License

Fancy_Botton_Navigation_Bar on Pub dev.

You might also like...

Flutter Flows made easy! A Flutter package which simplifies navigation flows with a flexible, declarative API.

Flutter Flows made easy! A Flutter package which simplifies navigation flows with a flexible, declarative API.

Flutter Flows made easy! Usage Define a Flow State The flow state will be the state which drives the flow. Each time this state changes, a new navigat

Dec 31, 2022

Elegant abstraction for complete deep linking navigation in Flutter

Elegant abstraction for complete deep linking navigation in Flutter

Flutter Deep Link Navigation Provides an elegant abstraction for complete deep linking navigation in Flutter. This package only provides deep linking

Dec 27, 2022

A simple and easy to learn declarative navigation framework for Flutter, based on Navigator 2.0.

A simple and easy to learn declarative navigation framework for Flutter, based on Navigator 2.0.

A simple and easy to learn declarative navigation framework for Flutter, based on Navigator 2.0 (Router). If you love Flutter, you would love declarat

Jun 28, 2022

A flutter navigation package

A flutter navigation package

Create By Me(Agalaba Ifeanyi Precious) go Navigate Navigate Like a pro from one Screen to another Using go navigate. go_Navigate provide you the abili

Oct 11, 2021

Flutter Material Design Navigation Drawer Menu

Flutter Material Design Navigation Drawer Menu

navigation_drawer_menu Flutter Material Design Navigation Drawer Menu Navigation drawer is a common UI pattern for adaptive menus. The Material Design

Dec 12, 2022

A Flutter package for easily implementing Material Design navigation transitions.

A Flutter package for easily implementing Material Design navigation transitions.

Morpheus A Flutter package for easily implementing Material Design navigation transitions. Examples Parent-child transition You can use MorpheusPageRo

Jan 7, 2023

Simple but powerfull Flutter navigation with riverpod and Navigator 2.0

Simple but powerfull Flutter navigation with riverpod and Navigator 2.0

Riverpod navigation If you are interested in the motivation why the package was created and a detailed description of what problems it solves, read th

Dec 13, 2022

Easy-to-use Navigator 2.0 router for web, mobile and desktop. URL-based routing, simple navigation of tabs and nested routes.

Easy-to-use Navigator 2.0 router for web, mobile and desktop. URL-based routing, simple navigation of tabs and nested routes.

Routemaster Hello! Routemaster is an easy-to-use router for Flutter, which wraps over Navigator 2.0... and has a silly name. Features Simple declarati

Jan 3, 2023

Fluro is a Flutter routing library that adds flexible routing options like wildcards, named parameters and clear route definitions.

Fluro is a Flutter routing library that adds flexible routing options like wildcards, named parameters and clear route definitions.

English | Português The brightest, hippest, coolest router for Flutter. Features Simple route navigation Function handlers (map to a function instead

Jan 4, 2023
Comments
  • Colors are not updated if user changes color

    Colors are not updated if user changes color

    Solution: Move

    circleColor = widget.circleColor ??
         ((Theme.of(context).brightness == Brightness.dark)
             ? Color.fromARGB(255, 229, 233, 234)
             : Theme.of(context).primaryColor);
    
     activeIconColor = widget.activeIconColor ??
         ((Theme.of(context).brightness == Brightness.dark)
             ? Colors.black54
             : Colors.white);
    
     barBackgroundColor = widget.barBackgroundColor ??
         ((Theme.of(context).brightness == Brightness.dark)
             ? Color(0xFF212121)
             : Colors.white);
     textColor = widget.textColor ??
         ((Theme.of(context).brightness == Brightness.dark)
             ? Colors.white
             : Colors.black54);
     inactiveIconColor = (widget.inactiveIconColor) ??
         ((Theme.of(context).brightness == Brightness.dark)
             ? Colors.white
             : Theme.of(context).primaryColor);
    

    to Widget build(BuildContext context)

    opened by Th2y 0
Owner
Ihab Zaidi
Ihab Zaidi
Persistent Bottom Navigation Bar

Persistent Bottom Navigation Bar A persistent/static bottom navigation bar for Flutter. NOTE: Those migrating from pre 2.0.0 version should check the

Bilal Shahid 421 Dec 20, 2022
A bottom navigation bar that you can customize with the options you need, without any limits.

Bottom Personalized Dot Bar A bottom navigation bar that you can customize with the options you need, without any limits. You can also customize the a

null 103 Oct 20, 2022
Flutter Navigation Best Practices including adapting navigation to platform and branding techniques for navigation surfaces.

Flutter Navigation Best Practices including adapting navigation to platform and branding techniques for navigation surfaces.

Fred Grott 5 Aug 22, 2022
A Custom Extended Scaffold with Expandable and Floating Navigation Bar

Custom Extended Scaffold Custom Flutter widgets that makes Bottom Navigation Floating and can be expanded with much cleaner a

Ketan Choyal 139 Dec 10, 2022
flutter bottom navigation bat project

bottom_navigation A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you starte

Danushan Ravendran 3 Sep 23, 2021
A Flutter implementation of a customizable navigation bar with animations.

A heavily customizable bottom navigation bar with some animation modifiers.

null 1 Jun 17, 2022
Fast code and awesome design-ui for flutter navigation bar

Flutter-awesome-bottom-navigation-bar ??‍?? Fast code and awesome design-ui for flutter navigation bar ?? Getting Started # First you need to add flas

Hmida 20 Nov 22, 2022
Transparent Android system navigation bar with Flutter and FlexColorScheme package.

Sysnavbar with FlexColorScheme Transparent Android system navigation bar with Flutter and FlexColorScheme. FlexColorScheme V4 Notice If you are using

Rydmike 12 Oct 21, 2022
A Flutter package for easy implementation of curved navigation bar

curved_navigation_bar pub package A Flutter package for easy implementation of curved navigation bar. Add dependency dependencies: curved_navigation

null 556 Dec 9, 2022
Flutter custom BottomBar Navigation Widget

bottom_bar_with_sheet ?? Non-standard way to use more space of screens in your application ?? ?? Custom bottom Sheet under Bottom Navigation Bar ?? ??

Stanislav Ilin 305 Dec 23, 2022