Animated Bottom Navigation #

A customizable Flutter package for creating a bottom navigation bar with elegant animations, supporting nested child items, RTL/LTR layouts, and intuitive interactions.

Features #

• Smooth Animations: Elegant slide and rotate animations for item selection and child expansion.
• Nested Child Items: Support for expandable sub-items (2–5 children per item).
• RTL/LTR Support: Seamless adaptation to right-to-left and left-to-right layouts.
• Tap Outside to Close: Close the selected item or expanded children by tapping outside the navigation bar.
• Back Button Support: Close the menu when the device's back button is pressed.
• Customizable Appearance: Control colors, sizes, margins, and border radius for a tailored look.

Getting Started #

Installation #

Add the package to your pubspec.yaml:

dependencies:
  animated_bottom_navigation: ^latest_version

Run the following to install:

flutter pub get

Usage #

Wrap your Scaffold with the AnimatedBottomNavigation widget and configure it with a list of TabItem objects. Each TabItem can have optional child items (TabChildrenItem) for nested menus.

import 'package:animated_bottom_navigation/animated_bottom_navigation.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        bottomNavigationBar: AnimatedBottomNavigation(
          context: context,
          items: [
            TabItem(
              icon: const Icon(Icons.hive_sharp),
              haveChildren: true,
              activeColor: Colors.white,
              inActiveColor: Colors.white60,
              children: [
                TabChildrenItem(
                  icon: const Icon(Icons.call),
                  title: 'Call',
                  onTap: () {},
                ),
                TabChildrenItem(
                  icon: const Icon(Icons.photo_rounded),
                  title: 'Gallery',
                  onTap: () {},
                ),
                TabChildrenItem(
                  icon: const Icon(Icons.add_road),
                  onTap: () {},
                ),
              ],
            ),
            TabItem(
              icon: const Icon(Icons.library_add),
              haveChildren: true,
              activeColor: Colors.white,
              inActiveColor: Colors.white60,
              children: [
                TabChildrenItem(
                  icon: const Icon(Icons.add_a_photo),
                  onTap: () {},
                ),
                TabChildrenItem(
                  icon: const Icon(Icons.get_app),
                  onTap: () {},
                ),
                TabChildrenItem(
                  icon: const Icon(Icons.settings),
                  onTap: () {},
                ),
              ],
            ),
            TabItem(
              icon: const Icon(Icons.bookmark),
              activeColor: Colors.white,
              inActiveColor: Colors.white60,
            ),
            TabItem(
              icon: const Icon(Icons.camera_alt_rounded),
              haveChildren: true,
              activeColor: Colors.white,
              inActiveColor: Colors.white60,
              children: [
                TabChildrenItem(
                  icon: const Icon(Icons.timer_10_select_rounded),
                  onTap: () {},
                ),
                TabChildrenItem(
                  icon: const Icon(Icons.phone_iphone_rounded),
                  onTap: () {},
                ),
                TabChildrenItem(
                  icon: const Icon(Icons.alarm),
                  onTap: () {},
                ),
                TabChildrenItem(
                  icon: const Icon(Icons.color_lens),
                  onTap: () {},
                ),
              ],
            ),
          ],
          onChanged: (index) {
            print('Selected tab: $index');
          },
        ),
        body: Container(color: Colors.blueAccent),
      ),
    );
  }
}

Attributes #

TabItem and TabChildrenItem #

• TabItem: Defines a navigation item with an icon, optional children, and colors for active/inactive states.
  • haveChildren: Set to true to enable child items (2–5 children allowed).
  • activeColor / inActiveColor: Colors for selected and unselected states.
• TabChildrenItem: Defines a child item with an icon, optional title, and onTap callback.

Notes #

• Ensure items list is not empty.
• For items with children, provide 2–5 TabChildrenItem instances.
• Tapping outside the navigation bar or pressing the back button closes the selected item and any expanded children.
• Test RTL layouts for languages like Persian or Arabic to ensure proper animation direction.

Contributing #

Contributions are welcome! Feel free to open issues or submit pull requests on the GitHub repository.

1. Fork the repository.
2. Create a feature branch (git checkout -b feature/YourFeature).
3. Commit your changes (git commit -m 'Add YourFeature').
4. Push to the branch (git push origin feature/YourFeature).
5. Open a pull request.

License #

This package is licensed under the MIT License.

© 2025 Sajad Ghorbani. Built with Flutter.