Merge branch 'features/gradients' into main

README.md

@@ -9,6 +9,7 @@ Add decoration capabilities for the `Icon` widget with shadows, borders, gradien
 
 * Add shadows to icons
 * Add borders to icons
+* Add gradients to icons
 
 ![](https://raw.githubusercontent.com/TesteurManiak/icon_decoration/main/test/goldens/shadow_base_widget.png)
 
@@ -38,7 +39,3 @@ DecoratedIcon(
     ),
 )
 ```
-
-## TODO
-
-* Add support for gradients

lib/src/decorated_icon.dart

@@ -21,12 +21,13 @@ class DecoratedIcon extends StatelessWidget {
     final iconSize = icon.size ?? iconTheme.size ?? 24.0;
     final iconOpacity = iconTheme.opacity ?? 1.0;
     final border = decoration?.border;
+    final gradient = decoration?.gradient;
     Color iconColor = icon.color ?? iconTheme.color!;
     if (iconOpacity != 1.0) {
       iconColor = iconColor.withOpacity(iconColor.opacity * iconOpacity);
     }
 
-    final iconStyle = TextStyle(
+    TextStyle iconStyle = TextStyle(
       inherit: false,
       color: iconColor,
       fontSize: iconSize,
@@ -35,6 +36,15 @@ class DecoratedIcon extends StatelessWidget {
       shadows: decoration?.shadows,
     );
 
+    if (gradient != null) {
+      iconStyle = iconStyle.copyWith(
+        foreground: Paint()
+          ..shader = gradient.createShader(
+            Rect.fromLTWH(0, 0, iconSize, iconSize),
+          ),
+      );
+    }
+
     Widget iconWidget = RichText(
       overflow: TextOverflow.visible,
       textDirection: textDirection,

lib/src/icon_decoration.dart

@@ -13,13 +13,18 @@ class IconDecoration {
   /// Multiple shadows are supported to replicate lighting from multiple light
   /// sources.
   final List<Shadow>? shadows;
+
+  /// A border to draw above the icon color or [gradient].
   final IconBorder? border;
-  // final Gradient? gradient;
+
+  /// Apply a gradient to the icon. If this is specified the [Icon.color]
+  /// property has no effect.
+  final Gradient? gradient;
 
   /// Creates a `DecoratedIcon` decoration.
   const IconDecoration({
     this.shadows,
     this.border,
-    // this.gradient,
+    this.gradient,
   });
 }

test/borders_test.dart

@@ -19,7 +19,6 @@ void main() {
           ),
         ),
       );
-      addTearDown(tester.binding.window.clearPhysicalSizeTestValue);
     });
 
     customGoldenTest('Border with colorized icon', (tester) async {
@@ -34,7 +33,6 @@ void main() {
           ),
         ),
       );
-      addTearDown(tester.binding.window.clearPhysicalSizeTestValue);
     });
 
     customGoldenTest('Border with shadows', (tester) async {
@@ -58,7 +56,6 @@ void main() {
           ),
         ),
       );
-      addTearDown(tester.binding.window.clearPhysicalSizeTestValue);
     });
   });
 }

test/gradient_test.dart

@@ -0,0 +1,110 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:icon_decoration/icon_decoration.dart';
+
+import 'test_utils/base_widget.dart';
+import 'test_utils/custom_golden.dart';
+
+void main() {
+  group('Goldens Gradients', () {
+    const _rainbowGradient = LinearGradient(colors: [
+      Colors.red,
+      Colors.pink,
+      Colors.purple,
+      Colors.deepPurple,
+      Colors.deepPurple,
+      Colors.indigo,
+      Colors.blue,
+      Colors.lightBlue,
+      Colors.cyan,
+      Colors.teal,
+      Colors.green,
+      Colors.lightGreen,
+      Colors.lime,
+      Colors.yellow,
+      Colors.amber,
+      Colors.orange,
+      Colors.deepOrange,
+    ]);
+
+    customGoldenTest('Base gradient', (tester) async {
+      tester.binding.window.physicalSizeTestValue = const Size.square(100);
+      await tester.pumpWidget(
+        generateBaseApp(
+          child: const Center(
+            child: DecoratedIcon(
+              icon: Icon(Icons.all_inbox),
+              decoration: IconDecoration(
+                gradient: _rainbowGradient,
+              ),
+            ),
+          ),
+        ),
+      );
+    });
+
+    customGoldenTest('Gradient with shadows', (tester) async {
+      tester.binding.window.physicalSizeTestValue = const Size.square(100);
+      await tester.pumpWidget(
+        generateBaseApp(
+          child: const Center(
+            child: DecoratedIcon(
+              icon: Icon(Icons.all_inbox),
+              decoration: IconDecoration(
+                gradient: _rainbowGradient,
+                shadows: [
+                  Shadow(
+                    color: Colors.red,
+                    blurRadius: 3,
+                    offset: Offset(0, 2),
+                  )
+                ],
+              ),
+            ),
+          ),
+        ),
+      );
+    });
+
+    customGoldenTest('Gradient with border', (tester) async {
+      tester.binding.window.physicalSizeTestValue = const Size.square(100);
+      await tester.pumpWidget(
+        generateBaseApp(
+          child: const Center(
+            child: DecoratedIcon(
+              icon: Icon(Icons.all_inbox),
+              decoration: IconDecoration(
+                gradient: _rainbowGradient,
+                border: IconBorder(),
+              ),
+            ),
+          ),
+        ),
+      );
+    });
+
+    customGoldenTest('Gradient with border and shadow', (tester) async {
+      tester.binding.window.physicalSizeTestValue = const Size.square(100);
+      await tester.pumpWidget(
+        generateBaseApp(
+          child: const Center(
+            child: DecoratedIcon(
+              icon: Icon(Icons.all_inbox),
+              decoration: IconDecoration(
+                gradient: _rainbowGradient,
+                border: IconBorder(),
+                shadows: [
+                  Shadow(
+                    color: Colors.red,
+                    blurRadius: 3,
+                    offset: Offset(0, 2),
+                  )
+                ],
+              ),
+            ),
+          ),
+        ),
+      );
+    });
+  });
+}

test/shadows_test.dart

@@ -13,7 +13,6 @@ void main() {
         child: baseWidget,
         backgroundColor: Colors.black,
       ));
-      addTearDown(tester.binding.window.clearPhysicalSizeTestValue);
     });
 
     customGoldenTest('Default shadow', (tester) async {
@@ -28,7 +27,6 @@ void main() {
           ),
         ),
       );
-      addTearDown(tester.binding.window.clearPhysicalSizeTestValue);
     });
 
     customGoldenTest('Shadow with Offset(0, 6)', (tester) async {
@@ -45,7 +43,6 @@ void main() {
           ),
         ),
       );
-      addTearDown(tester.binding.window.clearPhysicalSizeTestValue);
     });
 
     customGoldenTest('Shadow with Offset(3, 0)', (tester) async {
@@ -62,7 +59,6 @@ void main() {
           ),
         ),
       );
-      addTearDown(tester.binding.window.clearPhysicalSizeTestValue);
     });
   });
 }

test/test_utils/custom_golden.dart

@@ -21,5 +21,6 @@ void customGoldenTest(
           .replaceAll(' ', '_')
           .replaceAll(RegExp(r'(?:|[^\w\s])+'), ''),
     );
+    addTearDown(tester.binding.window.clearPhysicalSizeTestValue);
   });
 }