animated_navigation_bar 0.0.2
animated_navigation_bar: ^0.0.2 copied to clipboard

A stylish and customizable bottom navigation bar with animations

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.

2
likes
110
pub points
4%
popularity

A stylish and customizable bottom navigation bar with animations

Repository (GitHub)
View/report issues

Documentation

API reference

Uploader

bouikkenmajid@gmail.com

License

BSD (LICENSE)

Dependencies

flutter

More

Packages that depend on animated_navigation_bar