From 8d7bd7e828879ba30260e3a3b83daeca874bd3fa Mon Sep 17 00:00:00 2001 From: Emily Pauli Date: Thu, 23 Oct 2025 15:08:13 +0200 Subject: [PATCH] Add live demo links to READMEs, enable theme switching in Gallery app, and update deployment workflow for web support. --- .github/workflows/deploy-gallery-pages.yml | 6 +++ README.md | 30 +++++++++++- apps/gallery/README.md | 17 +++++++ apps/gallery/lib/main.dart | 54 +++++++++++++++++---- packages/app_bar_m3e/README.md | 18 +++++++ packages/button_group_m3e/README.md | 18 +++++++ packages/button_m3e/README.md | 18 +++++++ packages/fab_m3e/README.md | 18 +++++++ packages/icon_button_m3e/README.md | 18 +++++++ packages/icon_button_m3e/example/README.md | 18 +++++++ packages/loading_indicator_m3e/README.md | 18 +++++++ packages/m3e_collection/README.md | 19 +++++++- packages/m3e_design/README.md | 18 +++++++ packages/navigation_bar_m3e/README.md | 18 +++++++ packages/navigation_rail_m3e/README.md | 19 +++++++- packages/progress_indicator_m3e/README.md | 18 +++++++ packages/slider_m3e/README.md | 18 +++++++ packages/split_button_m3e/README.md | 18 +++++++ packages/split_button_m3e/example/README.md | 18 +++++++ packages/toolbar_m3e/README.md | 18 +++++++ 20 files changed, 385 insertions(+), 12 deletions(-) diff --git a/.github/workflows/deploy-gallery-pages.yml b/.github/workflows/deploy-gallery-pages.yml index 1e320fa..5e0649f 100644 --- a/.github/workflows/deploy-gallery-pages.yml +++ b/.github/workflows/deploy-gallery-pages.yml @@ -31,11 +31,17 @@ jobs: channel: "stable" - name: Flutter version + working-directory: apps/gallery run: flutter --version - name: Enable web + working-directory: apps/gallery run: flutter config --enable-web + - name: Create web + working-directory: apps/gallery + run: flutter create . --platforms web --overwrite + - name: Pub get working-directory: apps/gallery run: flutter pub get diff --git a/README.md b/README.md index 4cdee6b..f9cd5cd 100644 --- a/README.md +++ b/README.md @@ -4,8 +4,18 @@ This is a starter monorepo for **Material 3 Expressive (M3E)** Flutter packages. - `packages/m3e_design` – design language core (tokens, ThemeExtension, motion) - `packages/m3e_collection` – re-exports all component packages -- `packages/icon_button_m3e` – example component (uses `m3e_design`) +- `packages/icon_button_m3e` – example component - `packages/split_button_m3e` – example split button component +- `packages/app_bar_m3e` +- `packages/button_group_m3e` +- `packages/button_m3e` +- `packages/fab_m3e` +- `packages/loading_indicator_m3e` +- `packages/navigation_rail_m3e` +- `packages/navigation_bar_m3e` +- `packages/progress_indicator_m3e` +- `packages/slider_m3e` +- `packages/toolbar_m3e` - `apps/gallery` – showcase app that consumes `m3e_collection` ## Quick start @@ -22,3 +32,21 @@ flutter run ## Structure See `melos.yaml`, `analysis_options.yaml`, and the package-level READMEs. + + +--- + +## Live demo (Gallery) + +A web demo of the M3E components is published via GitHub Pages using the provided workflow in `.github/workflows/deploy-gallery-pages.yml`. + +Open: https://emilymoonstone.github.io/material_3_expressive/ + +To run locally: + +```sh +cd apps/gallery +flutter run -d chrome +``` + +_Last updated: 2025-10-23_ diff --git a/apps/gallery/README.md b/apps/gallery/README.md index b900e65..b542e8a 100644 --- a/apps/gallery/README.md +++ b/apps/gallery/README.md @@ -14,3 +14,20 @@ A few resources to get you started if this is your first Flutter project: For help getting started with Flutter development, view the [online documentation](https://docs.flutter.dev/), which offers tutorials, samples, guidance on mobile development, and a full API reference. + + +--- + +## Live demo + +This Gallery app is deployed to GitHub Pages using the workflow in `.github/workflows/deploy-gallery-pages.yml`. + +Open: https://emilymoonstone.github.io/material_3_expressive/ + +To run locally: + +```sh +flutter run -d chrome +``` + +_Last updated: 2025-10-23_ diff --git a/apps/gallery/lib/main.dart b/apps/gallery/lib/main.dart index 18be406..d74c25a 100644 --- a/apps/gallery/lib/main.dart +++ b/apps/gallery/lib/main.dart @@ -13,23 +13,53 @@ import 'package:m3e_gallery/sections/toolbar_section.dart'; void main() => runApp(const GalleryApp()); -class GalleryApp extends StatelessWidget { +class GalleryApp extends StatefulWidget { const GalleryApp({super.key}); + @override + State createState() => _GalleryAppState(); +} + +class _GalleryAppState extends State { + ThemeMode _mode = ThemeMode.light; + + void _toggleMode() { + setState(() { + _mode = _mode == ThemeMode.light ? ThemeMode.dark : ThemeMode.light; + }); + } + @override Widget build(BuildContext context) { - final base = ThemeData(useMaterial3: true, colorSchemeSeed: Colors.purple); + final baseLight = ThemeData( + useMaterial3: true, + colorSchemeSeed: Colors.purple, + brightness: Brightness.light, + ); + final baseDark = ThemeData( + useMaterial3: true, + colorSchemeSeed: Colors.purple, + brightness: Brightness.dark, + ); return MaterialApp( title: 'M3E Gallery', - theme: withM3ETheme(base), - home: const GalleryHome(), + theme: withM3ETheme(baseLight), + darkTheme: withM3ETheme(baseDark), + themeMode: _mode, + home: GalleryHome( + isDark: _mode == ThemeMode.dark, + onToggleBrightness: _toggleMode, + ), debugShowCheckedModeBanner: false, ); } } class GalleryHome extends StatefulWidget { - const GalleryHome({super.key}); + const GalleryHome({super.key, required this.isDark, required this.onToggleBrightness}); + + final bool isDark; + final VoidCallback onToggleBrightness; @override State createState() => _GalleryHomeState(); @@ -45,10 +75,16 @@ class _GalleryHomeState extends State { return Scaffold( appBar: AppBarM3E( titleText: 'M3E Gallery', - actions: const [ - Icon(Icons.search), - SizedBox(width: 8), - Icon(Icons.more_vert), + actions: [ + IconButton( + tooltip: widget.isDark ? 'Switch to light mode' : 'Switch to dark mode', + onPressed: widget.onToggleBrightness, + icon: Icon(widget.isDark ? Icons.dark_mode : Icons.light_mode), + ), + const SizedBox(width: 8), + const Icon(Icons.search), + const SizedBox(width: 8), + const Icon(Icons.more_vert), ], ), body: const SectionedGallery(), diff --git a/packages/app_bar_m3e/README.md b/packages/app_bar_m3e/README.md index 8e096ff..9b4875c 100644 --- a/packages/app_bar_m3e/README.md +++ b/packages/app_bar_m3e/README.md @@ -88,3 +88,21 @@ Override by supplying `backgroundColor`, `foregroundColor`, `toolbarHeight`, etc ## License MIT + + +--- + +## Live demo (Gallery) + +Explore this component in the M3E Gallery (GitHub Pages): + +https://.github.io/material_3_expressive/ + +To run the Gallery locally: + +```sh +cd apps/gallery +flutter run -d chrome +``` + +_Last updated: 2025-10-23_ diff --git a/packages/button_group_m3e/README.md b/packages/button_group_m3e/README.md index 22a8658..c42712e 100644 --- a/packages/button_group_m3e/README.md +++ b/packages/button_group_m3e/README.md @@ -98,3 +98,21 @@ ButtonGroupM3E( ], ) ``` + + +--- + +## Live demo (Gallery) + +Explore this component in the M3E Gallery (GitHub Pages): + +https://.github.io/material_3_expressive/ + +To run the Gallery locally: + +```sh +cd apps/gallery +flutter run -d chrome +``` + +_Last updated: 2025-10-23_ diff --git a/packages/button_m3e/README.md b/packages/button_m3e/README.md index 148ec00..5657b32 100644 --- a/packages/button_m3e/README.md +++ b/packages/button_m3e/README.md @@ -5,3 +5,21 @@ Material 3 **Expressive Buttons** for Flutter — sizes XS→XL, round/square sh toggle selection, and 5 styles (filled/tonal/elevated/outlined/text). See `lib/src/button_tokens_adapter.dart` for measurements & color mapping. + + +--- + +## Live demo (Gallery) + +Explore this component in the M3E Gallery (GitHub Pages): + +https://.github.io/material_3_expressive/ + +To run the Gallery locally: + +```sh +cd apps/gallery +flutter run -d chrome +``` + +_Last updated: 2025-10-23_ diff --git a/packages/fab_m3e/README.md b/packages/fab_m3e/README.md index 413024e..fe6cff7 100644 --- a/packages/fab_m3e/README.md +++ b/packages/fab_m3e/README.md @@ -91,3 +91,21 @@ FabMenuM3E( ## License MIT + + +--- + +## Live demo (Gallery) + +Explore this component in the M3E Gallery (GitHub Pages): + +https://.github.io/material_3_expressive/ + +To run the Gallery locally: + +```sh +cd apps/gallery +flutter run -d chrome +``` + +_Last updated: 2025-10-23_ diff --git a/packages/icon_button_m3e/README.md b/packages/icon_button_m3e/README.md index 5278347..898881f 100644 --- a/packages/icon_button_m3e/README.md +++ b/packages/icon_button_m3e/README.md @@ -90,3 +90,21 @@ flutter run ## License MIT + + +--- + +## Live demo (Gallery) + +Explore this component in the M3E Gallery (GitHub Pages): + +https://.github.io/material_3_expressive/ + +To run the Gallery locally: + +```sh +cd apps/gallery +flutter run -d chrome +``` + +_Last updated: 2025-10-23_ diff --git a/packages/icon_button_m3e/example/README.md b/packages/icon_button_m3e/example/README.md index 60bbe46..da0bf50 100644 --- a/packages/icon_button_m3e/example/README.md +++ b/packages/icon_button_m3e/example/README.md @@ -14,3 +14,21 @@ A few resources to get you started if this is your first Flutter project: For help getting started with Flutter development, view the [online documentation](https://docs.flutter.dev/), which offers tutorials, samples, guidance on mobile development, and a full API reference. + + +--- + +## Live demo (Gallery) + +Try this component in the main Gallery app (GitHub Pages): + +https://.github.io/material_3_expressive/ + +To run the Gallery locally from repo root: + +```sh +cd ../../../../apps/gallery +flutter run -d chrome +``` + +_Last updated: 2025-10-23_ diff --git a/packages/loading_indicator_m3e/README.md b/packages/loading_indicator_m3e/README.md index dccd16f..3f0ed3b 100644 --- a/packages/loading_indicator_m3e/README.md +++ b/packages/loading_indicator_m3e/README.md @@ -54,3 +54,21 @@ Pass `semanticLabel` and `semanticValue` to announce loading status if needed. ## License - Android/Compose implementation © Google, Apache-2.0 - This package MIT + + +--- + +## Live demo (Gallery) + +Explore this component in the M3E Gallery (GitHub Pages): + +https://.github.io/material_3_expressive/ + +To run the Gallery locally: + +```sh +cd apps/gallery +flutter run -d chrome +``` + +_Last updated: 2025-10-23_ diff --git a/packages/m3e_collection/README.md b/packages/m3e_collection/README.md index e550178..ac434df 100644 --- a/packages/m3e_collection/README.md +++ b/packages/m3e_collection/README.md @@ -2,4 +2,21 @@ Single import that re-exports all M3E component packages plus `m3e_design`. -The packages `material_new_shapes` by [ulims](https://github.com/ulims) and `expressive_refresh` by [alvaronp](https://github.com/alvaronp) are reexported to complete the collection. \ No newline at end of file +The packages `material_new_shapes` by [ulims](https://github.com/ulims) and `expressive_refresh` by [alvaronp](https://github.com/alvaronp) are reexported to complete the collection. + +--- + +## Live demo (Gallery) + +Explore the components in the M3E Gallery (GitHub Pages): + +https://.github.io/material_3_expressive/ + +To run the Gallery locally: + +```sh +cd apps/gallery +flutter run -d chrome +``` + +_Last updated: 2025-10-23_ diff --git a/packages/m3e_design/README.md b/packages/m3e_design/README.md index 5459ece..d7835f7 100644 --- a/packages/m3e_design/README.md +++ b/packages/m3e_design/README.md @@ -2,3 +2,21 @@ Design language core for Material 3 Expressive (Flutter). Provides ThemeExtension and token accessors for color, typography, shapes, spacing, motion. + + +--- + +## Live demo (Gallery) + +Explore the components using this design system in the M3E Gallery (GitHub Pages): + +https://.github.io/material_3_expressive/ + +To run the Gallery locally: + +```sh +cd apps/gallery +flutter run -d chrome +``` + +_Last updated: 2025-10-23_ diff --git a/packages/navigation_bar_m3e/README.md b/packages/navigation_bar_m3e/README.md index 5c467ae..e64a721 100644 --- a/packages/navigation_bar_m3e/README.md +++ b/packages/navigation_bar_m3e/README.md @@ -75,3 +75,21 @@ Use `badgeCount` for numeric badges or `badgeDot: true` for a small dot. Colors ## License MIT + + +--- + +## Live demo (Gallery) + +Explore this component in the M3E Gallery (GitHub Pages): + +https://.github.io/material_3_expressive/ + +To run the Gallery locally: + +```sh +cd apps/gallery +flutter run -d chrome +``` + +_Last updated: 2025-10-23_ diff --git a/packages/navigation_rail_m3e/README.md b/packages/navigation_rail_m3e/README.md index ec915b0..fb5476e 100644 --- a/packages/navigation_rail_m3e/README.md +++ b/packages/navigation_rail_m3e/README.md @@ -48,4 +48,21 @@ NavigationRailM3E( ); ``` -See the `/example` app for a runnable demo. \ No newline at end of file +See the `/example` app for a runnable demo. + +--- + +## Live demo (Gallery) + +Explore this component in the M3E Gallery (GitHub Pages): + +https://.github.io/material_3_expressive/ + +To run the Gallery locally: + +```sh +cd apps/gallery +flutter run -d chrome +``` + +_Last updated: 2025-10-23_ diff --git a/packages/progress_indicator_m3e/README.md b/packages/progress_indicator_m3e/README.md index c2b83bd..51bd8bb 100644 --- a/packages/progress_indicator_m3e/README.md +++ b/packages/progress_indicator_m3e/README.md @@ -12,3 +12,21 @@ - `flatS` — track 8, gap 4, dot Ø4, dotOffset 2, trailing 8 - `wavyM` — track 4, wave amp 3, period 40, gap 4, dot Ø4, dotOffset 2, trailing 10 - `wavyL` — track 8, wave amp 3, period 40, gap 4, dot Ø4, dotOffset 2, trailing 14 + + +--- + +## Live demo (Gallery) + +Explore this component in the M3E Gallery (GitHub Pages): + +https://.github.io/material_3_expressive/ + +To run the Gallery locally: + +```sh +cd apps/gallery +flutter run -d chrome +``` + +_Last updated: 2025-10-23_ diff --git a/packages/slider_m3e/README.md b/packages/slider_m3e/README.md index 65f114d..30f428a 100644 --- a/packages/slider_m3e/README.md +++ b/packages/slider_m3e/README.md @@ -67,3 +67,21 @@ RangeSliderM3E( ## License MIT + + +--- + +## Live demo (Gallery) + +Explore this component in the M3E Gallery (GitHub Pages): + +https://.github.io/material_3_expressive/ + +To run the Gallery locally: + +```sh +cd apps/gallery +flutter run -d chrome +``` + +_Last updated: 2025-10-23_ diff --git a/packages/split_button_m3e/README.md b/packages/split_button_m3e/README.md index 08feb80..d4580ed 100644 --- a/packages/split_button_m3e/README.md +++ b/packages/split_button_m3e/README.md @@ -131,3 +131,21 @@ SplitButtonM3E( ## License MIT + + +--- + +## Live demo (Gallery) + +Explore this component in the M3E Gallery (GitHub Pages): + +https://.github.io/material_3_expressive/ + +To run the Gallery locally: + +```sh +cd apps/gallery +flutter run -d chrome +``` + +_Last updated: 2025-10-23_ diff --git a/packages/split_button_m3e/example/README.md b/packages/split_button_m3e/example/README.md index 11550df..d626f03 100644 --- a/packages/split_button_m3e/example/README.md +++ b/packages/split_button_m3e/example/README.md @@ -14,3 +14,21 @@ A few resources to get you started if this is your first Flutter project: For help getting started with Flutter development, view the [online documentation](https://docs.flutter.dev/), which offers tutorials, samples, guidance on mobile development, and a full API reference. + + +--- + +## Live demo (Gallery) + +Try this component in the main Gallery app (GitHub Pages): + +https://.github.io/material_3_expressive/ + +To run the Gallery locally from repo root: + +```sh +cd ../../../../apps/gallery +flutter run -d chrome +``` + +_Last updated: 2025-10-23_ diff --git a/packages/toolbar_m3e/README.md b/packages/toolbar_m3e/README.md index a4e5e58..7b7f132 100644 --- a/packages/toolbar_m3e/README.md +++ b/packages/toolbar_m3e/README.md @@ -76,3 +76,21 @@ Set `maxInlineActions` to the number of actions that should stay inline. Any add ## License MIT + + +--- + +## Live demo (Gallery) + +Explore this component in the M3E Gallery (GitHub Pages): + +https://.github.io/material_3_expressive/ + +To run the Gallery locally: + +```sh +cd apps/gallery +flutter run -d chrome +``` + +_Last updated: 2025-10-23_