Navigation Bar Custom

The Navigation Bar Custom provides a container for creating a completely custom navigation bar using NavigationBarItemCustom widgets as children.

Use Cases

Use Navigation Bar Custom when you want to:

• Build a unique bottom bar design

  • Floating center button (like a big “+” action)

  • Curved or elevated navbar with special shapes

  • Custom backgrounds, gradients, blur, or shadows

• Mix navigation + primary actions

  • 2–3 tabs plus one big central action (e.g., “Scan”, “Create”, “Post”)

  • Custom layouts like left-aligned items + one highlighted CTA

• Brand-heavy or theme-specific UI

  • Highly branded nav for fintech, gaming, or social apps

  • Icon-only nav, text-only nav, or fully custom widgets as items

Core Concepts

1. You Control the Layout

   • Instead of fixed icon+label items, you can place any widgets inside: icons, text, avatars, custom buttons, badges, etc.

   • You define the arrangement: equal spacing, centered button, asymmetrical layout, etc.

2. Manual State Handling

   • You typically manage the active tab or selected state yourself (e.g., activeIndex).

   • Taps on your custom items must explicitly:

     • Update the selected index

     • Trigger navigation or screen change

3. Custom Interaction Patterns

   • You can add:

     • Long-press behaviors

     • Double-tap shortcuts

     • Special animations on selection (scale, color change, glow)

4. Same Role, More Freedom

   • Functionally, it still acts as the primary navigation for the app.

   • Visually and structurally, you get much more freedom than the standard Navigation Bar.

Properties

Property	Description
backgroundColor	The background color of the navigation bar.
height	The height of the navigation bar.
surfaceTintColor	The surface tint color of the navigation bar.
indicatorColor	The color of the indicator that highlights the selected item.
indicatorShape	The shape of the indicator.
overlayColor	The color of the overlay that appears when an item is tapped.
animationDuration	The duration of the animation when switching between items.
borderRadius	The corner radius of the navigation bar.

Children of Navigation Bar Custom

Slot	Description
children	Multiple Navigation Bar Item Custom widgets that represent each custom tab/section in the navigation bar.

When to Use Navigation Bar vs Navigation Bar Custom

Use Navigation Bar when:

• You need a standard bottom navigation with icon + label items

• Each tab has a simple icon/image and optional text label

• You want built-in selected/unselected state styling

• Your design follows common Material Design patterns

Use Navigation Bar Custom when:

• You need complete control over the navigation bar layout

• You want custom shapes, backgrounds, or unique item designs

• You're implementing a floating center button or asymmetrical layout

• Your brand requires highly customized navigation styling

Default Properties

The Navigation Bar Custom widget supports the following sections of Default Properties:

Visibility

• visible