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
56
packages/loading_indicator_m3e/README.md
Normal file
56
packages/loading_indicator_m3e/README.md
Normal file
|
|
@ -0,0 +1,56 @@
|
|||
# loading_indicator_m3e
|
||||
|
||||
Material 3 **Expressive** Loading Indicator for Flutter — a morphing polygon that continuously rotates and morphs between shapes (ported from Android's Material3 `LoadingIndicator`).
|
||||
|
||||
Two configurations:
|
||||
- **Default** — container uses `secondaryContainer`, active indicator uses `primary`
|
||||
- **Contained** — container uses `primaryContainer`, active indicator uses `onPrimaryContainer`
|
||||
|
||||
Token-aligned sizes:
|
||||
- Container: **48 × 48dp**
|
||||
- Active indicator size: **38dp**
|
||||
- Container shape: **full** (pill/circular) corners
|
||||
|
||||
## Usage
|
||||
|
||||
```dart
|
||||
import 'package:loading_indicator_m3e/loading_indicator_m3e.dart';
|
||||
|
||||
// Default
|
||||
const LoadingIndicatorM3E();
|
||||
|
||||
// Contained
|
||||
const LoadingIndicatorM3E(variant: LoadingIndicatorM3EVariant.contained);
|
||||
|
||||
// Custom colors, custom polygon sequence
|
||||
LoadingIndicatorM3E(
|
||||
color: Colors.teal,
|
||||
polygons: const [
|
||||
MaterialShapes.sunny,
|
||||
MaterialShapes.cookie9Sided,
|
||||
MaterialShapes.pill,
|
||||
],
|
||||
);
|
||||
```
|
||||
|
||||
## Notes
|
||||
- The inner morph sequence and animation timings match the Compose implementation:
|
||||
- Morph interval ~650ms, global rotation ~4666ms
|
||||
- Active size is scaled to ~38dp inside the 48dp container to avoid clipping while rotating
|
||||
- Requires your monorepo `m3e_design` (for tokens) and `material_new_shapes` (for `RoundedPolygon` + `Morph` + `MaterialShapes`). The `pubspec.yaml` is set up with `path: ../...`.
|
||||
|
||||
## Monorepo Layout
|
||||
|
||||
```
|
||||
packages/
|
||||
m3e_design/
|
||||
material_new_shapes/
|
||||
loading_indicator_m3e/
|
||||
```
|
||||
|
||||
## Accessibility
|
||||
Pass `semanticLabel` and `semanticValue` to announce loading status if needed.
|
||||
|
||||
## License
|
||||
- Android/Compose implementation © Google, Apache-2.0
|
||||
- This package MIT
|
||||
Loading…
Add table
Add a link
Reference in a new issue