how to change state in Bloc?

I'm learning about Bloc and have a problem

How to change from loading state to loaded state?

My code here:

test.dart
Looking for help from everyone

import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:helloapp/profile/bloc/popup/popup_bloc.dart';

class TestScreen extends StatelessWidget {
  const TestScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return BlocProvider(
      create: (_) => PopupBloc(),
      child: BlocBuilder<PopupBloc, PopupState>(
        builder: (context, state) {
          if (state is PopupLoadingState) {
            return Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                Container(
                  margin: EdgeInsets.symmetric(vertical: 50),
                    child: CircularProgressIndicator()
                ),
              ],
            );
          }
          if (state is PopupLoadedState) {
            return Text(state.avatar + state.phone + state.name);
          }
          return Text('123');
        },
      ),
    );
  }
}

popup_bloc.dart
Looking for help from everyone

import 'package:bloc/bloc.dart';
import 'package:equatable/equatable.dart';

part 'popup_event.dart';
part 'popup_state.dart';

class PopupBloc extends Bloc<PopupEvent, PopupState> {
  PopupBloc() : super(PopupLoadingState()) {
    on<PopupEvent>((event, emit) {
      emit(PopupLoadingState());
      emit(PopupLoadedState(avatar: '123', name: 'name', phone: 'phone'));
    });
  }
}

popup_event.dart

part of 'popup_bloc.dart';

abstract class PopupEvent extends Equatable {
  const PopupEvent();

  @override
  List<Object?> get props => [];
}

class PopupLoadingEvent extends PopupEvent{}

class PopupLoadedEvent extends PopupEvent{}

class PopupErrorEvent extends PopupEvent{}

popup_state.dart
Looking for help from everyone

part of 'popup_bloc.dart';

abstract class PopupState extends Equatable {
  const PopupState();
}

class PopupLoadingState extends PopupState {
  @override
  // TODO: implement props
  List<Object?> get props => [];

}

class PopupLoadedState extends PopupState {
  final String avatar;
  final String name;
  final String phone;

  PopupLoadedState({
    required this.avatar,
    required this.name,
    required this.phone
  });

  @override
  // TODO: implement props
  List<Object?> get props => [avatar, name, phone];

}

class PopupErrorState extends PopupState {
  @override
  // TODO: implement props
  List<Object?> get props => [];

}

try this

return BlocProvider(
          create: (_) => PopupBloc()..add(PopupEvent.PopupLoadingEvent())..add(PopupEvent.PopupLoadedEvent()),
         ...
    );

The event handlers should be registered for the specific event

class PopupBloc extends Bloc<PopupEvent, PopupState> {
  PopupBloc() : super(PopupLoadingState()) {
    on<PopupLoadingEvent>((event, emit) async {
      emit(PopupLoadingState());
      /// ... do some async operation and finally emit a loaded or error state
      emit(PopupLoadedState(avatar: '123', name: 'name', phone: 'phone'));
    });
  }
}

And trigger this on the creation of the bloc

return BlocProvider(
      create: (_) => PopupBloc()..add(PopupLoadingEvent()),
     ...
);