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

128
packages/progress_indicator_m3e/lib/src/circular_progress_m3e.dart
View file

@ -4,7 +4,7 @@ import 'package:flutter/material.dart';
import 'enums.dart';
class CircularProgressIndicatorM3E extends StatelessWidget {
class CircularProgressIndicatorM3E extends StatefulWidget {
const CircularProgressIndicatorM3E({
super.key,
this.value,
@ -22,13 +22,66 @@ class CircularProgressIndicatorM3E extends StatelessWidget {
final Color? trackColor;
final double rotation;
@override
State<CircularProgressIndicatorM3E> createState() =>
_CircularProgressIndicatorM3EState();
}
class _CircularProgressIndicatorM3EState
extends State<CircularProgressIndicatorM3E>
with SingleTickerProviderStateMixin {
late final AnimationController _controller;
bool get _shouldAnimate {
final v = widget.value;
return widget.shape == ProgressM3EShape.wavy &&
(v == null || (v >= 1.0)) &&
widget.rotation == 0.0;
}
@override
void initState() {
super.initState();
_controller = AnimationController(
vsync: this,
duration: const Duration(milliseconds: 3600),
)..addListener(() {
if (mounted && _shouldAnimate) setState(() {});
});
if (_shouldAnimate) {
_controller.repeat();
}
}
@override
void didUpdateWidget(covariant CircularProgressIndicatorM3E oldWidget) {
super.didUpdateWidget(oldWidget);
if (_shouldAnimate) {
if (!_controller.isAnimating) _controller.repeat();
} else {
if (_controller.isAnimating) _controller.stop();
}
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
final cs = Theme.of(context).colorScheme;
final active = activeColor ?? cs.primary;
final track = trackColor ?? cs.onSurfaceVariant.withOpacity(0.24);
final wantsWavy = shape == ProgressM3EShape.wavy;
final diameter = wantsWavy ? size.diameterWavy : size.diameterFlat;
final active = widget.activeColor ?? cs.primary;
final track = widget.trackColor ?? cs.onSurfaceVariant.withOpacity(0.24);
final wantsWavy = widget.shape == ProgressM3EShape.wavy;
final diameter =
wantsWavy ? widget.size.diameterWavy : widget.size.diameterFlat;
final double rot = widget.rotation != 0.0
? widget.rotation
: (_shouldAnimate ? _controller.value * 2 * math.pi : 0.0);
return RepaintBoundary(
child: SizedBox(
width: diameter,
@ -36,16 +89,16 @@ class CircularProgressIndicatorM3E extends StatelessWidget {
child: CustomPaint(
painter: wantsWavy
? _CircularWavyPainter(
value: value,
value: widget.value,
active: active,
track: track,
rotation: rotation)
rotation: rot)
: _CircularFlatPainter(
value: value,
value: widget.value,
active: active,
track: track,
rotation: rotation,
size: size),
rotation: rot,
size: widget.size),
),
),
);
@ -137,35 +190,36 @@ class _CircularWavyPainter extends CustomPainter {
final center = s.center(Offset.zero);
final baseRadius = (math.min(s.width, s.height) - stroke) / 2;
// Squiggle clearance: 2dp (edge-to-edge). Approximate by insetting the squiggle centerline by 6dp.
final clearance = 2.0;
final squiggleRadius =
baseRadius - (stroke / 2 + clearance + stroke / 2); // baseRadius - 6
final amp = 2.0; // radial amplitude of squiggle
final scallopLen = 18.0; // along-arc wavelength proxy (dp)
// Taper length to fade the wave amplitude to zero near the end so the line ends "closed".
final taperLen = scallopLen / 2;
// Active sweep
final activeSweep =
value == null ? math.pi * 1.5 : (value!.clamp(0.0, 1.0) * math.pi * 2);
value == null ? math.pi * 2 : (value!.clamp(0.0, 1.0) * math.pi * 2);
final start = -math.pi / 2 + rotation;
final end = start + activeSweep;
// Track ring with gap around active
final trackPaint = Paint()
..style = PaintingStyle.stroke
..strokeWidth = stroke
..strokeCap = StrokeCap.round
..isAntiAlias = true
..color = track;
// Track ring with gap around active (skip when wave-only: indeterminate or 100%)
final bool waveOnly = value == null || (value != null && value! >= 1.0);
if (!waveOnly) {
final trackPaint = Paint()
..style = PaintingStyle.stroke
..strokeWidth = stroke
..strokeCap = StrokeCap.round
..isAntiAlias = true
..color = track;
final gapAngle = 2.0 / baseRadius;
final rect = Rect.fromCircle(center: center, radius: baseRadius);
final total = math.pi * 2;
final a1 = end + gapAngle;
final a2 = start - gapAngle;
double sweep1 = (a2 - a1);
while (sweep1 <= 0) sweep1 += total;
canvas.drawArc(rect, a1, sweep1, false, trackPaint);
final gapAngle = 2.0 / baseRadius;
final rect = Rect.fromCircle(center: center, radius: baseRadius);
final total = math.pi * 2;
final a1 = end + gapAngle;
final a2 = start - gapAngle;
double sweep1 = (a2 - a1);
while (sweep1 <= 0) sweep1 += total;
canvas.drawArc(rect, a1, sweep1, false, trackPaint);
}
// Active squiggle path
final steps = math.max(48, (s.width * 1.2).round());
@ -173,9 +227,17 @@ class _CircularWavyPainter extends CustomPainter {
for (int i = 0; i <= steps; i++) {
final t = i / steps;
final ang = start + (end - start) * t;
final arcLen = squiggleRadius * (ang - start);
final r =
squiggleRadius + amp * math.sin(arcLen / scallopLen * 2 * math.pi);
final arcLen = baseRadius * (ang - start);
// Fade amplitude to 0 near the end so the path ends on the base radius (closed look).
final arcToEnd = baseRadius * (end - ang);
double taperFactor = 1.0;
if (arcToEnd < taperLen) {
final tEnd = (arcToEnd / taperLen).clamp(0.0, 1.0);
// Ease-out to 0 at the very end.
taperFactor = math.sin(tEnd * math.pi / 2);
}
final r = baseRadius +
(amp * taperFactor) * math.sin(arcLen / scallopLen * 2 * math.pi);
final p =
Offset(center.dx + r * math.cos(ang), center.dy + r * math.sin(ang));
if (i == 0)

122
packages/progress_indicator_m3e/lib/src/linear_progress_m3e.dart
View file

@ -8,15 +8,15 @@ import 'enums.dart';
/// Linear indicator that renders two **separate lanes** (active above, track below)
/// with a fixed vertical gap. Lanes never overlap.
class LinearProgressIndicatorM3E extends StatelessWidget {
class LinearProgressIndicatorM3E extends StatefulWidget {
const LinearProgressIndicatorM3E({
super.key,
this.value, // null => indeterminate; animate phase externally
this.value, // null => indeterminate
this.size = LinearProgressM3ESize.m,
this.shape = ProgressM3EShape.wavy,
this.activeColor,
this.trackColor,
this.phase = 0.0, // radians for wavy animation
this.phase = 0.0, // radians for wavy animation (external override)
this.inset = 4.0, // horizontal left inset
});
@ -28,6 +28,52 @@ class LinearProgressIndicatorM3E extends StatelessWidget {
final double phase;
final double inset;
@override
State<LinearProgressIndicatorM3E> createState() =>
_LinearProgressIndicatorM3EState();
}
class _LinearProgressIndicatorM3EState extends State<LinearProgressIndicatorM3E>
with SingleTickerProviderStateMixin {
late final AnimationController _controller;
bool get _shouldAnimate {
final v = widget.value;
return widget.shape == ProgressM3EShape.wavy &&
(v == null || (v >= 1.0)) &&
widget.phase == 0.0;
}
@override
void initState() {
super.initState();
_controller = AnimationController(
vsync: this,
duration: const Duration(milliseconds: 1200),
)..addListener(() {
if (mounted && _shouldAnimate) setState(() {});
});
if (_shouldAnimate) {
_controller.repeat();
}
}
@override
void didUpdateWidget(covariant LinearProgressIndicatorM3E oldWidget) {
super.didUpdateWidget(oldWidget);
if (_shouldAnimate) {
if (!_controller.isAnimating) _controller.repeat();
} else {
if (_controller.isAnimating) _controller.stop();
}
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
final theme = Theme.of(context);
@ -35,16 +81,21 @@ class LinearProgressIndicatorM3E extends StatelessWidget {
theme.extension<M3ETheme>() ?? M3ETheme.defaults(theme.colorScheme);
// Farben aus m3e_design beziehen (überschreibbar per Props)
final active = activeColor ?? m3e.colors.primary;
final track = trackColor ?? m3e.colors.surfaceContainerHighest;
final active = widget.activeColor ?? m3e.colors.primary;
final track = widget.trackColor ?? m3e.colors.surfaceContainerHighest;
final spec = specForLinear(size: size, shape: shape);
final spec = specForLinear(size: widget.size, shape: widget.shape);
// Total height = active lane height (trackHeight or wavyHeight) + gap + trackHeight
// Total height equals the taller of the two strokes sharing the same baseline.
// For wavy, add vertical amplitude; for flat, it's just the trackHeight.
final activeHeight = spec.isWavy
? (spec.trackHeight + 2 * spec.waveAmplitude)
: spec.trackHeight;
final totalHeight = activeHeight + spec.gap + spec.trackHeight;
final totalHeight = activeHeight;
final double phaseValue = widget.phase != 0.0
? widget.phase
: (_shouldAnimate ? _controller.value * 2 * math.pi : 0.0);
return RepaintBoundary(
child: SizedBox(
@ -52,12 +103,12 @@ class LinearProgressIndicatorM3E extends StatelessWidget {
width: double.infinity,
child: CustomPaint(
painter: _LinearPainter(
value: value,
value: widget.value,
spec: spec,
active: activeColor ?? active,
track: trackColor ?? track,
phase: phase,
inset: inset,
active: widget.activeColor ?? active,
track: widget.trackColor ?? track,
phase: phaseValue,
inset: widget.inset,
),
),
),
@ -88,13 +139,10 @@ class _LinearPainter extends CustomPainter {
final right = size.width - spec.trailingMargin;
final width = math.max(0.0, right - left);
// lane centers: active on top, track on bottom
final trackCy = size.height - spec.trackHeight / 2;
final activeHeight = spec.isWavy
? (spec.trackHeight + 2 * spec.waveAmplitude)
: spec.trackHeight;
final activeCy =
trackCy - (spec.trackHeight / 2 + spec.gap + activeHeight / 2);
// both strokes share the same baseline (centerline)
final cy = size.height / 2;
final trackCy = cy;
final activeCy = cy;
// --- Draw track lane (flat pill) ---
final base = Paint()
@ -103,11 +151,25 @@ class _LinearPainter extends CustomPainter {
..strokeCap = StrokeCap.round
..isAntiAlias = true;
canvas.drawLine(
Offset(left, trackCy), Offset(right, trackCy), base..color = track);
// compute progress fraction early for both lanes
final double p = (value ?? 0).clamp(0.0, 1.0);
// Wave-only mode: in wavy shape, when indeterminate or full (100%),
// hide the track and end-dot; show only the wave which is animated via phase.
final bool waveOnly = spec.isWavy && (value == null || p >= 1.0);
// Track occupies the remaining segment to the right of the active,
// leaving a fixed inter-stroke gap. For indeterminate, fill full width.
final double activeEndX = value == null ? right : (left + width * p);
final double trackStartX =
value == null ? left : math.min(right, activeEndX + spec.gap);
if (!waveOnly) {
canvas.drawLine(Offset(trackStartX, trackCy), Offset(right, trackCy),
base..color = track);
}
// --- Active lane ---
final double p = (value ?? 0).clamp(0.0, 1.0);
if (spec.isWavy) {
// wavy centerline
final start = left;
@ -134,10 +196,12 @@ class _LinearPainter extends CustomPainter {
..color = active
..strokeWidth = spec.trackHeight);
// end dot (non-overlapping, placed slightly before end)
final dotCenterX = math.max(start, end - spec.dotOffset);
canvas.drawCircle(
Offset(dotCenterX, y), spec.dotDiameter / 2, Paint()..color = active);
// end dot: accent at far right end of the track (shared baseline)
if (!waveOnly) {
final dotCenterX = math.max(left, right - spec.dotOffset);
canvas.drawCircle(Offset(dotCenterX, trackCy), spec.dotDiameter / 2,
Paint()..color = active);
}
} else {
// flat active pill + end dot
final start = left;
@ -148,8 +212,8 @@ class _LinearPainter extends CustomPainter {
base
..color = active
..strokeWidth = spec.trackHeight);
final dotCenterX = math.max(start, end - spec.dotOffset);
canvas.drawCircle(Offset(dotCenterX, activeCy), spec.dotDiameter / 2,
final dotCenterX = math.max(left, right - spec.dotOffset);
canvas.drawCircle(Offset(dotCenterX, trackCy), spec.dotDiameter / 2,
Paint()..color = active);
}
}