Nexus/material_3_expressive
2
0
Fork 0
forked from mirrors/material_3_expressive
Code Pull requests Activity
material_3_expressive/packages/navigation_bar_m3e
History
Exact
Emily Pauli 01902f958e Bump package versions to 0.1.1 for multiple components and update m3e_design dependency to ^0.2.1
2025-10-25 22:58:39 +02:00
..
lib Bump versions for navigation_rail_m3e to 0.1.1 and split_button_m3e to 0.2.0; update dependencies and reorder in m3e_collection/pubspec.yaml. 2025-10-23 22:08:37 +02:00
test Add initial configuration, tokens, and widgets for M3E components 2025-10-21 22:15:15 +02:00
CHANGELOG.md Add repository and issue tracker links to pubspec files, initialize changelogs, and update README with package details. 2025-10-23 18:00:30 +02:00
LICENSE Add initial configuration, tokens, and widgets for M3E components 2025-10-21 22:15:15 +02:00
melos_navigation_bar_m3e.iml Add initial configuration, tokens, and widgets for M3E components 2025-10-21 22:15:15 +02:00
pubspec.yaml Bump package versions to 0.1.1 for multiple components and update m3e_design dependency to ^0.2.1 2025-10-25 22:58:39 +02:00
pubspec_overrides.yaml Add dependency overrides for local packages in pubspec_overrides.yaml 2025-10-25 22:58:23 +02:00
README.md Remove unused dynamic field lookup and redundant utility methods; clean up pubspec dependency paths and update READMEs with detailed package guides. 2025-10-23 18:12:39 +02:00

README.md

navigation_bar_m3e

Material 3 Expressive Navigation Bar for Flutter with badges, pill/underline indicators, and token-driven styling.

  • NavigationBarM3E — wrapper around Flutter's NavigationBar with M3E tokens
  • NavigationDestinationM3E — destination data (icon, selectedIcon, label, badge)
  • NavBadgeM3E — small badge/dot utility for icons

All styling is driven by the m3e_design ThemeExtension (M3ETheme).

Monorepo Layout

packages/
  m3e_design/
  navigation_bar_m3e/

pubspec.yaml references ../m3e_design.

Usage

import 'package:navigation_bar_m3e/navigation_bar_m3e.dart';

final items = [
  const NavigationDestinationM3E(
    icon: Icon(Icons.home_outlined),
    selectedIcon: Icon(Icons.home),
    label: 'Home',
  ),
  const NavigationDestinationM3E(
    icon: Icon(Icons.search),
    label: 'Search',
    badgeCount: 3,
  ),
  const NavigationDestinationM3E(
    icon: Icon(Icons.person),
    label: 'Profile',
    badgeDot: true,
  ),
];

NavigationBarM3E(
  destinations: items,
  selectedIndex: 0,
  onDestinationSelected: (i) {},
  labelBehavior: NavBarM3ELabelBehavior.onlySelected,
  indicatorStyle: NavBarM3EIndicatorStyle.pill, // pill | underline | none
  size: NavBarM3ESize.medium,
  density: NavBarM3EDensity.regular,
  shapeFamily: NavBarM3EShapeFamily.round,
);

Tokens mapping

  • Container: surfaceContainerHigh
  • Indicator: secondaryContainer (color), pill shape by default; underline style uses a bottom border
  • Selected: onSecondaryContainer (icon/label)
  • Unselected: onSurfaceVariant
  • Label style: labelMedium
  • Heights: small ≈64dp, medium ≈80dp
  • Icon size: 24dp

Badges

Use badgeCount for numeric badges or badgeDot: true for a small dot. Colors default to errorContainer / onErrorContainer and can be overridden via NavBadgeM3E.

Accessibility

  • Provide semanticLabel per destination (used as tooltip) or on the bar.
  • Label behavior options: alwaysShow, onlySelected, or alwaysHide.

License

MIT

Live demo (Gallery)

Explore this component in the M3E Gallery (GitHub Pages):

https://.github.io/material_3_expressive/

To run the Gallery locally:

cd apps/gallery
flutter run -d chrome

Last updated: 2025-10-23

Detailed Guide

What this package provides

NavigationBarM3E with M3E tokens for colors and shapes, badges, and adaptive layout behavior.

Installation

  • Monorepo (local path): already configured alongside m3e_design.
  • Pub (when published):
dependencies:
  navigation_bar_m3e: ^0.1.0
  m3e_design: ^0.1.0

Minimum SDK: Dart >=3.5.0; Flutter >=3.22.0.

Dependencies

  • flutter
  • m3e_design

Quick start

int index = 0;

NavigationBarM3E(
  selectedIndex: index,
  onDestinationSelected: (i) => setState(() => index = i),
  destinations: const [
    NavigationDestinationM3E(icon: Icon(Icons.home), label: 'Home'),
    NavigationDestinationM3E(icon: Icon(Icons.search), label: 'Search'),
    NavigationDestinationM3E(icon: Icon(Icons.person), label: 'Profile'),
  ],
)

Key parameters

  • destinations: List — Destinations to render.
  • selectedIndex: int — Current selection.
  • onDestinationSelected: ValueChanged — Selection callback.
  • badgeBuilder / badgeCount: Optional badges per destination.
  • backgroundColor / indicatorColor: Color? — Override token-driven colors.
  • height / labelBehavior: Layout tweaks.

Theming with m3e_design

Colors/shape/typography adapt from the active M3ETheme extension.

Accessibility

  • Labels visible or via semantics; badges have semantics descriptions.

Links