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
78
packages/toolbar_m3e/README.md
Normal file
78
packages/toolbar_m3e/README.md
Normal file
|
|
@ -0,0 +1,78 @@
|
|||
# toolbar_m3e
|
||||
|
||||
Material 3 **Expressive** toolbar for Flutter – a compact action bar that can host a title/subtitle, leading widget, inline actions, and an overflow menu. All styling is driven by `m3e_design` tokens.
|
||||
|
||||
- `ToolbarM3E` — the main toolbar widget (`PreferredSizeWidget`) for use in `Scaffold` or as a standalone header
|
||||
- `ToolbarActionM3E` — action model consumed by the toolbar
|
||||
- Inline actions render as icon buttons; extra actions go into a `PopupMenuButton` overflow
|
||||
|
||||
## Monorepo Layout
|
||||
|
||||
```
|
||||
packages/
|
||||
m3e_design/
|
||||
toolbar_m3e/
|
||||
```
|
||||
|
||||
`pubspec.yaml` references `../m3e_design`.
|
||||
|
||||
## Usage
|
||||
|
||||
```dart
|
||||
import 'package:toolbar_m3e/toolbar_m3e.dart';
|
||||
|
||||
final actions = [
|
||||
ToolbarActionM3E(
|
||||
icon: Icons.search,
|
||||
onPressed: () {},
|
||||
tooltip: 'Search',
|
||||
),
|
||||
ToolbarActionM3E(
|
||||
icon: Icons.share_outlined,
|
||||
onPressed: () {},
|
||||
tooltip: 'Share',
|
||||
),
|
||||
ToolbarActionM3E(
|
||||
icon: Icons.delete_outline,
|
||||
onPressed: () {},
|
||||
tooltip: 'Delete',
|
||||
isDestructive: true,
|
||||
label: 'Delete', // used in overflow
|
||||
),
|
||||
];
|
||||
|
||||
ToolbarM3E(
|
||||
leading: const BackButton(),
|
||||
titleText: 'Selection',
|
||||
subtitleText: '3 items',
|
||||
actions: actions,
|
||||
maxInlineActions: 2, // remaining actions go to overflow
|
||||
variant: ToolbarM3EVariant.tonal, // surface | tonal | primary
|
||||
size: ToolbarM3ESize.medium, // small | medium | large
|
||||
density: ToolbarM3EDensity.regular,
|
||||
shapeFamily: ToolbarM3EShapeFamily.round,
|
||||
centerTitle: false,
|
||||
);
|
||||
```
|
||||
|
||||
## Tokens mapping
|
||||
|
||||
- **Container**: `surfaceContainerHigh` (surface) / `secondaryContainer` (tonal) / `primaryContainer` (primary)
|
||||
- **Foreground**: `onSurface` / `onSecondaryContainer` / `onPrimaryContainer`
|
||||
- **Shape**: uses M3E `round` / `square` set (`md` radius)
|
||||
- **Heights**: small **≈40dp**, medium **≈48dp**, large **≈56dp**
|
||||
- **Icon size**: **24dp**
|
||||
- **Padding**: horizontal from tokens (`spacing.md`)
|
||||
|
||||
## Overflow
|
||||
|
||||
Set `maxInlineActions` to the number of actions that should stay inline. Any additional actions go to the overflow menu (labels pulled from `label` or `tooltip`/`semanticLabel`). Destructive actions can be highlighted by `isDestructive: true`.
|
||||
|
||||
## Accessibility
|
||||
|
||||
- Provide `semanticLabel` on the toolbar if useful.
|
||||
- Actions expose `tooltip` and can set `semanticLabel` to improve assistive tech hints.
|
||||
|
||||
## License
|
||||
|
||||
MIT
|
||||
Loading…
Add table
Add a link
Reference in a new issue