Pointer Events


This document describes the new events API. The old (legacy) approach, which is still supported, is described in Gesture Input.

Pointer events are Flutter’s generalized “mouse-movement”-type events (for desktop or web).

If you want to interact with mouse movement events within your component or game, you can use the PointerMoveCallbacks mixin.

For example:

class MyComponent extends PositionComponent with PointerMoveCallbacks {
  MyComponent() : super(size: Vector2(80, 60));

  void onPointerMove(PointerMoveEvent event) {
    // Do something in response to the mouse move (e.g. update coordinates)

The mixin adds two overridable methods to your component:

  • onPointerMove: called when the mouse moves within the component

  • onPointerMoveStop: called once if the component was being hovered and the mouse leaves

By default, each of these methods does nothing, they need to be overridden in order to perform any function.

In addition, the component must implement the containsLocalPoint() method (already implemented in PositionComponent, so most of the time you don’t need to do anything here) – this method allows Flame to know whether the event occurred within the component or not.

Note that only mouse events happening within your component will be proxied along. However, onPointerMoveStop will be fired once on the first mouse movement that leaves your component, so you can handle any exit conditions there.


If you want to specifically know if your component is being hovered or not, or if you want to hook into hover enter and exist events, you can use a more dedicated mixin called HoverCallbacks.

For example:

class MyComponent extends PositionComponent with HoverCallbacks {

  MyComponent() : super(size: Vector2(80, 60));

  void update(double dt) {
    // use `isHovered` to know if the component is being hovered

  void onHoverEnter() {
    // Do something in response to the mouse entering the component

  void onHoverExit() {
    // Do something in response to the mouse leaving the component

Note that you can still listen to the “raw” onPointerMove methods for additional functionality, just make sure to call the super version to enable the HoverCallbacks behavior.


Play with the demo below to see the pointer hover events in action.

 1import 'dart:math';
 3import 'package:flame/components.dart';
 4import 'package:flame/events.dart';
 5import 'package:flame/game.dart';
 6import 'package:flutter/rendering.dart';
 8class PointerEventsGame extends FlameGame with TapCallbacks {
 9  @override
10  Future<void> onLoad() async {
11    add(HoverTarget(Vector2(100, 200)));
12    add(HoverTarget(Vector2(300, 300)));
13    add(HoverTarget(Vector2(400, 50)));
14  }
16  @override
17  void onTapDown(TapDownEvent event) {
18    add(HoverTarget(event.localPosition));
19  }
22class HoverTarget extends PositionComponent with HoverCallbacks {
23  static final Random _random = Random();
25  HoverTarget(Vector2 position)
26      : super(
27          position: position,
28          size: Vector2.all(50),
29          anchor: Anchor.center,
30        );
32  final _paint = Paint()
33    ..color = HSLColor.fromAHSL(1, _random.nextDouble() * 360, 1, 0.8)
34        .toColor()
35        .withOpacity(0.5);
37  @override
38  void render(Canvas canvas) {
39    canvas.drawRect(size.toRect(), _paint);
40  }
42  @override
43  void onHoverEnter() {
44    _paint.color = _paint.color.withOpacity(1);
45  }
47  @override
48  void onHoverExit() {
49    _paint.color = _paint.color.withOpacity(0.5);
50  }