mirrors/material_3_expressive
1
0
Fork 1
Code Issues Pull requests Projects Releases Packages Wiki 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,