How to change text after button click using Bloc flutter - flutter

Question

So I'm learning basics of bloc and I wanted to know how to change a text using a button without setstate(), this whole time ive been using setstate but I would like to know how to change a text after a button click using bloc, state, event.
This is what I have so far
Main.dart
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MultiProvider(
providers: [
BlocProvider(
create: (_) => SecscreenBloc(),
),
],
child: MaterialApp(
onGenerateRoute: Routes().onGenerateRoute,
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: SecScreen()),
);
}
}
SecScreen.dart
class SecScreen extends StatefulWidget {
const SecScreen({Key? key}) : super(key: key);
#override
State<SecScreen> createState() => _SecScreenState();
}
class _SecScreenState extends State<SecScreen> {
var numm = 1;
#override
Widget build(BuildContext context) {
return BlocProvider(
create: (context) => SecscreenBloc()..add(LoadSecscreenEvent(numm)),
child: Scaffold(
appBar: AppBar(
title: Text("Bloc Increment"),
),
body: BlocBuilder<SecscreenBloc,SecscreenState>(
builder: (context,state){
if(state is SecScreenLoadedState){
return Column(
children: [
Text("Activity: ${state.number}"),
SizedBox(height: 30),
ElevatedButton(
onPressed: () => BlocProvider.of<SecscreenBloc>(context).add(LoadSecscreenEvent(
numm
)),
child: Icon(Icons.add),
),
],
);
}
return Container(
color: Colors.red,
);
}
),
),
);
}
}
SecScreen_event.dart
abstract class SecscreenEvent extends Equatable {
const SecscreenEvent();
}
class LoadSecscreenEvent extends SecscreenEvent{
final int number;
LoadSecscreenEvent(this.number);
#override
List<Object?> get props => [number];
}
SecScreen_state.dart
part of 'secscreen_bloc.dart';
abstract class SecscreenState extends Equatable {
const SecscreenState();
}
class SecscreenInitial extends SecscreenState {
#override
List<Object> get props => [];
}
class SecScreenLoadedState extends SecscreenState{
final int number;
SecScreenLoadedState(this.number);
#override
List<Object?> get props => [number];
}
secscreen_bloc.dart
class SecscreenBloc extends Bloc<SecscreenEvent, SecscreenState> {
SecscreenBloc() : super(SecscreenInitial()) {
on<LoadSecscreenEvent>((event, emit) {
if (event is LoadSecscreenEvent){
emit(SecScreenLoadedState(event.number + 1));
}
});
}
}
I've been stuck at this for an embarssingly long time, would appreciate some help!

Answer 1

actually it is changed every time you press but every time the value gone to the bloc 1 and back 2 so you did not see the effection
just change the following line
onPressed: () => BlocProvider.of<SecscreenBloc>(context).add(LoadSecscreenEvent(
numm
)),
to this one :
onPressed: () => BlocProvider.of<SecscreenBloc>(context)
.add(LoadSecscreenEvent(state.number)),