inkblob_navigation_bar

Inkblob_navigation_bar

A custom navigation bar with smooth & dynamic ink blob transition effect.

Overview

This packages was inspired by this post from Dribbble

Implemented:

Gallery

Dynamic Movement

Customizable Curve

Custom Colors

Optional Titles

Works with any widgets

How to install

Simply add the package to your dependencies! No other steps required :)

Documentation

To use the InkblobNavigationBar you can simply use it in the bottomNavigationBar field of your material scaffold:

Scaffold(
  ...
  bottomNavigationBar: InkblobNavigationBar(
    ...
  )
)

You can customize these attributes in the navigation bar.

Attention: Both the selectedIndex and previousIndex are required for the animation to perform, an example of how to implement this is shown in the provided example app.

To customize the items in the navigation bar, just supply a list of InkblobBarItem like this.

InkblobNavigationBar(
  ...
  items: [
    // Simple Icon with a Title & Color
    InkblobBarItem(
      title: const Text('User'),
      filledIcon: const Icon(SpiriIcons.fi_sr_user),
      emptyIcon: const Icon(SpiriIcons.fi_rr_user),
      color: Colors.blue,
    ),
    // Custom Containers
    InkblobBarItem(
      filledIcon: Container(
        decoration: BoxDecoration(
          color: Colors.black,
          borderRadius: BorderRadius.circular(12),
        ),
      ),
      emptyIcon: Container(
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(12),
          border: Border.all(color: Colors.black, width: 2),
        ),
      ),
    ),
    // Even Text Widgets
    InkblobBarItem(
      filledIcon: const Text('❤️', style: TextStyle(fontSize: 20)),
      emptyIcon: const Text('🖤', style: TextStyle(fontSize: 20)),
      color: Colors.red,
    ),
  ],
)

Example

Check the example app for a full implementation example.

Contribute

Issues and pull requests are always welcome!
If you found this project helpful, consider buying me a cup of :coffee:

• PayPal