The Flutter Navigation Bar That Made Me Stop Compromising on UI

If you have worked with Flutter for a while, you probably know this feeling.

You find a package that looks almost perfect.

You install it, start configuring it, and then discover that the one thing you need to change does not exist.

Then you will probably think about forking the package and modifying it to work your way. But the sad part is, no one has the time to do that everytime, because Everyone is on the clock and deadlines.

That happened to me while working on a project at Foxiom Leads Pvt. Ltd.

We needed a modern curved bottom navigation bar with smooth animations, a moving notch, and a floating action button. Existing packages looked good, but they became difficult to adapt once we needed control over spacing, positioning, animation, colours, and icons.

I didn’t want to compromise the design.

So I had to built my own.

Period after period that widget eventually became so good which forced me to publish it as a package

Try curved_navigation_bar_pro on pub.dev →

The idea behind the package

Don’t make your UI adapt to the package. Make the package adapt to your UI.

Sample usage of this super widget

When a user changes tabs, the notch smoothly moves to the selected item while the FAB bubble uses an elastic animation.

The result feels more connected than simply changing an icon or colour.

The animation duration and curve are also configurable, so you can make the interaction feel fast and responsive or slower and more relaxed.

A simple API

The basic implementation is intentionally small:

CurvedNavigationBarPro(
  items: const [
    CurvedNavigationItemPro(
      inactiveIcon: Icons.home_outlined,
      activeIcon: Icons.home_rounded,
      label: 'Home',
    ),
    CurvedNavigationItemPro(
      inactiveIcon: Icons.favorite_outline,
      activeIcon: Icons.favorite_rounded,
      label: 'Saved',
    ),
    CurvedNavigationItemPro(
      inactiveIcon: Icons.person_outline_rounded,
      activeIcon: Icons.person_rounded,
      label: 'Profile',
    ),
  ],
  currentIndex: _index,
  onTap: (i) => setState(() => _index = i),
)

That is enough to get started.

The flexibility comes when you need more control.

Customise the details

You can adjust the parts that usually become limitations in other packages:

• Bar height
• FAB radius and position
• Notch gap and shoulder radius
• Corner radius
• Content padding
• Elevation and shadow
• Active and inactive colours
• Icon and text sizes
• Animation duration and curve
• Labels and styles

For example:

CurvedNavigationBarPro(
  items: myItems,
  currentIndex: _index,
  onTap: (i) => setState(() => _index = i),
  backgroundColor: Colors.white,
  activeColor: Colors.indigo,
  activeIconColor: Colors.white,
  inactiveColor: const Color(0xFFADB5BD),
  fabColor: Colors.indigo,
  barHeight: 110,
  fabRadius: 28,
  fabGap: 10,
  fabSink: 22,
  notchShoulderRadius: 12,
  cornerRadius: 16,
  elevation: 14,
  animationDuration: const Duration(milliseconds: 400),
  animationCurve: Curves.easeInOutCubic,
)

The same widget can look completely different depending on how you configure it.

Start with a preset

If you don’t want to tune every property manually, the package includes ready-made styles.

There are currently 10 presets, including:

• Classic Indigo
• Deep Space Dark
• Rounded Coral
• Minimal Mono
• Emerald Pill
• Royal Amethyst
• Arctic Frost
• Berry Blossom
• Golden Hour

CurvedNavigationBarPro(
  items: myItems,
  currentIndex: _index,
  onTap: (i) => setState(() => _index = i),
  navbarStyle: CNBPStyles.goldenHour,
)

Presets are starting points, not restrictions. You can still override individual properties:

CurvedNavigationBarPro(
  items: myItems,
  currentIndex: _index,
  onTap: (i) => setState(() => _index = i),
  navbarStyle: CNBPStyles.berryBlossom,
  fabRadius: 32,
)

Use more than standard icons

Navigation items can use IconData, but they are not limited to it.

Get Aslamambiloly’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

You can use SVGs, images, Lottie animations, or any custom Flutter widget.

For example:

CurvedNavigationItemPro(
  activeWidget: Lottie.asset(
    'lotties/cart.json',
    repeat: false,
    width: 25,
  ),
  inactiveWidget: Lottie.asset(
    'lotties/cart.json',
    repeat: false,
    animate: false,
    width: 25,
  ),
  label: 'Cart',
)

You can also use SVG assets:

CurvedNavigationItemPro(
  activeWidget: SvgPicture.asset(
    'assets/profile_fill.svg',
    width: 25,
  ),
  inactiveWidget: SvgPicture.asset(
    'assets/profile.svg',
    width: 25,
  ),
  label: 'Profile',
)

This makes it easier to match a custom design system instead of forcing your app to use a specific icon set.

Add badges when you need them

Badges are useful for messages, notifications, carts, and other sections that need attention.

CurvedNavigationItemPro(
  inactiveIcon: Icons.mail_outline,
  activeIcon: Icons.mail_rounded,
  label: 'Messages',
  badgeText: '3',
)

You can use values such as 3, 99+, or •, or provide your own badge widget for a completely custom design.

Lightweight by design

The package currently depends only on Flutter, so it can be added without introducing a large dependency tree.

Add it to your pubspec.yaml:

dependencies:
  curved_navigation_bar_pro: ^2.1.1

Then run:

flutter pub get

Why build another navigation package?

There are already many navigation bar packages on pub.dev. I built this one because I needed to make decisions such as:

“I want the notch here.”

“I want the FAB to sink slightly more.”

“I want this animation curve.”

“I want different active and inactive widgets.”

“I want badges.”

“I want this exact corner radius.”

I didn’t want to modify package source code every time the design changed. So I built the component around customisation from the beginning.

From a project requirement to an open-source package

This started as a small requirement inside a project at Foxiom.

I needed a component, couldn’t find one with the flexibility I wanted, and built it myself.

After cleaning it up, adding documentation, presets, custom widgets, badges, and animation controls, I decided to publish it for other Flutter developers.

That is how curved_navigation_bar_pro came to life.

Give it a try

If you are building a Flutter app and need a curved bottom navigation bar that can adapt to your design, check it out:

View curved_navigation_bar_pro on pub.dev →

If you use it, I would love to see what you build.

And if something is missing, open an issue or share your feedback. Open-source packages improve when developers use them and explain what they need next.

I originally built this package because I couldn’t find the flexibility I wanted.

Now I’m curious to see what you create with it.

Maybe the next navigation bar I see built with curved_navigation_bar_pro will be yours.

Happy Fluttering :)

Get curved_navigation_bar_pro on pub.dev →

#Flutter #Dart #FlutterPackages #FlutterDev #PubDev #OpenSource #NavigationBar #FlutterUI #Animation #MobileDevelopment