Extract YaruWatermark from YaruBanner

example/lib/pages/banner_page.dart

@@ -18,26 +18,28 @@ class BannerPage extends StatelessWidget {
       ),
       children: [
         for (int i = 0; i < 20; i++)
-          YaruBanner(
-            title: Text('YaruBanner $i'),
-            subtitle: Column(
-              crossAxisAlignment: CrossAxisAlignment.start,
-              children: [
-                const Text('Description'),
-                if (i.isEven) const Text('Third line'),
-              ],
-            ),
-            icon: Icon(
-              YaruIcons.weather_clear,
-              size: 80,
-              color: Theme.of(context).primaryColor,
-            ),
-            onTap: () => showAboutDialog(context: context),
-            surfaceTintColor: i.isEven ? Colors.pink : null,
-            watermarkIcon: const Icon(
+          YaruWatermark(
+            watermark: const Icon(
               Icons.cloud,
               size: 100,
             ),
+            child: YaruBanner(
+              title: Text('YaruBanner $i'),
+              subtitle: Column(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: [
+                  const Text('Description'),
+                  if (i.isEven) const Text('Third line'),
+                ],
+              ),
+              icon: Icon(
+                YaruIcons.weather_clear,
+                size: 80,
+                color: Theme.of(context).primaryColor,
+              ),
+              onTap: () => showAboutDialog(context: context),
+              surfaceTintColor: i.isEven ? Colors.pink : null,
+            ),
           )
       ],
     );

lib/src/utilities/yaru_banner.dart

@@ -10,7 +10,6 @@ class YaruBanner extends StatelessWidget {
     required this.title,
     required this.icon,
     this.subtitle,
-    this.watermarkIcon,
     this.iconPadding = const EdgeInsets.only(left: 10),
   });
 
@@ -33,9 +32,6 @@ class YaruBanner extends StatelessWidget {
   /// Padding for the leading icon. Defaults to `EdgeInsets.only(left: 10)`
   final EdgeInsets iconPadding;
 
-  /// Optional [Widget] placed as the watermark
-  final Widget? watermarkIcon;
-
   @override
   Widget build(BuildContext context) {
     final borderRadius = BorderRadius.circular(10);
@@ -50,30 +46,14 @@ class YaruBanner extends StatelessWidget {
         onTap: onTap,
         borderRadius: borderRadius,
         hoverColor: Theme.of(context).colorScheme.onSurface.withOpacity(0.1),
-        child: Stack(
-          alignment: Alignment.center,
-          children: [
-            _Banner(
-              icon: icon,
-              iconPadding: iconPadding,
-              title: title,
-              subtitle: subtitle,
-              borderRadius: borderRadius,
-              color: surfaceTintColor ?? defaultCardColor,
-              elevation: light ? 4 : 6,
-            ),
-            if (watermarkIcon != null)
-              Padding(
-                padding: const EdgeInsets.only(right: 20),
-                child: Align(
-                  alignment: Alignment.centerRight,
-                  child: Opacity(
-                    opacity: 0.1,
-                    child: watermarkIcon,
-                  ),
-                ),
-              ),
-          ],
+        child: _Banner(
+          icon: icon,
+          iconPadding: iconPadding,
+          title: title,
+          subtitle: subtitle,
+          borderRadius: borderRadius,
+          color: surfaceTintColor ?? defaultCardColor,
+          elevation: light ? 4 : 6,
         ),
       ),
     );

lib/src/utilities/yaru_watermark.dart

@@ -0,0 +1,57 @@
+import 'package:flutter/widgets.dart';
+
+/// A translucent watermark rendered on top of its child.
+///
+/// ```dart
+/// YaruWatermark(
+///   watermark: Icon(Icons.cloud)
+///   child: YaruBanner(
+///     ...
+///   ),
+/// )
+/// ```
+class YaruWatermark extends StatelessWidget {
+  const YaruWatermark({
+    super.key,
+    required this.watermark,
+    required this.child,
+    this.alignment = AlignmentDirectional.centerEnd,
+    this.padding = const EdgeInsets.all(20),
+    this.opacity = 0.1,
+  });
+
+  /// The watermark to display in front.
+  final Widget watermark;
+
+  /// The widget below this widget in the tree.
+  final Widget child;
+
+  /// The alignment of the [watermark]. Defaults to [AlignmentDirectional.centerEnd].
+  final AlignmentGeometry alignment;
+
+  /// The amount of space by which to inset the [watermark]. Defaults to
+  /// `EdgeInsets.all(20)`.
+  final EdgeInsets padding;
+
+  /// The opacity of the watermark. Defaults to 0.1.
+  final double opacity;
+
+  @override
+  Widget build(BuildContext context) {
+    return Stack(
+      children: [
+        child,
+        Padding(
+          padding: padding,
+          child: Align(
+            alignment: alignment,
+            child: Opacity(
+              opacity: opacity,
+              child: watermark,
+            ),
+          ),
+        ),
+      ],
+    );
+  }
+}

lib/yaru_widgets.dart

@@ -49,3 +49,4 @@ export 'src/utilities/yaru_draggable.dart';
 export 'src/utilities/yaru_expandable.dart';
 export 'src/utilities/yaru_expansion_panel_list.dart';
 export 'src/utilities/yaru_selectable_container.dart';
+export 'src/utilities/yaru_watermark.dart';