Episode 5

README.md

@@ -10,3 +10,4 @@ You can [find this tutorial here in my YouTube channel](https://www.youtube.com/
 * [Episode 02: Camera and World components](https://youtu.be/nyUayMgZqDg), [source-code (episode-2 branch)](https://github.com/imaNNeo/flutter_color_switch_game/tree/episode-2)
 * [Episode 03: Sprite & Custom Components](https://youtu.be/Xb5ySgetpmU), [source-code (episode-3 branch)](https://github.com/imaNNeo/flutter_color_switch_game/tree/episode-3)
 * [Episode 04: Collision detection](https://youtu.be/w6hEuWPnXQc), [source-code (episode-4 branch)](https://github.com/imaNNeo/flutter_color_switch_game/tree/episode-4)
+* [Episode 05: Pause menu, Decorators and Overlays](https://youtu.be/ISSty1nQ-uQ), [source-code (episode-5 branch)](https://github.com/imaNNeo/flutter_color_switch_game/tree/episode-5)

lib/main.dart

@@ -4,5 +4,82 @@ import 'package:flutter/material.dart';
 import 'my_game.dart';
 
 void main() {
-  runApp(GameWidget(game: MyGame()));
+  runApp(MaterialApp(
+    home: const HomePage(),
+    theme: ThemeData.dark(),
+  ));
+}
+
+class HomePage extends StatefulWidget {
+  const HomePage({super.key});
+
+  @override
+  State<HomePage> createState() => _HomePageState();
+}
+
+class _HomePageState extends State<HomePage> {
+  late MyGame _myGame;
+
+  @override
+  void initState() {
+    _myGame = MyGame();
+    super.initState();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      body: Stack(
+        children: [
+          GameWidget(game: _myGame),
+          if (_myGame.isGamePlaying)
+            Align(
+              alignment: Alignment.topLeft,
+              child: IconButton(
+                onPressed: () {
+                  setState(() {
+                    _myGame.pauseGame();
+                  });
+                },
+                icon: const Icon(Icons.pause),
+              ),
+            ),
+          if (_myGame.isGamePaused)
+            Container(
+              color: Colors.black45,
+              child: Center(
+                child: Column(
+                  mainAxisAlignment: MainAxisAlignment.center,
+                  children: [
+                    const Text(
+                      'PAUSED!',
+                      style: TextStyle(
+                        color: Colors.white,
+                        fontSize: 48,
+                        fontWeight: FontWeight.bold,
+                      ),
+                    ),
+                    SizedBox(
+                      width: 140,
+                      height: 140,
+                      child: IconButton(
+                        onPressed: () {
+                          setState(() {
+                            _myGame.resumeGame();
+                          });
+                        },
+                        icon: const Icon(
+                          Icons.play_arrow,
+                          size: 140,
+                        ),
+                      ),
+                    ),
+                  ],
+                ),
+              ),
+            ),
+        ],
+      ),
+    );
+  }
 }

lib/my_game.dart

@@ -4,13 +4,15 @@ import 'package:flame/camera.dart';
 import 'package:flame/components.dart';
 import 'package:flame/events.dart';
 import 'package:flame/game.dart';
+import 'package:flame/rendering.dart';
 import 'package:flutter/material.dart';
 
 import 'circle_rotator.dart';
 import 'color_switcher.dart';
 import 'ground.dart';
 
-class MyGame extends FlameGame with TapCallbacks, HasCollisionDetection {
+class MyGame extends FlameGame
+    with TapCallbacks, HasCollisionDetection, HasDecorator, HasTimeScale {
   late Player myPlayer;
 
   final List<Color> gameColors;
@@ -32,6 +34,12 @@ class MyGame extends FlameGame with TapCallbacks, HasCollisionDetection {
   @override
   Color backgroundColor() => const Color(0xff222222);
 
+  @override
+  void onLoad() {
+    decorator = PaintDecorator.blur(0);
+    super.onLoad();
+  }
+
   @override
   void onMount() {
     _initializeGame();
@@ -69,7 +77,6 @@ class MyGame extends FlameGame with TapCallbacks, HasCollisionDetection {
       size: Vector2(200, 200),
     ));
 
-
     world.add(ColorSwitcher(position: Vector2(0, -200)));
     world.add(CircleRotator(
       position: Vector2(0, -400),
@@ -83,4 +90,18 @@ class MyGame extends FlameGame with TapCallbacks, HasCollisionDetection {
     }
     _initializeGame();
   }
+
+  bool get isGamePaused => timeScale == 0.0;
+
+  bool get isGamePlaying => !isGamePaused;
+
+  void pauseGame() {
+    (decorator as PaintDecorator).addBlur(10);
+    timeScale = 0.0;
+  }
+
+  void resumeGame() {
+    (decorator as PaintDecorator).addBlur(0);
+    timeScale = 1.0;
+  }
 }