Work around Flutter bug for ColorEffect and fix broken links (#1178)

* Fix `ColorEffect` Flutter bug and example links

* Remove accidental code

* Fix `ColorEffect` test

examples/lib/stories/input/input.dart

@@ -18,6 +18,30 @@ import 'tappables_example.dart';
 
 void addInputStories(Dashbook dashbook) {
   dashbook.storiesOf('Input')
+    ..add(
+      'Tappables',
+      (_) => GameWidget(game: TappablesExample()),
+      codeLink: baseLink('input/tappables_example.dart'),
+      info: TappablesExample.description,
+    )
+    ..add(
+      'Draggables',
+      (context) {
+        return GameWidget(
+          game: DraggablesExample(
+            zoom: context.listProperty('zoom', 1, [0.5, 1, 1.5]),
+          ),
+        );
+      },
+      codeLink: baseLink('input/draggables_example.dart'),
+      info: DraggablesExample.description,
+    )
+    ..add(
+      'Hoverables',
+      (_) => GameWidget(game: HoverablesExample()),
+      codeLink: baseLink('input/hoverables_example.dart'),
+      info: HoverablesExample.description,
+    )
     ..add(
       'Keyboard',
       (_) => GameWidget(game: KeyboardExample()),
@@ -57,36 +81,12 @@ void addInputStories(Dashbook dashbook) {
       codeLink: baseLink('input/multitap_advanced_example.dart'),
       info: MultitapAdvancedExample.description,
     )
-    ..add(
-      'Tappables',
-      (_) => GameWidget(game: TappablesExample()),
-      codeLink: baseLink('input/tappables_example.dart'),
-      info: TappablesExample.description,
-    )
     ..add(
       'Overlapping Tappables',
       (_) => GameWidget(game: OverlappingTappablesExample()),
       codeLink: baseLink('input/overlapping_tappables_example.dart'),
       info: OverlappingTappablesExample.description,
     )
-    ..add(
-      'Draggables',
-      (context) {
-        return GameWidget(
-          game: DraggablesExample(
-            zoom: context.listProperty('zoom', 1, [0.5, 1, 1.5]),
-          ),
-        );
-      },
-      codeLink: baseLink('input/draggables_example.dart'),
-      info: DraggablesExample.description,
-    )
-    ..add(
-      'Hoverables',
-      (_) => GameWidget(game: HoverablesExample()),
-      codeLink: baseLink('input/hoverables_example.dart'),
-      info: HoverablesExample.description,
-    )
     ..add(
       'Joystick',
       (_) => GameWidget(game: JoystickExample()),

examples/lib/stories/parallax/parallax.dart

@@ -17,7 +17,7 @@ void addParallaxStories(Dashbook dashbook) {
     ..add(
       'Basic',
       (_) => GameWidget(game: BasicParallaxExample()),
-      codeLink: baseLink('parallax/basic_animation_example.dart'),
+      codeLink: baseLink('parallax/basic_parallax_example.dart'),
       info: BasicParallaxExample.description,
     )
     ..add(

examples/lib/stories/rendering/rendering.dart

@@ -20,13 +20,13 @@ void addRenderingStories(Dashbook dashbook) {
     ..add(
       'Isometric Tile Map',
       (_) => GameWidget(game: IsometricTileMapExample()),
-      codeLink: baseLink('tile_maps/isometric_tile_map_example.dart'),
+      codeLink: baseLink('rendering/isometric_tile_map_example.dart'),
       info: IsometricTileMapExample.description,
     )
     ..add(
       'Nine Tile Box',
       (_) => GameWidget(game: NineTileBoxExample()),
-      codeLink: baseLink('utils/nine_tile_box_example.dart'),
+      codeLink: baseLink('rendering/nine_tile_box_example.dart'),
       info: NineTileBoxExample.description,
     )
     ..add(
@@ -44,7 +44,7 @@ void addRenderingStories(Dashbook dashbook) {
     ..add(
       'Particles',
       (_) => GameWidget(game: ParticlesExample()),
-      codeLink: baseLink('utils/particles_example.dart'),
+      codeLink: baseLink('rendering/particles_example.dart'),
       info: ParticlesExample.description,
     );
 }

examples/lib/stories/sprites/sprites.dart

@@ -14,7 +14,7 @@ void addSpritesStories(Dashbook dashbook) {
     ..add(
       'Basic Sprite',
       (_) => GameWidget(game: BasicSpriteExample()),
-      codeLink: baseLink('sprites/basic_animation_example.dart'),
+      codeLink: baseLink('sprites/basic_sprite_example.dart'),
       info: BasicSpriteExample.description,
     )
     ..add(

examples/lib/stories/system/system.dart

@@ -17,13 +17,13 @@ void addSystemStories(Dashbook dashbook) {
     ..add(
       'Overlay',
       overlayBuilder,
-      codeLink: baseLink('widgets/overlays_example.dart'),
+      codeLink: baseLink('system/overlays_example.dart'),
       info: OverlaysExample.description,
     )
     ..add(
       'Without FlameGame',
       (_) => GameWidget(game: NoFlameGameExample()),
-      codeLink: baseLink('utils/without_flamegame_example.dart'),
+      codeLink: baseLink('system/without_flamegame_example.dart'),
       info: NoFlameGameExample.description,
     );
 }

examples/lib/stories/widgets/custom_painter_example.dart

@@ -10,7 +10,7 @@ class CustomPainterExample extends FlameGame with TapDetector {
 
     On the screen you can see a component using a custom painter being
     rendered on a FlameGame, and if you tap, that same painter is used to
-    show the happy face on a widget overlay.
+    show a smiley on a widget overlay.
   ''';
 
   @override
@@ -22,10 +22,10 @@ class CustomPainterExample extends FlameGame with TapDetector {
 
   @override
   void onTap() {
-    if (overlays.isActive('HappyFace')) {
-      overlays.remove('HappyFace');
+    if (overlays.isActive('Smiley')) {
+      overlays.remove('Smiley');
     } else {
-      overlays.add('HappyFace');
+      overlays.add('Smiley');
     }
   }
 }
@@ -34,10 +34,10 @@ Widget customPainterBuilder(DashbookContext ctx) {
   return GameWidget(
     game: CustomPainterExample(),
     overlayBuilderMap: {
-      'HappyFace': (context, game) {
+      'Smiley': (context, game) {
         return Center(
           child: Container(
-            color: Colors.white,
+            color: Colors.transparent,
             width: 200,
             height: 200,
             child: Column(
@@ -45,7 +45,7 @@ Widget customPainterBuilder(DashbookContext ctx) {
                 const Text(
                   'Hey, I can be a widget too!',
                   style: TextStyle(
-                    color: Colors.black,
+                    color: Colors.white70,
                   ),
                 ),
                 const SizedBox(height: 32),

packages/flame/lib/src/effects/color_effect.dart

@@ -1,3 +1,5 @@
+import 'dart:math';
+
 import 'package:flutter/material.dart';
 
 import '../../components.dart';
@@ -33,7 +35,10 @@ class ColorEffect extends ComponentEffect<HasPaint> {
   @override
   void apply(double progress) {
     final currentColor = color.withOpacity(
-      _tween.transform(progress),
+      // Currently there is a bug when opacity is 0 in the color filter.
+      // "Expected a value of type 'SkDeletable', but got one of type 'Null'"
+      // https://github.com/flutter/flutter/issues/89433
+      max(_tween.transform(progress), 1 / 255),
     );
     target.tint(currentColor, paintId: paintId);
     super.apply(progress);

packages/flame/test/effects/color_effect_test.dart

@@ -19,7 +19,11 @@ void main() {
       game.update(0);
       expect(
         component.paint.colorFilter.toString(),
-        equals('ColorFilter.mode(Color(0x00f44336), BlendMode.srcATop)'),
+        // Once https://github.com/flutter/flutter/issues/89433 has been fixed
+        // the two equals lines should be swapped and the ColorEffect should go
+        // to opacity 0.
+        //equals('ColorFilter.mode(Color(0x00f44336), BlendMode.srcATop)'),
+        equals('ColorFilter.mode(Color(0x01f44336), BlendMode.srcATop)'),
       );
 
       game.update(0.5);