feat(widgetbook): ✨ Theme needs to be accessible via the app builder …

…function

.vscode/launch.json

@@ -36,6 +36,13 @@
             "program": "widgetbook/main.dart",
             "type": "dart",
         },
+        {
+            "name": "Debug custom_widgetbook_example",
+            "cwd": "examples/custom_theme_example",
+            "request": "launch",
+            "program": "lib/main.widgetbook.dart",
+            "type": "dart",
+        },
         {
             "name": "Profile widgetbook_example",
             "cwd": "examples/widgetbook_example",

examples/custom_theme_example/.gitignore

@@ -0,0 +1,44 @@
+# Miscellaneous
+*.class
+*.log
+*.pyc
+*.swp
+.DS_Store
+.atom/
+.buildlog/
+.history
+.svn/
+migrate_working_dir/
+
+# IntelliJ related
+*.iml
+*.ipr
+*.iws
+.idea/
+
+# The .vscode folder contains launch configuration and tasks you configure in
+# VS Code which you may wish to be included in version control, so this line
+# is commented out by default.
+#.vscode/
+
+# Flutter/Dart/Pub related
+**/doc/api/
+**/ios/Flutter/.last_build_id
+.dart_tool/
+.flutter-plugins
+.flutter-plugins-dependencies
+.packages
+.pub-cache/
+.pub/
+/build/
+
+# Symbolication related
+app.*.symbols
+
+# Obfuscation related
+app.*.map.json
+
+# Android Studio will place build artifacts here
+/android/app/debug
+/android/app/profile
+/android/app/release

examples/custom_theme_example/.metadata

@@ -0,0 +1,45 @@
+# This file tracks properties of this Flutter project.
+# Used by Flutter tool to assess capabilities and perform upgrades etc.
+#
+# This file should be version controlled.
+
+version:
+  revision: 6928314d505d2bb4777be05e45d7808a5aa91d2a
+  channel: stable
+
+project_type: app
+
+# Tracks metadata for the flutter migrate command
+migration:
+  platforms:
+    - platform: root
+      create_revision: 6928314d505d2bb4777be05e45d7808a5aa91d2a
+      base_revision: 6928314d505d2bb4777be05e45d7808a5aa91d2a
+    - platform: android
+      create_revision: 6928314d505d2bb4777be05e45d7808a5aa91d2a
+      base_revision: 6928314d505d2bb4777be05e45d7808a5aa91d2a
+    - platform: ios
+      create_revision: 6928314d505d2bb4777be05e45d7808a5aa91d2a
+      base_revision: 6928314d505d2bb4777be05e45d7808a5aa91d2a
+    - platform: linux
+      create_revision: 6928314d505d2bb4777be05e45d7808a5aa91d2a
+      base_revision: 6928314d505d2bb4777be05e45d7808a5aa91d2a
+    - platform: macos
+      create_revision: 6928314d505d2bb4777be05e45d7808a5aa91d2a
+      base_revision: 6928314d505d2bb4777be05e45d7808a5aa91d2a
+    - platform: web
+      create_revision: 6928314d505d2bb4777be05e45d7808a5aa91d2a
+      base_revision: 6928314d505d2bb4777be05e45d7808a5aa91d2a
+    - platform: windows
+      create_revision: 6928314d505d2bb4777be05e45d7808a5aa91d2a
+      base_revision: 6928314d505d2bb4777be05e45d7808a5aa91d2a
+
+  # User provided section
+
+  # List of Local paths (relative to this file) that should be
+  # ignored by the migrate tool.
+  #
+  # Files that are not part of the templates will be ignored by default.
+  unmanaged_files:
+    - 'lib/main.dart'
+    - 'ios/Runner.xcodeproj/project.pbxproj'

examples/custom_theme_example/README.md

@@ -0,0 +1,5 @@
+# custom_theme_example
+
+An example of how to use a custom theme.
+
+

examples/custom_theme_example/analysis_options.yaml

@@ -0,0 +1,29 @@
+# This file configures the analyzer, which statically analyzes Dart code to
+# check for errors, warnings, and lints.
+#
+# The issues identified by the analyzer are surfaced in the UI of Dart-enabled
+# IDEs (https://dart.dev/tools#ides-and-editors). The analyzer can also be
+# invoked from the command line by running `flutter analyze`.
+
+# The following line activates a set of recommended lints for Flutter apps,
+# packages, and plugins designed to encourage good coding practices.
+include: package:flutter_lints/flutter.yaml
+
+linter:
+  # The lint rules applied to this project can be customized in the
+  # section below to disable rules from the `package:flutter_lints/flutter.yaml`
+  # included above or to enable additional rules. A list of all available lints
+  # and their documentation is published at
+  # https://dart-lang.github.io/linter/lints/index.html.
+  #
+  # Instead of disabling a lint rule for the entire project in the
+  # section below, it can also be suppressed for a single line of code
+  # or a specific dart file by using the `// ignore: name_of_lint` and
+  # `// ignore_for_file: name_of_lint` syntax on the line or in the file
+  # producing the lint.
+  rules:
+    # avoid_print: false  # Uncomment to disable the `avoid_print` rule
+    # prefer_single_quotes: true  # Uncomment to enable the `prefer_single_quotes` rule
+
+# Additional information about this file can be found at
+# https://dart.dev/guides/language/analysis-options

examples/custom_theme_example/lib/app_theme.dart

@@ -0,0 +1,33 @@
+import 'package:flutter/material.dart';
+import 'package:flutter/widgets.dart';
+
+class AppThemeData {
+  final Color color;
+
+  AppThemeData({
+    required this.color,
+  });
+}
+
+class AppTheme extends InheritedWidget {
+  const AppTheme({
+    Key? key,
+    required this.data,
+    required Widget child,
+  }) : super(
+          key: key,
+          child: child,
+        );
+
+  final AppThemeData data;
+
+  static AppThemeData of(BuildContext context) {
+    final widget = context.dependOnInheritedWidgetOfExactType<AppTheme>();
+    return widget!.data;
+  }
+
+  @override
+  bool updateShouldNotify(covariant AppTheme oldWidget) {
+    return data != oldWidget.data;
+  }
+}

examples/custom_theme_example/lib/awesome_widget.dart

@@ -0,0 +1,13 @@
+import 'package:custom_theme_example/app_theme.dart';
+import 'package:flutter/material.dart';
+
+class AwesomeWidget extends StatelessWidget {
+  const AwesomeWidget({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return ColoredBox(
+      color: AppTheme.of(context).color,
+    );
+  }
+}

examples/custom_theme_example/lib/main.dart

@@ -0,0 +1,47 @@
+import 'package:custom_theme_example/app_theme.dart';
+import 'package:flutter/material.dart';
+
+import 'main.widgetbook.dart';
+
+void main() {
+  runApp(const MyApp());
+}
+
+class MyApp extends StatelessWidget {
+  const MyApp({
+    super.key,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return AppTheme(
+        data: themeData,
+        child: MediaQuery.fromWindow(
+          child: const Directionality(
+            textDirection: TextDirection.ltr,
+            child: MyHomePage(),
+          ),
+        ));
+  }
+}
+
+class MyHomePage extends StatelessWidget {
+  const MyHomePage({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      backgroundColor: AppTheme.of(context).color,
+      body: Center(
+        child: Column(
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: const <Widget>[
+            Text(
+              'This is the home page',
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

examples/custom_theme_example/lib/main.widgetbook.dart

@@ -0,0 +1,103 @@
+import 'package:custom_theme_example/app_theme.dart';
+import 'package:custom_theme_example/awesome_widget.dart';
+import 'package:custom_theme_example/main.dart';
+import 'package:flutter/material.dart';
+import 'package:widgetbook/widgetbook.dart';
+import 'package:widgetbook_annotation/widgetbook_annotation.dart' as anno;
+
+void main() {
+  runApp(const HotReload());
+}
+
+@anno.WidgetbookTheme(name: 'Default')
+AppThemeData themeData = AppThemeData(
+  color: Colors.blue,
+);
+@anno.WidgetbookTheme(name: 'Appthem2')
+AppThemeData themeData2 = AppThemeData(
+  color: Colors.yellow,
+);
+
+class HotReload extends StatelessWidget {
+  const HotReload({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    final widgetbookTheme = WidgetbookTheme(
+      data: themeData,
+      name: 'App Theme',
+    );
+    final widgetbookTheme2 = WidgetbookTheme(
+      data: themeData2,
+      name: 'App Theme2',
+    );
+    final devices = [
+      Apple.iPhone11,
+      Apple.iPhone12,
+      const Device.special(
+        name: 'Test',
+        resolution: Resolution(
+          nativeSize: DeviceSize(width: 400, height: 400),
+          scaleFactor: 1,
+        ),
+      ),
+    ];
+    final deviceFrameBuilder = DeviceFrameBuilder(
+      devices: devices,
+    );
+    final activeFrameBuilder = WidgetbookFrameBuilder(
+      devices: devices,
+    );
+    return Widgetbook(
+        addons: [
+          DeviceAddon(
+            data: DeviceSelection(
+              activeFrameBuilder: activeFrameBuilder,
+              frameBuilders: [
+                activeFrameBuilder,
+                deviceFrameBuilder,
+              ],
+            ),
+          ),
+          CustomThemeAddon<AppThemeData>(
+            themeSetting: CustomThemeSetting.firstAsSelected(
+              themes: [widgetbookTheme, widgetbookTheme2],
+            ),
+          ),
+        ],
+        appInfo: AppInfo(name: 'Custom Theme Example'),
+        categories: [
+          WidgetbookCategory(
+            name: 'Default',
+            widgets: [
+              WidgetbookComponent(
+                name: 'Awesome Widget',
+                useCases: [
+                  WidgetbookUseCase(
+                    name: 'Default',
+                    builder: (context) => const AwesomeWidget(),
+                  )
+                ],
+              ),
+              WidgetbookComponent(
+                name: 'App Launch Screen',
+                useCases: [
+                  WidgetbookUseCase(
+                    name: 'Default',
+                    builder: (context) => const MyHomePage(),
+                  )
+                ],
+              ),
+            ],
+          )
+        ],
+        appBuilder: (context, child) {
+          final frameBuilder = context.frameBuilder;
+          final theme = context.theme<AppThemeData>();
+          return AppTheme(
+            data: theme,
+            child: frameBuilder.builder(context, child),
+          );
+        });
+  }
+}

examples/custom_theme_example/macos/.gitignore

@@ -0,0 +1,7 @@
+# Flutter-related
+**/Flutter/ephemeral/
+**/Pods/
+
+# Xcode-related
+**/dgph
+**/xcuserdata/

examples/custom_theme_example/macos/Flutter/Flutter-Debug.xcconfig

@@ -0,0 +1 @@
+#include "ephemeral/Flutter-Generated.xcconfig"

examples/custom_theme_example/macos/Flutter/Flutter-Release.xcconfig

@@ -0,0 +1 @@
+#include "ephemeral/Flutter-Generated.xcconfig"

examples/custom_theme_example/macos/Flutter/GeneratedPluginRegistrant.swift

@@ -0,0 +1,10 @@
+//
+//  Generated file. Do not edit.
+//
+
+import FlutterMacOS
+import Foundation
+
+
+func RegisterGeneratedPlugins(registry: FlutterPluginRegistry) {
+}