Search packages, repositories and app categories

ducafecatFlutter ecosystem guide
Package detailsv0.0.1

navigation_action_bar

A beautiful modern Navigation Bar along with a Floating Action Bar.

pub.dev API documentation Source code
30-day downloads
11
Likes
36
Pub points
40

Install package

flutter pub add navigation_action_bar

Package Overview

Package selection guidance compiled from public package information, community data, and project usage.

A modern, visually appealing Navigation Bar paired with a Floating Action Bar, designed to enhance user navigation in Flutter applications. It offers a clean, customizable interface that aligns with contemporary design trends. The package supports smooth transitions and intuitive interaction patterns, making it ideal for apps requiring clear navigation paths and prominent action triggers. Built with Flutter's widget system, it integrates seamlessly into existing projects.

Use cases

  • Mobile app navigation
  • Bottom navigation with FAB
  • Modern UI design
  • App dashboard layout
  • User onboarding flows

Key features

  • Customizable navigation items
  • Floating Action Button integration
  • Smooth animations
  • Responsive design
  • Easy theme customization

Suitable for

  • Flutter beginners
  • UI-focused developers
  • Material Design enthusiasts
  • Apps with tab-based navigation
  • Projects needing polished bottom bars

Considerations

  • Limited platform-specific behavior
  • No built-in state management
  • Requires manual handling of route changes
  • Not optimized for complex nested navigation
  • Minimal documentation available

Original README

Original README snapshot from the linked source repository. Visit the repository for the latest content.

Navigation Action Bar

A flutter package for a beautiful modern Navigation Bar along with a Floating Action Bar


Table of contents

Installing

1. Depend on it

Add this to your package's pubspec.yaml file:

dependencies:
  navigation_action_bar: ^0.0.1
2. Install it

You can install packages from the command line:

with pub:

$ pub get

with Flutter:

$ flutter packages get
3. Import it

Now in your Dart code, you can use:

import 'package:navigation_action_bar/navigation_action_bar.dart';

Usage

    Scaffold(
      bottomNavigationBar: NavigationActionBar(
        context: context,
        scaffoldColor: Colors.blueAccent,
        index: 0,
        subItems: [
          NavBarItem(iconData: Icons.attach_file, size: 25),
          NavBarItem(iconData: Icons.photo, size: 25),
          NavBarItem(iconData: Icons.camera_alt, size: 25),
        ],
        mainIndex: 2,
        items: [
          NavBarItem(iconData: Icons.list, size: 30),
          NavBarItem(iconData: Icons.compare_arrows, size: 30),
          NavBarItem(iconData: Icons.add, size: 40),
          NavBarItem(iconData: Icons.call_merge, size: 30),
          NavBarItem(iconData: Icons.person, size: 30),
        ],
        onTap: (index) {
          setState(() {
            currentIndex = index;
          });
        },
      )

Attributes

Dart attribute Datatype Description Default Value
index int Specifies the index of the tab which needs to be open initially 0
mainIndex int Specifies the index where the Rotating Button should be placed @required
items List<NavBarItem> The list of widgets which are to be displayed in the Navigation Bar @required
subItems List<NavBarItem> The list of widgets which are to be displayed in Action Bar @required
scaffoldColor Color The color of the scaffold Colors.blueAccent
backgroundColor Color The background color of Navigation Bar Colors.white
animationCurve AnimationCurve Specifies the type of animation curve used by action buttons Curves.bounceOut
animationDuration Duration Specifies how long the animation will last 300 Milliseconds

License

Navigation_Action_Bar is licensed under MIT license. View license.

Categories

Bottom Navigation Bar

Source repository

Projects using this package

No data available yet.