A Flutter implementation of a customizable navigation bar with animations.

Overview

Animated Navigation Bar

A Flutter implementation of a customizable navigation bar with animations.

Pub Version license github stars

Getting started

Add the following dependency in the pubspec.yaml of your Flutter project :

dependencies:
  ...
  animated_navigation_bar:

Import the package :

import 'package:animated_navigation_bar/animatedNavBar.dart';

If you need help getting started with Flutter, head over to the official documentation documentation.

Constructors

You can create an AnimatedNavBar by calling its constructor and passing a list of AnimatedNavBarPage as your Scaffold body

Scaffold(
  body: AnimatedNavBar(
    pages: <AnimatedNavBarPage>[
      AnimatedNavBarPage(),
      AnimatedNavBarPage(),
      ...
    ]
  ),

An AnimatedNavBar requires multiple things:

  • A Color, to fill the navigation view and bar with a background color
  • A BorderRadius with a radius ranged between 0 and 24
  • And a list of AnimatedNavBarPage as mentioned before with a maximum length of 5 and a minimumm of 1

An AnimatedNavBarPage requires multiple things:

  • A Text of the tab bar page
  • An IconData of the tab bar page
  • And a pageContent, this is the page Widget and it can be whatever Widget you want it to be

Styling

You can style the AnimatedNavBar with a variety of additional parameters

here's an example

Scaffold(
  backgroundColor: Colors.blue,
  body: AnimatedNavBar(
    borderRadius: Radius.circular(24),
    color: Colors.white,
    padding: 8,
    iconColor: Color(0xFF0D1C2E),
    inactiveIconColor: Color(0xFF233B90),
    backgroundColor: Colors.blue,
    shadow: false,
    textStyle: Theme.of(context).textTheme.headline4,
    pages: [
      // first page
      AnimatedNavBarPage(
        title: "Home",
        icon: Icons.home,
        inactiveIcon: Icons.home_outlined,
        pageContent: HomePage(),
      ),
      // second page
      AnimatedNavBarPage(
        title: "Map",
        icon: Icons.map,
        inactiveIcon: Icons.map_outlined,
        pageContent: MapPage(),
      ),
      // third page
      AnimatedNavBarPage(
        title: "User",
        icon: Icons.person,
        inactiveIcon: Icons.person_outline,
        pageContent: UserPage(),
      ),
    ],
  ),
);

Contributions

Please feel free to contribute to this project

You can fork the project and work on your own version If you found any bug, please open an issue. If you fixed a bug or added a feature, please open a pull request.

Examples

For a complete understandable project, refer to this repository.

You might also like...

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

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

Sep 23, 2021

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

Flutter custom BottomBar Navigation Widget

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 😳 😩

Dec 23, 2022

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
Releases(0.0.2)
Owner
null
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
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
Custom Bottom navigation bar on Flutter.

Intro Custom Bottom navigation bar on Flutter. The updated one Support : Null safety & Support 9 items on Tabs & Some Color, Size, Effects and font cu

Ihab Zaidi 2 Oct 8, 2021
Customized 🚀 Bottom Navigation Bar Using Flutter 🐦

Customized ?? Bottom Navigation Bar Using Flutter ??

AmirHossein Bayat 3 Dec 7, 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
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
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 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

Felix Angelov 337 Dec 31, 2022
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

Dennis Krasnov 64 Dec 27, 2022