mirrors/material_3_expressive
1
0
Fork 1
Code Issues Pull requests Projects Releases Packages Wiki Activity

Update NavigationRailM3E implementation; update FAB and navigation sections to adapt to changes.

Browse source
This commit is contained in:
Emily Pauli 2025-10-23 12:31:46 +02:00
commit 83f5a02943
49 changed files with 1651 additions and 661 deletions
Download patch file Download diff file Expand all files Collapse all files

3
apps/gallery/lib/main.dart
View file

@ -42,9 +42,6 @@ class _GalleryHomeState extends State<GalleryHome> {
@override
Widget build(BuildContext context) {
final cs = Theme.of(context).colorScheme;
final m3e =
Theme.of(context).extension<M3ETheme>() ?? M3ETheme.defaults(cs);
return Scaffold(
appBar: AppBarM3E(
titleText: 'M3E Gallery',

7
apps/gallery/lib/sections/fab_section.dart
View file

@ -28,6 +28,13 @@ class FabSection extends StatelessWidget {
kind: kind,
size: size,
onPressed: onPressed),
for (final size in FabM3ESize.values)
FabM3E(
icon: const Icon(Icons.add),
kind: FabM3EKind.primary,
size: size,
shapeFamily: FabM3EShapeFamily.square,
onPressed: onPressed),
],
),
const SizedBox(height: 12),

186
apps/gallery/lib/sections/navigation_section.dart
View file

@ -14,6 +14,38 @@ class _NavigationSectionState extends State<NavigationSection> {
int _barIndex = 0;
int _railIndex = 0;
// Controls for the rail demo
NavigationRailM3EType _railType = NavigationRailM3EType.expanded;
NavigationRailM3EModality _modality = NavigationRailM3EModality.standard;
bool _hideWhenCollapsed = false;
double _navigationBarWidth = 450;
List<NavigationRailM3ESection> get _railSections => const [
NavigationRailM3ESection(
header: Text('Main'),
destinations: [
NavigationRailM3EDestination(
icon: Icon(Icons.dashboard_outlined),
selectedIcon: Icon(Icons.dashboard),
label: 'Dash',
),
NavigationRailM3EDestination(
icon: Icon(Icons.analytics_outlined),
selectedIcon: Icon(Icons.analytics),
label: 'Reports',
smallBadge: true,
),
NavigationRailM3EDestination(
icon: Icon(Icons.settings_outlined),
selectedIcon: Icon(Icons.settings),
label: 'Settings',
largeBadgeCount: 2,
),
],
),
];
@override
Widget build(BuildContext context) {
final theme = Theme.of(context);
@ -31,44 +63,48 @@ class _NavigationSectionState extends State<NavigationSection> {
),
Wrap(
runSpacing: 12,
spacing: 12,
children: [
for (final style in NavBarM3EIndicatorStyle.values)
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.only(bottom: 4),
child: Text('indicator: ${style.name}',
style: theme.textTheme.labelLarge),
),
NavigationBarM3E(
selectedIndex: _barIndex,
onDestinationSelected: (i) =>
setState(() => _barIndex = i),
indicatorStyle: style,
destinations: const [
NavigationDestinationM3E(
icon: Icon(Icons.home_outlined),
selectedIcon: Icon(Icons.home),
label: 'Home'),
NavigationDestinationM3E(
icon: Icon(Icons.search_outlined),
selectedIcon: Icon(Icons.search),
label: 'Search',
badgeDot: true),
NavigationDestinationM3E(
icon: Icon(Icons.favorite_outline),
selectedIcon: Icon(Icons.favorite),
label: 'Favorites',
badgeCount: 2),
NavigationDestinationM3E(
icon: Icon(Icons.person_outline),
selectedIcon: Icon(Icons.person),
label: 'Profile'),
],
),
const SizedBox(height: 8),
],
SizedBox(
width: _navigationBarWidth,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.only(bottom: 4),
child: Text('indicator: ${style.name}',
style: theme.textTheme.labelLarge),
),
NavigationBarM3E(
selectedIndex: _barIndex,
onDestinationSelected: (i) =>
setState(() => _barIndex = i),
indicatorStyle: style,
destinations: const [
NavigationDestinationM3E(
icon: Icon(Icons.home_outlined),
selectedIcon: Icon(Icons.home),
label: 'Home'),
NavigationDestinationM3E(
icon: Icon(Icons.search_outlined),
selectedIcon: Icon(Icons.search),
label: 'Search',
badgeDot: true),
NavigationDestinationM3E(
icon: Icon(Icons.favorite_outline),
selectedIcon: Icon(Icons.favorite),
label: 'Favorites',
badgeCount: 2),
NavigationDestinationM3E(
icon: Icon(Icons.person_outline),
selectedIcon: Icon(Icons.person),
label: 'Profile'),
],
),
const SizedBox(height: 8),
],
),
),
],
),
@ -77,37 +113,69 @@ class _NavigationSectionState extends State<NavigationSection> {
padding: const EdgeInsets.symmetric(vertical: 8),
child: Text('Navigation Rail', style: theme.textTheme.titleMedium),
),
// Options for the rail demo (e.g., modality)
Wrap(
spacing: 12,
runSpacing: 8,
crossAxisAlignment: WrapCrossAlignment.center,
children: [
Row(
mainAxisSize: MainAxisSize.min,
children: [
Text('Modality:', style: theme.textTheme.labelLarge),
const SizedBox(width: 8),
DropdownButton<NavigationRailM3EModality>(
value: _modality,
onChanged: (v) => setState(() => _modality = v!),
items: NavigationRailM3EModality.values
.map((m) => DropdownMenuItem(
value: m,
child: Text(m.name),
))
.toList(),
),
],
),
Row(
mainAxisSize: MainAxisSize.min,
children: [
Text('Hide when collapsed',
style: theme.textTheme.labelLarge),
Switch(
value: _hideWhenCollapsed,
onChanged: (v) => setState(() => _hideWhenCollapsed = v),
),
],
),
],
),
const SizedBox(height: 8),
Container(
decoration: BoxDecoration(
color: theme.colorScheme.surfaceContainerHighest,
borderRadius: m3e.shapes.round.lg,
),
height: 220,
height: 600,
child: Row(
children: [
for (final style in RailIndicatorStyle.values) ...[
NavigationRailM3E(
selectedIndex: _railIndex,
onDestinationSelected: (i) =>
setState(() => _railIndex = i),
indicatorStyle: style,
destinations: const [
RailDestinationM3E(
icon: Icon(Icons.dashboard_outlined),
selectedIcon: Icon(Icons.dashboard),
label: 'Dash'),
RailDestinationM3E(
icon: Icon(Icons.analytics_outlined),
selectedIcon: Icon(Icons.analytics),
label: 'Reports'),
RailDestinationM3E(
icon: Icon(Icons.settings_outlined),
selectedIcon: Icon(Icons.settings),
label: 'Settings'),
],
NavigationRailM3E(
type: _railType,
modality: _modality,
sections: _railSections,
selectedIndex: _railIndex,
onDestinationSelected: (i) => setState(() => _railIndex = i),
onTypeChanged: (t) => setState(() => _railType = t),
fab: NavigationRailM3EFabSlot(
icon: const Icon(Icons.add),
label: 'New',
onPressed: () {},
),
const VerticalDivider(width: 1),
],
hideWhenCollapsed: _hideWhenCollapsed,
onDismissModal: () => setState(
() => _modality = NavigationRailM3EModality.standard,
),
),
const VerticalDivider(width: 1),
Expanded(
child: Center(child: Text('Selected: $_railIndex')),
),

30
apps/gallery/pubspec_overrides.yaml
View file

@ -1,30 +0,0 @@
# melos_managed_dependency_overrides: icon_button_m3e,m3e_collection,m3e_design,split_button_m3e,app_bar_m3e,button_group_m3e,button_m3e,fab_m3e,loading_indicator_m3e,navigation_bar_m3e,navigation_rail_m3e,progress_indicator_m3e,slider_m3e,toolbar_m3e
dependency_overrides:
app_bar_m3e:
path: ..\\..\\packages\\app_bar_m3e
button_group_m3e:
path: ..\\..\\packages\\button_group_m3e
button_m3e:
path: ..\\..\\packages\\button_m3e
fab_m3e:
path: ..\\..\\packages\\fab_m3e
icon_button_m3e:
path: ..\\..\\packages\\icon_button_m3e
loading_indicator_m3e:
path: ..\\..\\packages\\loading_indicator_m3e
m3e_collection:
path: ..\\..\\packages\\m3e_collection
m3e_design:
path: ..\\..\\packages\\m3e_design
navigation_bar_m3e:
path: ..\\..\\packages\\navigation_bar_m3e
navigation_rail_m3e:
path: ..\\..\\packages\\navigation_rail_m3e
progress_indicator_m3e:
path: ..\\..\\packages\\progress_indicator_m3e
slider_m3e:
path: ..\\..\\packages\\slider_m3e
split_button_m3e:
path: ..\\..\\packages\\split_button_m3e
toolbar_m3e:
path: ..\\..\\packages\\toolbar_m3e