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:
Emily Pauli 2025-10-21 22:15:15 +02:00
commit 62ecb86b76
184 changed files with 9872 additions and 0 deletions

View file

@ -0,0 +1,93 @@
# fab_m3e
Material 3 **Expressive** Floating Action Buttons for Flutter:
- **FabM3E**: circular FAB (small / regular / large)
- **ExtendedFabM3E**: pill-shaped FAB with label (and optional icon)
- **FabMenuM3E**: FAB menu (speed dial) with animated items (up/down/left/right)
All components read **M3E tokens** from `m3e_design` (ThemeExtension).
## Monorepo Layout
```
packages/
m3e_design/
fab_m3e/
```
This package's `pubspec.yaml` references `../m3e_design`.
## Usage
### FAB
```dart
import 'package:fab_m3e/fab_m3e.dart';
FabM3E(
icon: const Icon(Icons.add),
kind: FabM3EKind.primary,
size: FabM3ESize.regular,
onPressed: () {},
);
```
### Extended FAB
```dart
ExtendedFabM3E(
icon: const Icon(Icons.edit),
label: const Text('Compose'),
kind: FabM3EKind.secondary,
onPressed: () {},
);
```
### FAB Menu (Speed dial)
```dart
final controller = FabMenuController();
FabMenuM3E(
controller: controller,
alignment: Alignment.bottomRight,
direction: FabMenuDirection.up,
primaryFab: FabM3E(icon: const Icon(Icons.add), onPressed: controller.toggle),
items: [
FabMenuItem(
icon: const Icon(Icons.photo),
label: const Text('Photo'),
onPressed: () {},
),
FabMenuItem(
icon: const Icon(Icons.note),
label: const Text('Note'),
onPressed: () {},
),
],
);
```
## Theming via `m3e_design`
- Background/foreground colors derive from kind:
- `primary``primaryContainer` / `onPrimaryContainer`
- `secondary``secondaryContainer` / `onSecondaryContainer`
- `tertiary``tertiaryContainer` / `onTertiaryContainer`
- `surface``surfaceContainerHigh` / `onSurface`
- Sizes: **small ≈40dp**, **regular ≈56dp**, **large ≈96dp**
- Extended FAB height ≈56dp
- Elevations: rest 6, hover 8, pressed 12 (tweak in code or via tokens)
- Shapes: `round`/`square` from `m3e_design.shapes` (extended uses StadiumBorder)
## Notes
- `FabM3E` uses `RawMaterialButton` to directly inject shape/elevation/colors with tokens.
- `ExtendedFabM3E` uses `Material` + `InkWell` with stadium shape and token paddings.
- `FabMenuM3E` stacks items near the primary FAB and animates **scale + fade**.
- Provide your own `Hero` tags if coordinating transitions across pages.
## License
MIT