Skip to main content

Navigation

Navigation should feel native and unobtrusive, keeping the focus on content rather than chrome.

Navigation & Filter Chips​

For in-page navigation (switching between views/filters within a page), use FilterChip instead of traditional tabs or custom pill buttons.

Standard FilterChip Style​

  • Use Flutter's built-in FilterChip component
  • Horizontal scrollable list for multiple options
  • Spacing: 8 pt between chips
  • Container padding: 16 pt horizontal, 8 pt vertical
  • Selected state: Uses theme's primaryContainer color
  • Unselected state: Uses theme's surfaceContainerHighest color

When to Use FilterChips​

  • Page-level navigation (e.g., Clubs/Challenges on Read page)
  • Content filtering (e.g., All/Following/Local on Share feed)
  • View switching (e.g., Account/Preferences in Settings)
  • Search type filtering

Why FilterChips Over TabBar​

  • More flexible and scrollable for many options
  • Cleaner, modern appearance aligned with bookish aesthetic
  • Consistent with Material Design 3
  • Avoids harsh tab indicators that feel too corporate

Implementation​

Use the BwFilterChips reusable component for consistency:

BwFilterChips<FeedScope>(
  options: [
    FilterOption(value: FeedScope.all, label: 'All'),
    FilterOption(value: FeedScope.following, label: 'Following'),
    FilterOption(value: FeedScope.local, label: 'Local'),
  ],
  selected: currentScope,
  onChanged: (scope) => updateScope(scope),
)

Flutter Component​

Flutter should define:

  • BwFilterChips – consistent FilterChip navigation for in-page switching

Top-Level Navigation​

For main app navigation:

  • Use platform-native navigation patterns (bottom navigation on mobile, side navigation on desktop)
  • Keep icons simple and meaningful (prefer CupertinoIcons or SF-style icons)
  • Use Ink Blue (#233548) for active state
  • Maintain consistent spacing and touch targets (minimum 44pt)

Typography​

Navigation elements should use sans-serif typography:

  • AppTypography.label (16pt, w500) for navigation labels
  • AppTypography.labelSmall (14pt, w500) for secondary navigation