From 1d82e2d5dc343cda413ad21bbca74f1f5d277573 Mon Sep 17 00:00:00 2001 From: Rene Floor Date: Wed, 28 Jan 2026 14:03:08 +0100 Subject: [PATCH 1/4] make gallery more usable on mobile --- .../lib/app/gallery_shell.dart | 59 ++++++++++++------- 1 file changed, 38 insertions(+), 21 deletions(-) diff --git a/apps/design_system_gallery/lib/app/gallery_shell.dart b/apps/design_system_gallery/lib/app/gallery_shell.dart index 940837d..0c773a5 100644 --- a/apps/design_system_gallery/lib/app/gallery_shell.dart +++ b/apps/design_system_gallery/lib/app/gallery_shell.dart @@ -29,6 +29,24 @@ class GalleryShell extends StatelessWidget { final materialTheme = Theme.of(context); final isDark = materialTheme.brightness == .dark; + final isSmallScreen = MediaQuery.of(context).size.width < 600; + + final widgetbookWidget = Expanded( + child: Widgetbook.material( + lightTheme: materialTheme, + darkTheme: materialTheme, + themeMode: isDark ? .dark : .light, + directories: directories, + home: const GalleryHomePage(), + appBuilder: (context, child) => PreviewWrapper(child: child), + ), + ); + + final themePanel = ConstrainedBox( + constraints: BoxConstraints(maxWidth: 340), + child: ThemeCustomizationPanel(), + ); + return Scaffold( backgroundColor: context.streamColorScheme.backgroundApp, body: Column( @@ -40,28 +58,27 @@ class GalleryShell extends StatelessWidget { ), // Content area below toolbar Expanded( - child: Row( - children: [ - // Widgetbook area - Expanded( - child: Widgetbook.material( - lightTheme: materialTheme, - darkTheme: materialTheme, - themeMode: isDark ? .dark : .light, - directories: directories, - home: const GalleryHomePage(), - appBuilder: (context, child) => PreviewWrapper(child: child), - ), - ), - // Theme customization panel - if (showThemePanel) ...[ - const SizedBox( - width: 340, - child: ThemeCustomizationPanel(), + child: isSmallScreen + ? Stack( + children: [ + widgetbookWidget, + if (showThemePanel) ...[ + Align(alignment: Alignment.topRight, child: themePanel), + ], + ], + ) + : Row( + children: [ + // Widgetbook area + Expanded( + child: widgetbookWidget, + ), + // Theme customization panel + if (showThemePanel) ...[ + themePanel, + ], + ], ), - ], - ], - ), ), ], ), From db4f07d67871c42941062c44ab069deb1590f94f Mon Sep 17 00:00:00 2001 From: Rene Floor Date: Thu, 29 Jan 2026 10:21:21 +0100 Subject: [PATCH 2/4] add const --- apps/design_system_gallery/lib/app/gallery_shell.dart | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/design_system_gallery/lib/app/gallery_shell.dart b/apps/design_system_gallery/lib/app/gallery_shell.dart index 0c773a5..e645690 100644 --- a/apps/design_system_gallery/lib/app/gallery_shell.dart +++ b/apps/design_system_gallery/lib/app/gallery_shell.dart @@ -43,8 +43,8 @@ class GalleryShell extends StatelessWidget { ); final themePanel = ConstrainedBox( - constraints: BoxConstraints(maxWidth: 340), - child: ThemeCustomizationPanel(), + constraints: const BoxConstraints(maxWidth: 340), + child: const ThemeCustomizationPanel(), ); return Scaffold( From cc7007ea9850df9360569bf183007ab6fb845dfc Mon Sep 17 00:00:00 2001 From: Sahil Kumar Date: Thu, 5 Feb 2026 01:10:18 +0530 Subject: [PATCH 3/4] feat: animate theme panel and fix layout overflows - Refactor `GalleryShell` to use `AnimatedSlide` for the theme panel and `AnimatedPadding` for the content. - Fix text overflow issues in `GalleryHomePage` and color swatches. - Set minimum window size for macOS. --- .../lib/app/gallery_shell.dart | 80 +++++++++---------- apps/design_system_gallery/lib/app/home.dart | 10 ++- .../lib/primitives/colors.dart | 11 ++- .../macos/Runner/MainFlutterWindow.swift | 3 + 4 files changed, 56 insertions(+), 48 deletions(-) diff --git a/apps/design_system_gallery/lib/app/gallery_shell.dart b/apps/design_system_gallery/lib/app/gallery_shell.dart index d28742d..9911658 100644 --- a/apps/design_system_gallery/lib/app/gallery_shell.dart +++ b/apps/design_system_gallery/lib/app/gallery_shell.dart @@ -8,12 +8,16 @@ import '../widgets/toolbar/toolbar.dart'; import 'gallery_app.directories.g.dart'; import 'home.dart'; +/// Width of the theme customization panel. +const kThemePanelWidth = 340.0; + +/// Widgetbook's breakpoint for desktop mode. +const kWidgetbookDesktopBreakpoint = 840.0; + +/// Animation duration for panel transitions. +const kPanelAnimationDuration = Duration(milliseconds: 250); + /// The main shell that wraps the widgetbook with custom Stream branding. -/// -/// This widget provides the overall layout including: -/// - Top toolbar with branding and controls -/// - Main widgetbook content area -/// - Optional theme customization panel class GalleryShell extends StatelessWidget { const GalleryShell({ super.key, @@ -28,23 +32,19 @@ class GalleryShell extends StatelessWidget { Widget build(BuildContext context) { final materialTheme = Theme.of(context); final isDark = materialTheme.brightness == .dark; + final screenWidth = MediaQuery.sizeOf(context).width; - final isSmallScreen = MediaQuery.of(context).size.width < 600; - - final widgetbookWidget = Expanded( - child: Widgetbook.material( - lightTheme: materialTheme, - darkTheme: materialTheme, - themeMode: isDark ? .dark : .light, - directories: _collapseDirectories(directories), - home: const GalleryHomePage(), - appBuilder: (context, child) => PreviewWrapper(child: child), - ), - ); + // Use overlay on small screens, side-by-side on large screens + final widgetbookWidth = showThemePanel ? screenWidth - kThemePanelWidth : screenWidth; + final useOverlay = widgetbookWidth < kWidgetbookDesktopBreakpoint; - final themePanel = ConstrainedBox( - constraints: const BoxConstraints(maxWidth: 340), - child: const ThemeCustomizationPanel(), + final widgetbook = Widgetbook.material( + lightTheme: materialTheme, + darkTheme: materialTheme, + themeMode: isDark ? .dark : .light, + directories: _collapseDirectories(directories), + home: const GalleryHomePage(), + appBuilder: (context, child) => PreviewWrapper(child: child), ); return Scaffold( @@ -58,27 +58,27 @@ class GalleryShell extends StatelessWidget { ), // Content area below toolbar Expanded( - child: isSmallScreen - ? Stack( - children: [ - widgetbookWidget, - if (showThemePanel) ...[ - Align(alignment: Alignment.topRight, child: themePanel), - ], - ], - ) - : Row( - children: [ - // Widgetbook area - Expanded( - child: widgetbookWidget, - ), - // Theme customization panel - if (showThemePanel) ...[ - themePanel, - ], - ], + child: Stack( + children: [ + // Widgetbook area + AnimatedPadding( + curve: Curves.easeInOut, + duration: kPanelAnimationDuration, + padding: .only(right: (!useOverlay && showThemePanel) ? kThemePanelWidth : 0), + child: widgetbook, + ), + // Theme customization panel + Align( + alignment: .centerRight, + child: AnimatedSlide( + duration: kPanelAnimationDuration, + curve: Curves.easeInOut, + offset: showThemePanel ? Offset.zero : const Offset(1, 0), + child: const SizedBox(width: kThemePanelWidth, child: ThemeCustomizationPanel()), ), + ), + ], + ), ), ], ), diff --git a/apps/design_system_gallery/lib/app/home.dart b/apps/design_system_gallery/lib/app/home.dart index 5ba65a5..25b759a 100644 --- a/apps/design_system_gallery/lib/app/home.dart +++ b/apps/design_system_gallery/lib/app/home.dart @@ -176,10 +176,12 @@ class _GettingStartedHint extends StatelessWidget { color: colorScheme.accentPrimary, ), SizedBox(width: spacing.sm), - Text( - 'Select a component from the sidebar to get started', - style: textTheme.captionDefault.copyWith( - color: colorScheme.accentPrimary, + Flexible( + child: Text( + 'Select a component from the sidebar to get started', + style: textTheme.captionDefault.copyWith( + color: colorScheme.accentPrimary, + ), ), ), ], diff --git a/apps/design_system_gallery/lib/primitives/colors.dart b/apps/design_system_gallery/lib/primitives/colors.dart index 1b1d34f..6eba653 100644 --- a/apps/design_system_gallery/lib/primitives/colors.dart +++ b/apps/design_system_gallery/lib/primitives/colors.dart @@ -146,10 +146,13 @@ class _FullWidthSwatchCard extends StatelessWidget { ), ), SizedBox(width: spacing.sm), - Text( - '— ${data.usage}', - style: textTheme.captionDefault.copyWith( - color: colorScheme.textTertiary, + Expanded( + child: Text( + '— ${data.usage}', + overflow: TextOverflow.ellipsis, + style: textTheme.captionDefault.copyWith( + color: colorScheme.textTertiary, + ), ), ), ], diff --git a/apps/design_system_gallery/macos/Runner/MainFlutterWindow.swift b/apps/design_system_gallery/macos/Runner/MainFlutterWindow.swift index 3cc05eb..9792888 100644 --- a/apps/design_system_gallery/macos/Runner/MainFlutterWindow.swift +++ b/apps/design_system_gallery/macos/Runner/MainFlutterWindow.swift @@ -8,6 +8,9 @@ class MainFlutterWindow: NSWindow { self.contentViewController = flutterViewController self.setFrame(windowFrame, display: true) + // Set minimum window size to prevent layout issues + self.minSize = NSSize(width: 400, height: 700) + RegisterGeneratedPlugins(registry: flutterViewController) super.awakeFromNib() From ce24f1fc91402507b7b77c40af47037c94652c1b Mon Sep 17 00:00:00 2001 From: Sahil Kumar Date: Thu, 5 Feb 2026 01:10:56 +0530 Subject: [PATCH 4/4] feat: integrate Marionette --- apps/design_system_gallery/lib/main.dart | 4 ++++ apps/design_system_gallery/pubspec.yaml | 2 ++ 2 files changed, 6 insertions(+) diff --git a/apps/design_system_gallery/lib/main.dart b/apps/design_system_gallery/lib/main.dart index cc9edd8..72a4e89 100644 --- a/apps/design_system_gallery/lib/main.dart +++ b/apps/design_system_gallery/lib/main.dart @@ -1,7 +1,11 @@ +import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; +import 'package:marionette_flutter/marionette_flutter.dart'; import 'app/gallery_app.dart'; void main() { + // Initialize Marionette only in debug mode + if (kDebugMode) MarionetteBinding.ensureInitialized(); runApp(const StreamDesignSystemGallery()); } diff --git a/apps/design_system_gallery/pubspec.yaml b/apps/design_system_gallery/pubspec.yaml index d584373..8f34e37 100644 --- a/apps/design_system_gallery/pubspec.yaml +++ b/apps/design_system_gallery/pubspec.yaml @@ -12,6 +12,7 @@ dependencies: flutter: sdk: flutter flutter_colorpicker: ^1.1.0 + marionette_flutter: ^0.3.0 provider: ^6.1.5+1 stream_core_flutter: path: ../../packages/stream_core_flutter @@ -23,6 +24,7 @@ dev_dependencies: build_runner: ^2.10.5 flutter_test: sdk: flutter + marionette_mcp: ^0.3.0 widgetbook_generator: ^3.20.1 flutter: