Navigation Bar Item Custom

The Navigation Bar Item Custom allows you to create a fully custom navigation item using any widget as its child. This provides maximum flexibility for designing unique navigation bars.

Use Cases

Use Custom Navigation Bar Item when you want to:

• Design non-standard tab items

  • Big rounded middle button (primary action like “Create”, “Scan”, “Post”)

  • Icon-only or text-only items

  • Avatar-based profile tab, or pill-shaped selected tab

• Add rich content in a nav item

  • Badge with count, status dot, label + subtitle

  • Animated icon, Lottie, or micro-interaction on tap

• Match strong brand or UX patterns

  • Gaming, fintech, or social apps with very specific nav designs

  • Highly stylized nav where standard Navigation Bar Item isn’t enough

Core Concepts

1. Free Layout Per Item

   • Each custom item can be any widget tree: Row, Column, Stack, avatar, text, icon, etc.

   • You decide padding, shape, background, shadows, and animations.

2. Manual Active State

   • You typically pass in something like isActive or compare with an activeIndex.

   • Based on this, you change:

     • Colors (active vs inactive)

     • Size, background, icon style, etc.

3. Explicit Actions & Navigation

   • Each item handles its own onTap or action.

   • Tapping:

     • Updates the selected tab (index/state)

     • Navigates to the target screen or triggers a special action (e.g., open sheet, show modal).

4. Same Purpose, Customized Experience

   • Still represents a primary section or key action, just with full visual and interaction control compared to standard nav items.

Properties

Property	Description
showIf	If false, this item will not be displayed in the navigation bar.
onSelect	An action to perform when this item is selected.

Children of Navigation Bar Item Custom

Slot	Description
child	A single custom child widget that represents the navigation item. Can be any widget (Row, Column, Stack, etc.) for complete design freedom.

When to Use Navigation Bar Item vs Navigation Bar Item Custom

Use Navigation Bar Item when:

• You need a standard tab with icon + text label

• Selected/unselected states use different icons or images

• You want automatic state management for active/inactive appearance

• Your design follows typical navigation patterns

Use Navigation Bar Item Custom when:

• You need complete layout freedom for the navigation item

• You want to add badges, avatars, or complex widget combinations

• You need custom animations or interactions on tap

• Standard icon + label layout doesn't match your design needs

Default Properties

The Navigation Bar Item Custom widget does not have standard default properties. Its appearance is controlled by the custom child widget.