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
92
packages/icon_button_m3e/README.md
Normal file
92
packages/icon_button_m3e/README.md
Normal file
|
|
@ -0,0 +1,92 @@
|
|||
# icon_button_m3e
|
||||
|
||||
Expressive Material 3 icon button for Flutter — `IconButtonM3E` — with
|
||||
five sizes (XS–XL), four variants (standard, filled, tonal, outlined),
|
||||
round/square shapes, toggle support, and guaranteed 48×48dp tap targets
|
||||
(even when visual size is 32/40).
|
||||
|
||||
## Highlights
|
||||
|
||||
- Sizes: `M3EIconButtonSize` = XS, SM, MD, LG, XL
|
||||
- Widths: `M3EIconButtonWidth` = default, narrow, wide
|
||||
- Variants: standard, filled, tonal, outlined
|
||||
- Shapes: round (pill) or square (rounded rect)
|
||||
- Toggle: `isSelected` + `selectedIcon`
|
||||
- A11y: min 48×48dp hit target; semantics label/selected state
|
||||
- Tokens: centralized static values in `M3EIconButtonTokens` (no ThemeExtension)
|
||||
|
||||
## Install
|
||||
|
||||
```yaml
|
||||
dependencies:
|
||||
icon_button_m3e:
|
||||
path: ../icon_button_m3e # or from pub once published
|
||||
```
|
||||
|
||||
## Quick Start
|
||||
|
||||
```dart
|
||||
import 'package:icon_button_m3e/icon_button_m3e.dart';
|
||||
|
||||
IconButtonM3E(
|
||||
variant: IconButtonM3EVariant.filled,
|
||||
size: M3EIconButtonSize.md,
|
||||
width: M3EIconButtonWidth.defaultWidth,
|
||||
icon: const Icon(Icons.mic),
|
||||
tooltip: 'Start recording',
|
||||
onPressed: () {},
|
||||
);
|
||||
```
|
||||
|
||||
### Toggle
|
||||
|
||||
```dart
|
||||
bool isFav = false;
|
||||
|
||||
IconButtonM3E(
|
||||
variant: IconButtonM3EVariant.tonal,
|
||||
isSelected: isFav,
|
||||
icon: const Icon(Icons.favorite_border),
|
||||
selectedIcon: const Icon(Icons.favorite),
|
||||
tooltip: isFav ? 'Remove from favorites' : 'Add to favorites',
|
||||
onPressed: () => setState(() => isFav = !isFav),
|
||||
);
|
||||
```
|
||||
|
||||
## Sizing
|
||||
|
||||
- Visual container sizes come from tokens: `M3EIconButtonTokens.visual[size][width]`.
|
||||
- Minimum interactive target sizes come from `M3EIconButtonTokens.target[size][width]`.
|
||||
- XS/SM enforce at least 48×48; others match their visual sizes.
|
||||
- Icon glyph sizes are in `M3EIconButtonTokens.icon[size]`.
|
||||
|
||||
For example (default width):
|
||||
- XS: 32×32 visual, 48×48 target
|
||||
- SM: 40×40 visual, 48×48 target (SM wide: 52×48)
|
||||
- MD: 56×56
|
||||
- LG: 96×96
|
||||
- XL: 136×136
|
||||
|
||||
## Colors and shapes
|
||||
|
||||
- Colors are derived from your `ThemeData.colorScheme`:
|
||||
- standard: transparent bg, onSurfaceVariant fg (selected uses primary)
|
||||
- filled: primary bg, onPrimary fg
|
||||
- tonal: secondaryContainer bg, onSecondaryContainer fg
|
||||
- outlined: transparent bg, primary fg, outline border
|
||||
- Shapes: `M3EIconButtonShapeVariant.round` (pill) or `.square` (rounded square).
|
||||
- Pressed state uses a shared, more-square radius per size.
|
||||
- If used as a toggle, selected state flips round/square for expressive feel.
|
||||
|
||||
## Example
|
||||
|
||||
Run the example app:
|
||||
|
||||
```sh
|
||||
cd example
|
||||
flutter run
|
||||
```
|
||||
|
||||
## License
|
||||
|
||||
MIT
|
||||
Loading…
Add table
Add a link
Reference in a new issue