fix: 🐛 improve Canvas

widgetbook · Sep 9, 2022 · a179f8e · a179f8e
1 parent 3d52df0
commit a179f8e
Show file tree

Hide file tree

Showing 7 changed files with 93 additions and 18 deletions.
diff --git a/examples/widgetbook_example/widgetbook/widgetbook.dart b/examples/widgetbook_example/widgetbook/widgetbook.dart
@@ -30,15 +30,11 @@ class HotreloadWidgetbook extends StatelessWidget {
     return Widgetbook.material(
       addons: [
         ...configureMaterialAddons(
-          themeSetting: MaterialThemeSetting(
+          themeSetting: MaterialThemeSetting.firstAsSelected(
             themes: [
               WidgetbookTheme(name: 'Light', data: lightTheme),
               WidgetbookTheme(name: 'Dark', data: darkTheme),
             ],
-            activeThemes: {
-              WidgetbookTheme(name: 'Light', data: lightTheme),
-              WidgetbookTheme(name: 'Dark', data: darkTheme),
-            },
           ),
           textScaleSetting: TextScaleSetting.firstAsSelected(
             textScales: [

diff --git a/packages/widgetbook/lib/src/addons/cupertino_theme_addon/cupertino_theme_setting.dart b/packages/widgetbook/lib/src/addons/cupertino_theme_addon/cupertino_theme_setting.dart
@@ -6,4 +6,26 @@ class CupertinoThemeSetting extends ThemeSetting<CupertinoThemeData> {
     required super.themes,
     required super.activeThemes,
   });
+
+  /// Sets the first theme within `themes` as the active theme on
+  /// startup
+  factory CupertinoThemeSetting.firstAsSelected({
+    required List<WidgetbookTheme<CupertinoThemeData>> themes,
+  }) {
+    return CupertinoThemeSetting(
+      activeThemes: themes.take(1).toSet(),
+      themes: themes,
+    );
+  }
+
+  /// Sets all `themes` as the active themes on
+  /// startup
+  factory CupertinoThemeSetting.allAsSelected({
+    required List<WidgetbookTheme<CupertinoThemeData>> themes,
+  }) {
+    return CupertinoThemeSetting(
+      activeThemes: themes.toSet(),
+      themes: themes,
+    );
+  }
 }
diff --git a/packages/widgetbook/lib/src/addons/material_theme_addon/material_theme_setting.dart b/packages/widgetbook/lib/src/addons/material_theme_addon/material_theme_setting.dart
@@ -6,4 +6,26 @@ class MaterialThemeSetting extends ThemeSetting<ThemeData> {
     required super.themes,
     required super.activeThemes,
   });
+
+  /// Sets the first theme within `themes` as the active theme on
+  /// startup
+  factory MaterialThemeSetting.firstAsSelected({
+    required List<WidgetbookTheme<ThemeData>> themes,
+  }) {
+    return MaterialThemeSetting(
+      activeThemes: themes.take(1).toSet(),
+      themes: themes,
+    );
+  }
+
+  /// Sets all `themes` as the active themes on
+  /// startup
+  factory MaterialThemeSetting.allAsSelected({
+    required List<WidgetbookTheme<ThemeData>> themes,
+  }) {
+    return MaterialThemeSetting(
+      activeThemes: themes.toSet(),
+      themes: themes,
+    );
+  }
 }
diff --git a/packages/widgetbook/lib/src/addons/theme_addon/theme_provider.dart b/packages/widgetbook/lib/src/addons/theme_addon/theme_provider.dart
@@ -2,5 +2,5 @@ import 'package:flutter/material.dart';
 import 'package:widgetbook/widgetbook.dart';
 
 class ThemeProvider<T> extends ValueNotifier<WidgetbookTheme<T>> {
-  ThemeProvider(WidgetbookTheme<T> data) : super(data);
+  ThemeProvider(super.data);
 }
diff --git a/packages/widgetbook/lib/src/addons/theme_addon/theme_selection_provider.dart b/packages/widgetbook/lib/src/addons/theme_addon/theme_selection_provider.dart
@@ -2,14 +2,14 @@ import 'package:flutter/material.dart';
 import 'package:widgetbook/widgetbook.dart';
 
 class ThemeSettingProvider<T> extends ValueNotifier<ThemeSetting<T>> {
-  ThemeSettingProvider(ThemeSetting<T> data) : super(data);
+  ThemeSettingProvider(super.data);
 
-  void tapped(WidgetbookTheme<T> locale) {
+  void tapped(WidgetbookTheme<T> theme) {
     final currentSelection = Set<WidgetbookTheme<T>>.from(value.activeThemes);
-    if (currentSelection.contains(locale)) {
-      currentSelection.remove(locale);
+    if (currentSelection.contains(theme)) {
+      currentSelection.remove(theme);
     } else {
-      currentSelection.add(locale);
+      currentSelection.add(theme);
     }
 
     value = value.copyWith(activeThemes: currentSelection);

diff --git a/packages/widgetbook/lib/src/addons/theme_addon/theme_setting.dart b/packages/widgetbook/lib/src/addons/theme_addon/theme_setting.dart
@@ -7,6 +7,28 @@ class ThemeSetting<T> {
     required this.activeThemes,
   });
 
+  /// Sets the first theme within `themes` as the active theme on
+  /// startup
+  factory ThemeSetting.firstAsSelected({
+    required List<WidgetbookTheme<T>> themes,
+  }) {
+    return ThemeSetting(
+      activeThemes: themes.take(1).toSet(),
+      themes: themes,
+    );
+  }
+
+  /// Sets all `themes` as the active themes on
+  /// startup
+  factory ThemeSetting.allAsSelected({
+    required List<WidgetbookTheme<T>> themes,
+  }) {
+    return ThemeSetting(
+      activeThemes: themes.toSet(),
+      themes: themes,
+    );
+  }
+
   final List<WidgetbookTheme<T>> themes;
   final Set<WidgetbookTheme<T>> activeThemes;
 

diff --git a/packages/widgetbook/lib/src/workbench/renderer.dart b/packages/widgetbook/lib/src/workbench/renderer.dart
@@ -5,10 +5,10 @@ import 'package:widgetbook/src/addons/addon_provider.dart';
 
 class Renderer extends StatelessWidget {
   const Renderer({
-    Key? key,
+    super.key,
     required this.useCaseBuilder,
     required this.appBuilder,
-  }) : super(key: key);
+  });
 
   final Widget Function(BuildContext) useCaseBuilder;
   final Widget Function(BuildContext, Widget child) appBuilder;
@@ -58,16 +58,29 @@ class Renderer extends StatelessWidget {
         index: 0,
       );
     } else {
-      return Row(
-        children: Iterable.generate(
-          multiPropertyAddon.selectionCount(context),
-          (value) => _buildPreview(
+      final renders = Iterable.generate(
+        multiPropertyAddon.selectionCount(context),
+        (value) => Padding(
+          padding: const EdgeInsets.all(8),
+          child: _buildPreview(
             context,
             addons: addons,
             multiPropertyAddon: multiPropertyAddon,
             index: value,
           ),
-        ).toList(),
+        ),
+      ).toList();
+      return ListView.separated(
+        scrollDirection: Axis.horizontal,
+        itemCount: renders.length,
+        itemBuilder: (context, index) {
+          final item = renders.elementAt(index);
+          return item;
+        },
+        separatorBuilder: (context, index) => const SizedBox(
+          width: 8,
+          height: 8,
+        ),
       );
     }
   }