how to change state in Bloc? - flutter

Question

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 => [];
}

Answer 1

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

Answer 2

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()),
...
);