Flutter Bloc is not emitting or triggering the event - flutter

Question

I am building a mobile application using Flutter. I am using Bloc Flutter library. I am a beginner to Flutter BloC. Now, I am refactoring my login form using BLoC. But it seems that it is not dispatching the BLoC event when the login button is clicked.
I have the LoginBloc class with the following code:
class LoginBloc extends Bloc<LoginEvent, LoginState> {
LoginBloc() : super(LoginState.initial()) {
on<LoginEvent>((event, emit) {
// yield the state here. check the event and then process the event and yield the state based on the result.
if (event is Login) {
ApiService.post(ApiEndpoints.login, {
'email': event.email,
'password': event.password
}).then((response) => () {
if (response.statusCode == 200) {
// TODO: provide implementation
var responseJson = jsonDecode(response.body);
MeData meData = MeData.fromJson(responseJson['data']);
} else {
ApiError apiError = Utilities.parseApiError(response.body);
emit(LoginState(event.email, event.password, false, apiError));
}
}).onError((error, stackTrace) => () {
var apiError = ApiError();
apiError.setGenericErrorMessage("Something went wrong!");
emit(LoginState(event.email, event.password, false, apiError));
});
}
});
}
}
The is my login_event.dart file:
part of 'login_bloc.dart';
#immutable
abstract class LoginEvent extends Equatable {
const LoginEvent();
}
class Login extends LoginEvent {
final String email = "";
final String password = "";
const Login(email, password);
#override
List<Object?> get props => [
email,
password
];
}
This is my login_state.dart file:
part of 'login_bloc.dart';
class LoginState extends Equatable {
final String email;
final String password;
final bool isLoading;
final ApiError error;
const LoginState(this.email, this.password, this.isLoading, this.error);
static LoginState initial()
{
return LoginState("", "", false, ApiError());
}
#override
List<Object?> get props => [
email,
password,
isLoading,
error
];
}
This is my login.dart file (screen)
class LoginPage extends StatefulWidget {
final String title = 'Login';
#override
State<LoginPage> createState() => _LoginPage();
}
class _LoginPage extends State<LoginPage> {
final GlobalKey<FormState> _formKey = GlobalKey<FormState>();
String? _email;
String? _password;
ApiError _apiError = ApiError();
#override
void initState() {
super.initState();
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title)
),
body: BlocBuilder<LoginBloc, LoginState>(
builder: (context, state) {
return Center(
child: Form(
key: _formKey,
child: Column(
children: [
GenericFormError(errorMessage: state.error.getGenericErrorMessage()),
Padding(
padding: const EdgeInsets.all(10),
child: TextFormField(
decoration: InputDecoration(
labelText: "Email",
border: const OutlineInputBorder(),
errorText: _apiError.getFieldError("email")
),
onChanged: (value) => setState(() {
_email = value;
}),
validator: (value) {
if (value == null || value.isEmpty) {
return "Please enter email";
}
return null;
},
),
),
Padding(
padding: const EdgeInsets.all(10),
child: TextFormField(
obscureText: true,
enableSuggestions: false,
autocorrect: false,
decoration: InputDecoration(
labelText: "Password",
border: const OutlineInputBorder(),
errorText: _apiError.getFieldError("password")
),
onChanged: (value) => setState(() {
_password = value;
}),
validator: (value) {
if (value == null || value.isEmpty) {
return "Please enter password";
}
return null;
},
),
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 10),
child: SizedBox(
width: double.infinity,
height: 50,
child: ElevatedButton(
onPressed: () {
var isValid = _formKey.currentState!.validate();
if (isValid) {
context.read<LoginBloc>().add(Login(_email.toString(), _password.toString()));
}
},
child: const Text('Login'),
),
),
),
],
),
)
);
}
),
);
}
}
As you can see in the login form, when the button is clicked and form is valid, I am dispatching the BLoC event using this code.
context.read<LoginBloc>().add(Login(_email.toString(), _password.toString()));
But it is not triggering LoginBloc() at all. What is wrong with my code and how can I fix it? It is not throwing any errors either.
This is how I initialised the Bloc Provider:
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MultiBlocProvider(
providers: [
BlocProvider(create: (BuildContext context) {
return LoginBloc();
})
],
child: MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(title: 'Shar Kya Mal'),
));
}
}

Answer 1

I think you haven't initialized the bloc provider for it yet. You can wrap whole widget with bloc provider and init LoginBloc or init on file app
Adding Bloc Provider in file app.dart
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData.dark(),
home: Scaffold(
body: BlocProvider(
create: (context) => NameBloc(NameBlocRepository()),
child: HomeScreen(),
),
));
}
}
or this
init bloc service and add to bloc provider
_nameBloc = nameBloc(blocService: _blocService);
return MultiBlocProvider(
providers: [ BlocProvider.value( value: _userBloc, )], child: MaterialApp