diff --git a/sites/docs/src/content/tools/widget-previewer.md b/sites/docs/src/content/tools/widget-previewer.md
index ec10e0f86f4..131506a8f42 100644
--- a/sites/docs/src/content/tools/widget-previewer.md
+++ b/sites/docs/src/content/tools/widget-previewer.md
@@ -182,71 +182,90 @@ a common set of properties, the [`Preview`][] annotation class can be
 extended to create custom preview annotations tailored for your project.
 
 Here's an example of a custom preview annotation that provides
-theming data:
+custom theming data to material widgets:
 
 ```dart
-final class MyCustomPreview extends Preview {
-  const MyCustomPreview({
-    super.name,
-    super.group,
-    super.size,
-    super.textScaleFactor,
-    super.wrapper,
-    super.brightness,
-    super.localizations,
-  }) : super(theme: MyCustomPreview.themeBuilder);
-
-  static PreviewThemeData themeBuilder() {
-    return PreviewThemeData(
-      materialLight: ThemeData.light(),
-      materialDark: ThemeData.dark(),
-    );
-  }
+final class const MyCustomPreview({
+  super.name,
+  super.group,
+  super.size,
+  super.textScaleFactor,
+  super.wrapper,
+  super.brightness,
+  super.localizations,
+}) extends Preview {
+  this : super(theme: PreviewMaterialThemeData.new);
+}
+
+final class const PreviewMaterialThemeData() extends PreviewThemeData {
+  @override
+  Widget apply(BuildContext context, Widget child) => Theme(
+    data: .from(colorScheme: .fromSeed(seedColor: Colors.lime)),
+    child: child,
+  );
 }
 ```
 
+![Providing ThemeData using custom Preview annotation in Flutter Widget Previewer](/assets/images/docs/tools/widget-previewer/custom-preview.png "Injecting ThemeData in Preview annotation")
+
 Extending the [`Preview`][] annotation class also allows for overriding
 the [`Preview.transform()`][] method. This method is invoked by the widget previewer
 and can be used to modify the preview at runtime, allowing for preview
 configurations that would not otherwise be possible in a `const` context:
 
 ```dart
-final class TransformativePreview extends Preview {
-  const TransformativePreview({
-    super.name,
-    super.group,
-    super.size,
-    super.textScaleFactor,
-    super.wrapper,
-    super.brightness,
-    super.localizations,
-  });
-
-  // Note: this is no longer public or static as it's injected
-  // at runtime when transform() is invoked.
-  PreviewThemeData _themeBuilder() {
-    return PreviewThemeData(
-      materialLight: ThemeData.light(),
-      materialDark: ThemeData.dark(),
-    );
-  }
+final class const TransformativePreview({
+  super.name,
+  super.group,
+  super.size,
+  super.textScaleFactor,
+  super.wrapper,
+  super.brightness,
+  super.localizations,
+}) extends Preview {
+  PreviewThemeData _themeBuilder() =>
+      PreviewMaterialThemeData(brightness: brightness);
 
   @override
   Preview transform() {
     final originalPreview = super.transform();
+
+    final themeVariant = switch (brightness) {
+      null => 'Responsive',
+      final b => b.name,
+    };
+
     // Creates a PreviewBuilder that can be used to modify
     // the preview contents.
     final builder = originalPreview.toBuilder();
     builder
-      ..name = 'Transformed - ${originalPreview.name}'
+      ..name = 'Transformed - ${originalPreview.name}[$themeVariant]'
       ..theme = _themeBuilder;
 
     // Returns the updated Preview instance.
-    return builder.toPreview();
+    return builder.build();
+  }
+}
+
+final class const PreviewMaterialThemeData({final Brightness? _brightness})
+    extends PreviewThemeData {
+  @override
+  Widget apply(BuildContext context, Widget child) {
+    return Theme(
+      data: .from(
+        colorScheme: .fromSeed(
+          seedColor: Colors.lime,
+          brightness: _brightness ?? MediaQuery.platformBrightnessOf(context),
+        ),
+      ),
+      child: child,
+    );
   }
 }
 ```
 
+![Runtime transformations to Preview annotation in Flutter Widget Previewer](/assets/images/docs/tools/widget-previewer/transformative-preview.webp "Runtime transformations in Preview annotation")
+
 ## Creating multiple preview configurations
 
 Creating multiple previews with different configurations can be as
diff --git a/sites/docs/web/assets/images/docs/tools/widget-previewer/custom-preview.png b/sites/docs/web/assets/images/docs/tools/widget-previewer/custom-preview.png
new file mode 100644
index 00000000000..603e10b7df0
Binary files /dev/null and b/sites/docs/web/assets/images/docs/tools/widget-previewer/custom-preview.png differ
diff --git a/sites/docs/web/assets/images/docs/tools/widget-previewer/transformative-preview.webp b/sites/docs/web/assets/images/docs/tools/widget-previewer/transformative-preview.webp
new file mode 100644
index 00000000000..e96c3f94bcd
Binary files /dev/null and b/sites/docs/web/assets/images/docs/tools/widget-previewer/transformative-preview.webp differ