docs: Adding darkness and brightness examples

examples/lib/stories/image/brighten.dart

@@ -0,0 +1,40 @@
+import 'package:flame/components.dart';
+import 'package:flame/extensions.dart';
+import 'package:flame/game.dart';
+
+class ImageBrightnessExample extends FlameGame {
+  ImageBrightnessExample({
+    required this.brightness,
+  });
+
+  final double brightness;
+
+  static const String description = '''
+     Shows how a dart:ui `Image` can be brightened using Flame Image extensions.
+     Use the properties on the side to change the brightness of the image.
+  ''';
+
+  @override
+  Future<void> onLoad() async {
+    final image = await images.load('flame.png');
+    final brightenedImage = await image.brighten(brightness / 100);
+
+    add(
+      SpriteComponent(
+        sprite: Sprite(image),
+        position: (size / 2) - Vector2(0, image.height / 2),
+        size: image.size,
+        anchor: Anchor.center,
+      ),
+    );
+
+    add(
+      SpriteComponent(
+        sprite: Sprite(brightenedImage),
+        position: (size / 2) + Vector2(0, brightenedImage.height / 2),
+        size: image.size,
+        anchor: Anchor.center,
+      ),
+    );
+  }
+}

examples/lib/stories/image/darken.dart

@@ -0,0 +1,40 @@
+import 'package:flame/components.dart';
+import 'package:flame/extensions.dart';
+import 'package:flame/game.dart';
+
+class ImageDarknessExample extends FlameGame {
+  ImageDarknessExample({
+    required this.darkness,
+  });
+
+  final double darkness;
+
+  static const String description = '''
+     Shows how a dart:ui `Image` can be darkened using Flame Image extensions.
+     Use the properties on the side to change the darkness of the image.
+  ''';
+
+  @override
+  Future<void> onLoad() async {
+    final image = await images.load('flame.png');
+    final darkenedImage = await image.darken(darkness / 100);
+
+    add(
+      SpriteComponent(
+        sprite: Sprite(image),
+        position: (size / 2) - Vector2(0, image.height / 2),
+        size: image.size,
+        anchor: Anchor.center,
+      ),
+    );
+
+    add(
+      SpriteComponent(
+        sprite: Sprite(darkenedImage),
+        position: (size / 2) + Vector2(0, darkenedImage.height / 2),
+        size: image.size,
+        anchor: Anchor.center,
+      ),
+    );
+  }
+}

examples/lib/stories/image/image.dart

@@ -1,6 +1,8 @@
 import 'package:dashbook/dashbook.dart';
 
 import 'package:examples/commons/commons.dart';
+import 'package:examples/stories/image/brighten.dart';
+import 'package:examples/stories/image/darken.dart';
 import 'package:examples/stories/image/resize.dart';
 import 'package:flame/game.dart';
 
@@ -19,5 +21,25 @@ void addImageStories(Dashbook dashbook) {
       ),
       codeLink: baseLink('image/resize.dart'),
       info: ImageResizeExample.description,
+    )
+    ..add(
+      'brightness',
+      (context) => GameWidget(
+        game: ImageBrightnessExample(
+          brightness: context.numberProperty('brightness', 50),
+        ),
+      ),
+      codeLink: baseLink('image/brighten.dart'),
+      info: ImageBrightnessExample.description,
+    )
+    ..add(
+      'darkness',
+      (context) => GameWidget(
+        game: ImageDarknessExample(
+          darkness: context.numberProperty('darkness', 50),
+        ),
+      ),
+      codeLink: baseLink('image/darkness.dart'),
+      info: ImageDarknessExample.description,
     );
 }