forked from mirrors/material_3_expressive
Add initial configuration, tokens, and widgets for M3E components
- Introduced `.gitignore` and `.metadata` for apps and examples. - Added Flutter/Dart analysis configurations (`analysis_options.yaml`). - Implemented foundational tokens and themes for M3E (colors, shapes). - Created base implementations for `IconButtonM3E` and `SplitButtonM3E`. - Set up CI workflow (`ci.yaml`) to automate testing and analysis.
This commit is contained in:
parent
2c0f2df0b8
commit
62ecb86b76
184 changed files with 9872 additions and 0 deletions
65
packages/progress_indicator_m3e/README.md
Normal file
65
packages/progress_indicator_m3e/README.md
Normal file
|
|
@ -0,0 +1,65 @@
|
|||
# progress_indicators_m3e
|
||||
|
||||
Material 3 **Expressive** progress indicators for Flutter:
|
||||
|
||||
- `LinearProgressM3E` — determinate, indeterminate, **buffer**, **query**, with **flat** or **wavy** shape
|
||||
- `CircularProgressM3E` — determinate & indeterminate, **flat** or **wavy** stroke (animated for indeterminate)
|
||||
- `ProgressWithLabelM3E` — compose a linear bar with inline/top/bottom/center labels
|
||||
|
||||
All widgets read **M3E tokens** (`m3e_design`) for color, sizing, and typography.
|
||||
|
||||
## Defaults (from the spec illustrations)
|
||||
|
||||
- Linear: default thickness 4dp; configurable via `size` or `strokeHeight`
|
||||
- Linear (wavy): `wavelength=40dp`, `amplitude≈height/3`, **4dp** left/right inset
|
||||
- Circular: small/medium/large diameters ≈ 24/32/48 with stroke ≈ 3/4/6
|
||||
- Circular (wavy): default **10 waves** around the circle, amplitude ≈ 35% of stroke
|
||||
|
||||
## Quick start
|
||||
|
||||
```dart
|
||||
import 'package:progress_indicators_m3e/progress_indicators_m3e.dart';
|
||||
|
||||
// Linear (wavy, determinate)
|
||||
LinearProgressM3E(
|
||||
value: 0.62,
|
||||
shape: LinearBarShapeM3E.wavy,
|
||||
);
|
||||
|
||||
// Circular (wavy, indeterminate)
|
||||
const CircularProgressM3E(
|
||||
shape: CircularBarShapeM3E.wavy,
|
||||
);
|
||||
|
||||
// Linear (buffer) flat
|
||||
LinearProgressM3E(
|
||||
variant: LinearProgressM3EVariant.buffer,
|
||||
value: 0.3,
|
||||
bufferValue: 0.6,
|
||||
);
|
||||
|
||||
// Circular (flat) with center label
|
||||
CircularProgressM3E(
|
||||
value: 0.5,
|
||||
showCenterLabel: true,
|
||||
);
|
||||
```
|
||||
|
||||
## Monorepo layout
|
||||
|
||||
```
|
||||
packages/
|
||||
m3e_design/
|
||||
progress_indicators_m3e/
|
||||
```
|
||||
|
||||
`pubspec.yaml` references `../m3e_design`.
|
||||
|
||||
## Accessibility
|
||||
|
||||
- Provide `semanticLabel` and (for determinate) the widgets expose a numeric **value** for screen readers.
|
||||
- Indeterminate wavy animations use modest motion; gate the speed with a future `m3e_design.motion` flag if you support "reduce motion".
|
||||
|
||||
## License
|
||||
|
||||
MIT
|
||||
Loading…
Add table
Add a link
Reference in a new issue