Adding CustomPainterComponent (#1067)

* Adding CustomPainterComponent * Apply suggestions from code review Co-authored-by: Lukas Klingsbo <lukas.klingsbo@gmail.com> Co-authored-by: Jochum van der Ploeg <jochum@vdploeg.net> * PR suggestions Co-authored-by: Lukas Klingsbo <lukas.klingsbo@gmail.com> Co-authored-by: Jochum van der Ploeg <jochum@vdploeg.net>
2025-11-02 11:43:19 +08:00 · 2021-11-02 19:56:16 -03:00
parent e394ad0f35
commit 45b21c7c5f
7 changed files with 218 additions and 0 deletions
--- a/examples/lib/stories/widgets/custom_painter_component.dart
+++ b/examples/lib/stories/widgets/custom_painter_component.dart
@ -0,0 +1,137 @@
+import 'package:dashbook/dashbook.dart';
+import 'package:flame/components.dart';
+import 'package:flame/game.dart';
+import 'package:flame/input.dart';
+import 'package:flutter/material.dart';
+
+Widget customPainterBuilder(DashbookContext ctx) {
+  return GameWidget(
+    game: CustomPainterGame(),
+    overlayBuilderMap: {
+      'HappyFace': (context, game) {
+        return Center(
+          child: Container(
+            color: Colors.white,
+            width: 200,
+            height: 200,
+            child: Column(
+              children: [
+                const Text(
+                  'Hey, I can be a widget too!',
+                  style: TextStyle(
+                    color: Colors.black,
+                  ),
+                ),
+                const SizedBox(height: 32),
+                SizedBox(
+                  height: 132,
+                  width: 132,
+                  child: CustomPaint(painter: PlayerCustomPainter()),
+                ),
+              ],
+            ),
+          ),
+        );
+      },
+    },
+  );
+}
+
+class PlayerCustomPainter extends CustomPainter {
+  late final facePaint = Paint()..color = Colors.yellow;
+
+  late final eyesPaint = Paint()..color = Colors.black;
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    final faceRadius = size.height / 2;
+
+    canvas.drawCircle(
+      Offset(
+        faceRadius,
+        faceRadius,
+      ),
+      faceRadius,
+      facePaint,
+    );
+
+    final eyeSize = faceRadius * 0.15;
+
+    canvas.drawCircle(
+      Offset(
+        faceRadius - (eyeSize * 2),
+        faceRadius - eyeSize,
+      ),
+      eyeSize,
+      eyesPaint,
+    );
+
+    canvas.drawCircle(
+      Offset(
+        faceRadius + (eyeSize * 2),
+        faceRadius - eyeSize,
+      ),
+      eyeSize,
+      eyesPaint,
+    );
+  }
+
+  @override
+  bool shouldRepaint(CustomPainter oldDelegate) {
+    return false;
+  }
+}
+
+class Player extends CustomPainterComponent with HasGameRef<CustomPainterGame> {
+  static const speed = 150;
+
+  int direction = 1;
+
+  @override
+  Future<void> onLoad() async {
+    await super.onLoad();
+
+    painter = PlayerCustomPainter();
+    size = Vector2.all(100);
+
+    y = 200;
+  }
+
+  @override
+  void update(double dt) {
+    super.update(dt);
+
+    x += speed * direction * dt;
+
+    if ((x + width >= gameRef.size.x && direction > 0) ||
+        (x <= 0 && direction < 0)) {
+      direction *= -1;
+    }
+  }
+}
+
+class CustomPainterGame extends FlameGame with TapDetector {
+  static const info = '''
+      Example demonstration how to use the CustomPainterComponent.
+
+      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.
+  ''';
+
+  @override
+  Future<void> onLoad() async {
+    await super.onLoad();
+
+    add(Player());
+  }
+
+  @override
+  void onTap() {
+    if (overlays.isActive('HappyFace')) {
+      overlays.remove('HappyFace');
+    } else {
+      overlays.add('HappyFace');
+    }
+  }
+}