onTapDown callback does not work.

[Rodynos]

Good day,

I am a beginner with flame and flutter in general too. I just wanted to try the flame engine out. And I have been trying to us BLOC with it with the flame_bloc package. I have been trying to get a callback from a tap for quite a while now but I am completely lost. I do not have enough flutter and dart knowledge to find the answer myself too. And the documentation is not entirely clear for me. I have been using AI too most of the time to understand what is going on and how to do things but even that is not really helpful. So I request for your help to find out what I am doing wrong or where I am lacking. Thank you in advance.

Here is my main:

import 'package:flame/game.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:whack_a_dop/bloc/game_bloc.dart';
import 'package:whack_a_dop/game/whack_a_dop_game.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();

  final gameBloc = GameBloc();

  runApp(
    BlocProvider.value(
      value: gameBloc,
      child: GameWidget(
        game: WhackADopGame(gameBloc: gameBloc),
      ),
    ),
  );
}

Here is my game:

import 'package:flame/components.dart';
import 'package:flame/game.dart';
import 'package:whack_a_dop/bloc/game_bloc.dart';
import 'package:whack_a_dop/game/whack_a_dop_world.dart';

class WhackADopGame extends FlameGame{
  final GameBloc gameBloc;

  WhackADopGame({required this.gameBloc}) 
    : super(
        world: WhackADopWorld(gameBloc: gameBloc),
        camera: CameraComponent.withFixedResolution(width: 800, height: 600),
      );
}

Here is my world:

import 'package:flame/components.dart';
import 'package:flame/image_composition.dart';
import 'package:flame/rendering.dart';
import 'package:flame_bloc/flame_bloc.dart';
import 'package:whack_a_dop/bloc/game_bloc.dart';
import 'package:whack_a_dop/components/ball.dart';

class WhackADopWorld extends World with HasGameReference{
  final GameBloc gameBloc;

  WhackADopWorld({required this.gameBloc});

  @override
  Future<void> onLoad() async {
    super.onLoad();

    add(
      FlameBlocProvider<GameBloc, GameState>.value(
        value: gameBloc,
        children: [
          Ball(position: Vector2(100, 100))
            ..decorator = PaintDecorator.tint(const Color.fromARGB(180, 219, 120, 21)),
        ],
      ),
    );
  }
}

Here is my ball script:

import 'package:flame/components.dart';
import 'package:flame/events.dart';
import 'package:flame_bloc/flame_bloc.dart';
import 'package:flutter/material.dart';
import 'package:whack_a_dop/bloc/game_bloc.dart';

class Ball extends PositionComponent
    with TapCallbacks, FlameBlocReader<GameBloc, GameState>{
  
  double lifeTime = 2.0;
  
  Ball({required super.position}) : super(
          size: Vector2.all(60),
          anchor: Anchor.center,
        );

  @override
  void render(Canvas canvas) {
    final double radius = size.x / 2;
    final center = Offset(radius, radius);

    final outerPaint = Paint()..color = Color(0xFF888888);
    canvas.drawCircle(center, radius, outerPaint);

    final innerPaint = Paint()..color = Color(0xFFFFFFFF);
    canvas.drawCircle(center, radius * 0.7, innerPaint);
  }

  @override
  void update(double dt) {
    super.update(dt);

    lifeTime -= dt;

    if (lifeTime <= 0){
      bloc.add(EnemyMissed());
      removeFromParent();
    }
  }

  @override
  void onTapDown(TapDownEvent event) {
    bloc.add(EnemyClicked());
    removeFromParent();
  }
}

And lastly the game bloc:

import 'package:flutter_bloc/flutter_bloc.dart';

class GameState{
  final int score;
  GameState({required this.score});
}

abstract class GameEvent{}
class EnemyClicked extends GameEvent {}
class EnemyMissed extends GameEvent {}

class GameBloc extends Bloc<GameEvent, GameState>{
  GameBloc() : super(GameState(score: 10)){
    on<EnemyClicked>((event, emit){
      emit(GameState(score: state.score + 1));
      print(state.score);
    });

    on<EnemyMissed>((event, emit){
      emit(GameState(score: state.score - 1));
      print(state.score);
    });
  }
}

I apologize if I opened this discussion in a wrong way. I am really lost and I do not know what to do anymore. I do now know even if I have setup the bloc properly. Again. Thank you in advance.

[spydon]

Not an answer to your question, but are you sure that you need flame_bloc? It will be sooo much simpler without it.

[krish-techx]

I ran into the same issue where onTapDown was not triggering, even though everything seemed set up correctly.

In my case, the problem turned out to be related to how I was assigning the decorator.

Initially I had:

Ball(position: Vector2(100, 100))
  ..decorator = PaintDecorator.tint(
    const Color.fromARGB(180, 219, 120, 21),
  );

After changing it to:

Ball(position: Vector2(100, 100))
  ..decorator.addLast(
    PaintDecorator.tint(
      const Color.fromARGB(180, 219, 120, 21),
    ),
  );

onTapDown started working as expected.

---

Notes

• I also verified that TapCallbacks was added and the component had a defined size
• It’s possible that directly overriding decorator interferes with the component’s internal setup, while addLast() keeps the existing pipeline intact

---

Summary

If onTapDown is not triggering:

• Check input setup (TapCallbacks)
• Ensure the component has size/hitbox
• Try using decorator.addLast(...) instead of overriding decorator

This resolved the issue in my case.

[spydon]

This is documented here: https://docs.flame-engine.org/latest/flame/rendering/decorators.html#positioncomponent