Nexus/material_3_expressive
2
0
Fork 0
forked from mirrors/material_3_expressive
Code Pull requests Activity

Refactor progress indicators to use stateful widgets, enhance animation control, and remove unnecessary subtitles in section cards

Browse source
This commit is contained in:
Emily Pauli 2025-10-22 18:12:54 +02:00
commit b4ccdd7750
11 changed files with 316 additions and 130 deletions
Download patch file Download diff file Expand all files Collapse all files

2
apps/gallery/lib/sections/button_section.dart
View file

@ -10,8 +10,6 @@ class ButtonSection extends StatelessWidget {
Widget build(BuildContext context) {
return SectionCard(
title: 'ButtonM3E',
subtitle:
'Generated from enums: variant × size; grouped by shape family.',
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [

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

@ -14,8 +14,6 @@ class FabSection extends StatelessWidget {
return SectionCard(
title: 'FabM3E',
subtitle:
'Generated from enums: kind × size. Includes Extended FAB examples.',
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [

4
apps/gallery/lib/sections/icon_button_section.dart
View file

@ -10,14 +10,14 @@ class IconButtonSection extends StatelessWidget {
Widget build(BuildContext context) {
return SectionCard(
title: 'IconButtonM3E',
subtitle: 'Generated from enums: variant × size (round shape, default width).',
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
for (final variant in IconButtonM3EVariant.values) ...[
Padding(
padding: const EdgeInsets.symmetric(vertical: 8),
child: Text(variant.name, style: Theme.of(context).textTheme.titleMedium),
child: Text(variant.name,
style: Theme.of(context).textTheme.titleMedium),
),
Wrap(
spacing: 12,

1
apps/gallery/lib/sections/loading_indicator_section.dart
View file

@ -10,7 +10,6 @@ class LoadingIndicatorSection extends StatelessWidget {
Widget build(BuildContext context) {
return SectionCard(
title: 'LoadingIndicatorM3E',
subtitle: 'Generated from enums: variant values.',
child: Wrap(
spacing: 16,
runSpacing: 16,

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

@ -17,11 +17,11 @@ class _NavigationSectionState extends State<NavigationSection> {
@override
Widget build(BuildContext context) {
final theme = Theme.of(context);
final m3e = theme.extension<M3ETheme>() ?? M3ETheme.defaults(theme.colorScheme);
final m3e =
theme.extension<M3ETheme>() ?? M3ETheme.defaults(theme.colorScheme);
return SectionCard(
title: 'Navigation',
subtitle: 'Generated from enums: NavBar indicator styles and Rail indicator styles.',
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
@ -38,17 +38,33 @@ class _NavigationSectionState extends State<NavigationSection> {
children: [
Padding(
padding: const EdgeInsets.only(bottom: 4),
child: Text('indicator: ${style.name}', style: theme.textTheme.labelLarge),
child: Text('indicator: ${style.name}',
style: theme.textTheme.labelLarge),
),
NavigationBarM3E(
selectedIndex: _barIndex,
onDestinationSelected: (i) => setState(() => _barIndex = i),
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'),
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),
@ -72,12 +88,22 @@ class _NavigationSectionState extends State<NavigationSection> {
for (final style in RailIndicatorStyle.values) ...[
NavigationRailM3E(
selectedIndex: _railIndex,
onDestinationSelected: (i) => setState(() => _railIndex = i),
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'),
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'),
],
),
const VerticalDivider(width: 1),

56
apps/gallery/lib/sections/progress_section.dart
View file

@ -3,17 +3,49 @@ import 'package:m3e_collection/m3e_collection.dart';
import 'section_card.dart';
class ProgressSection extends StatelessWidget {
class ProgressSection extends StatefulWidget {
const ProgressSection({super.key});
@override
State<ProgressSection> createState() => _ProgressSectionState();
}
class _ProgressSectionState extends State<ProgressSection>
with SingleTickerProviderStateMixin {
double? _value = 0.6;
late final AnimationController _controller;
@override
void initState() {
super.initState();
_controller = AnimationController(
vsync: this, duration: const Duration(milliseconds: 2400))
..repeat();
_controller.addListener(() {
if (mounted) setState(() {});
});
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return SectionCard(
title: 'ProgressIndicatorM3E',
subtitle: 'Generated from enums: circular sizes and linear variants.',
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('Value: $_value (set 0 for null)'),
SliderM3E(
value: _value ?? 0,
onChanged: (v) => setState(
() => _value = v == 0 ? null : v,
),
),
Padding(
padding: const EdgeInsets.symmetric(vertical: 8),
child: Text('Circular - Wavy',
@ -26,12 +58,12 @@ class ProgressSection extends StatelessWidget {
for (final s in CircularProgressM3ESize.values) ...[
CircularProgressIndicatorM3E(
size: s,
value: 0.4,
value: _value,
shape: ProgressM3EShape.wavy,
),
CircularProgressIndicatorM3E(
size: s,
value: 0.6,
value: _value,
shape: ProgressM3EShape.wavy,
),
],
@ -50,13 +82,13 @@ class ProgressSection extends StatelessWidget {
for (final s in CircularProgressM3ESize.values) ...[
CircularProgressIndicatorM3E(
size: s,
value: 0.4,
value: _value,
shape: ProgressM3EShape.flat,
),
CircularProgressIndicatorM3E(
size: s,
shape: ProgressM3EShape.flat,
value: 0.6,
value: _value,
),
],
],
@ -74,14 +106,16 @@ class ProgressSection extends StatelessWidget {
SizedBox(
width: 250,
child: LinearProgressIndicatorM3E(
value: null,
value: _value,
size: LinearProgressM3ESize.s,
shape: ProgressM3EShape.wavy,
),
),
SizedBox(
width: 250,
child: LinearProgressIndicatorM3E(
value: 0.6,
value: _value,
size: LinearProgressM3ESize.m,
shape: ProgressM3EShape.wavy,
),
),
@ -100,14 +134,16 @@ class ProgressSection extends StatelessWidget {
SizedBox(
width: 250,
child: LinearProgressIndicatorM3E(
value: null,
value: _value,
size: LinearProgressM3ESize.s,
shape: ProgressM3EShape.flat,
),
),
SizedBox(
width: 250,
child: LinearProgressIndicatorM3E(
value: 0.6,
value: _value,
size: LinearProgressM3ESize.m,
shape: ProgressM3EShape.flat,
),
),

64
apps/gallery/lib/sections/slider_section.dart
View file

@ -18,51 +18,49 @@ class _SliderSectionState extends State<SliderSection> {
Widget build(BuildContext context) {
return SectionCard(
title: 'SliderM3E',
subtitle: 'Generated from enums: size × emphasis (round shape).',
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
for (final size in SliderM3ESize.values) ...[
Padding(
padding: const EdgeInsets.symmetric(vertical: 8),
child: Text('size: ${size.name}', style: Theme.of(context).textTheme.titleMedium),
child: Text('size: ${size.name}',
style: Theme.of(context).textTheme.titleMedium),
),
Wrap(
runSpacing: 12,
children: [
for (final emp in SliderM3EEmphasis.values)
Padding(
padding: const EdgeInsets.only(bottom: 8),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('emphasis: ${emp.name}', style: Theme.of(context).textTheme.labelLarge),
SliderM3E(
value: _value,
onChanged: (v) => setState(() => _value = v),
min: 0,
max: 100,
label: _value.toStringAsFixed(0),
size: size,
emphasis: emp,
startIcon: const Icon(Icons.volume_mute),
endIcon: const Icon(Icons.volume_up),
Padding(
padding: const EdgeInsets.only(bottom: 8),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SliderM3E(
value: _value,
onChanged: (v) => setState(() => _value = v),
min: 0,
max: 100,
label: _value.toStringAsFixed(0),
size: size,
emphasis: SliderM3EEmphasis.primary,
startIcon: const Icon(Icons.volume_mute),
endIcon: const Icon(Icons.volume_up),
),
RangeSliderM3E(
values: _range,
onChanged: (v) => setState(() => _range = v),
min: 0,
max: 100,
size: size,
emphasis: SliderM3EEmphasis.primary,
labels: RangeLabels(
_range.start.toStringAsFixed(0),
_range.end.toStringAsFixed(0),
),
RangeSliderM3E(
values: _range,
onChanged: (v) => setState(() => _range = v),
min: 0,
max: 100,
size: size,
emphasis: emp,
labels: RangeLabels(
_range.start.toStringAsFixed(0),
_range.end.toStringAsFixed(0),
),
),
],
),
),
],
),
),
],
),
],

4
apps/gallery/lib/sections/split_button_section.dart
View file

@ -16,14 +16,14 @@ class SplitButtonSection extends StatelessWidget {
return SectionCard(
title: 'SplitButtonM3E',
subtitle: 'Generated from enums: emphasis × size (round shape).',
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
for (final emphasis in SplitButtonM3EEmphasis.values) ...[
Padding(
padding: const EdgeInsets.symmetric(vertical: 8),
child: Text(emphasis.name, style: Theme.of(context).textTheme.titleMedium),
child: Text(emphasis.name,
style: Theme.of(context).textTheme.titleMedium),
),
Wrap(
spacing: 12,

13
apps/gallery/lib/sections/toolbar_section.dart
View file

@ -11,20 +11,25 @@ class ToolbarSection extends StatelessWidget {
final actions = [
ToolbarActionM3E(icon: Icons.search, onPressed: () {}),
ToolbarActionM3E(icon: Icons.share, onPressed: () {}),
ToolbarActionM3E(icon: Icons.delete, onPressed: () {}, isDestructive: true, label: 'Delete'),
ToolbarActionM3E(icon: Icons.settings, onPressed: () {}, label: 'Settings'),
ToolbarActionM3E(
icon: Icons.delete,
onPressed: () {},
isDestructive: true,
label: 'Delete'),
ToolbarActionM3E(
icon: Icons.settings, onPressed: () {}, label: 'Settings'),
];
return SectionCard(
title: 'ToolbarM3E',
subtitle: 'Generated from enums: variant × size (round shape).',
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
for (final variant in ToolbarM3EVariant.values) ...[
Padding(
padding: const EdgeInsets.symmetric(vertical: 8),
child: Text(variant.name, style: Theme.of(context).textTheme.titleMedium),
child: Text(variant.name,
style: Theme.of(context).textTheme.titleMedium),
),
Wrap(
runSpacing: 12,