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
93
packages/fab_m3e/README.md
Normal file
93
packages/fab_m3e/README.md
Normal 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
|
||||
Loading…
Add table
Add a link
Reference in a new issue