Bad state: add(ColorEvent) was called without a registered event handler. Make sure to register a handler via on<ColorEvent>((event, emit) {...})

Question

i am trying to implement flutter_bloc in my app, but i got error which is :

The following StateError was thrown while handling a gesture:

Bad state: add(ColorEvent) was called without a registered event handler.

Make sure to register a handler via on<ColorEvent>((event, emit) {...})

Here is my code of main.dart

import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:belajar_flutter/bloc_state_management_flutter_bloc.dart';
import 'package:belajar_flutter/color_bloc_flutter_bloc.dart';
 
void main() => runApp(
  const MyApp()
);
 
class MyApp extends StatelessWidget {
  const MyApp({key}) : super(key: key);
 
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: BlocProvider(
          create: (context) => ColorBlocFlutterBloc(),
          child: BlockStateManagementFlutterBloc()
      ),
    );
  }
}

Here is my code of bloc_state_management_flutter_bloc.dart

import 'package:belajar_flutter/color_bloc_flutter_bloc.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';

class BlockStateManagementFlutterBloc extends StatelessWidget {
  const BlockStateManagementFlutterBloc({key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: Row(
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          FloatingActionButton(
              backgroundColor: Colors.amber,
              onPressed: () {
                context.read<ColorBlocFlutterBloc>().add(ColorEvent.to_amber);
              }),
          const SizedBox(
            width: 10,
          ),
          FloatingActionButton(
              backgroundColor: Colors.lightBlue,
              onPressed: () {
                context.read<ColorBlocFlutterBloc>().add(ColorEvent.to_light_blue);
              }),
        ],
      ),
      appBar: AppBar(
        title: const Text('BLoC dengan flutter_bloc'),
      ),
      body: Center(
        child: BlocBuilder<ColorBlocFlutterBloc, Color>(
          builder: (context, state) => AnimatedContainer(
            duration: const Duration(milliseconds: 500),
            width: 100,
            height: 100,
            color: state,
          ),
        ),
      ),
    );
  }
}

and here is my code of color_bloc_flutter_bloc.dart

import 'package:flutter/material.dart';
import 'package:bloc/bloc.dart';

enum ColorEvent {to_amber, to_light_blue}

class ColorBlocFlutterBloc extends Bloc<ColorEvent, Color>{
  Color _color = Colors.amber;

  ColorBlocFlutterBloc() : super(Colors.amber);

  @override
  Color get initialState => Colors.amber;

  @override
  Stream<Color> mapEventToState(ColorEvent event) async* {
    _color = (event == ColorEvent.to_amber) ? Colors.amber : Colors.lightBlue;
    yield _color;
  }
}

I tried to replace flutter_bloc version with a higher one but got a problem instead