Bloc (State Management) Form Validation using Bloc

 abstract class SignInState {}

class SignInInitialState extends SignInState {}

class SignInValidState extends SignInState {}

class SignInErrorState extends SignInState {
  final String errorMessage;
  SignInErrorState(this.errorMessage);
}

class SignInLoadingState extends SignInState {}

abstract class SignInEvent {}

class SignInTextChangedEvent extends SignInEvent {
  final String emailValue;
  final String passwordValue;
  SignInTextChangedEvent(this.emailValue, this.passwordValue);
}

class SignInSubmittedEvent extends SignInEvent {
  final String email;
  final String password;
  SignInSubmittedEvent(this.email, this.password);
}

import "package:email_validator/email_validator.dart";
import "package:firebase/Stateless_Component_UI/Bloc%20Sign%20In/sign_in/Bloc/sign_in_event.dart";
import "package:firebase/Stateless_Component_UI/Bloc%20Sign%20In/sign_in/Bloc/sign_in_state.dart";
import "package:flutter_bloc/flutter_bloc.dart";

class SignInBloc extends Bloc<SignInEvent, SignInState>
{
  SignInBloc() : super(SignInInitialState()) {
    on<SignInTextChangedEvent>((event, emit) {
      if(EmailValidator.validate(event.emailValue) == false)
        {
          emit(SignInErrorState("Please Enter a valid email address"));
        }
      else if(event.passwordValue.length < 8)
        {
          emit(SignInErrorState("Please Enter a valid password"));
        }
      else
        {
          emit(SignInValidState());
        }
    },);

    on<SignInSubmittedEvent>((event, emit) {
      emit(SignInLoadingState());
    },);
  }
}

import "package:firebase/Stateless_Component_UI/Bloc%20Sign%20In/sign_in/Bloc/sign_in_bloc.dart";
import "package:firebase/Stateless_Component_UI/Bloc%20Sign%20In/sign_in/Bloc/sign_in_event.dart";
import "package:firebase/Stateless_Component_UI/Bloc%20Sign%20In/sign_in/Bloc/sign_in_state.dart";
import "package:flutter/material.dart";
import "package:flutter_bloc/flutter_bloc.dart";

class SignInScreen extends StatelessWidget {
  SignInScreen({super.key});

  TextEditingController emailController = TextEditingController();
  TextEditingController passwordController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Form Validation"),
        centerTitle: true,
        backgroundColor: Colors.grey,
      ),
      body: Center(
        child: Container(
          width: 300.0,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              BlocBuilder<SignInBloc, SignInState>(
                builder: (context, state) {
                  if (state is SignInErrorState) {
                    return Text(state.errorMessage,
                      style: const TextStyle(color: Colors.red),);
                  }
                  else {
                    return Container();
                  }
                },
              ),
              const SizedBox(height: 20.0),
              TextFormField(
                controller: emailController,
                onChanged: (value) {
                  BlocProvider.of<SignInBloc>(context).add(
                    SignInTextChangedEvent(emailController.text, passwordController.text),
                  );
                },
                decoration: const InputDecoration(
                  hintText: "Email Address",
                ),
              ),
              const SizedBox(height: 20.0),
              TextFormField(
                controller: passwordController,
                onChanged: (value) {
                  BlocProvider.of<SignInBloc>(context).add(
                    SignInTextChangedEvent(emailController.text, passwordController.text),
                  );
                },
                decoration: const InputDecoration(
                  hintText: "Password",
                ),
              ),
              const SizedBox(height: 40.0),
              BlocBuilder<SignInBloc, SignInState>(
                builder: (context, state) {

                  if(state is SignInLoadingState)
                    {
                      return const CircularProgressIndicator();
                    }

                  return ElevatedButton(
                    onPressed: () {
                      if(state is SignInValidState)
                        {
                          BlocProvider.of<SignInBloc>(context).add(
                            SignInSubmittedEvent(emailController.text, passwordController.text),
                          );
                        }
                    },
                    style: ElevatedButton.styleFrom(
                      fixedSize: const Size(350.0, 50.0),
                      backgroundColor: (state is SignInValidState) ? Colors.blue : Colors.grey,
                    ),
                    child: const Text("Sign In",
                      style: TextStyle(fontWeight: FontWeight.bold,
                          color: Colors.white,
                          fontSize: 20.0),
                    ),
                  );
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}


import "package:firebase/Stateless_Component_UI/Bloc%20Sign%20In/sign_in/Bloc/sign_in_bloc.dart";
import "package:firebase/Stateless_Component_UI/Bloc%20Sign%20In/sign_in/sign_in_screen.dart";
import "package:flutter/material.dart";
import "package:flutter_bloc/flutter_bloc.dart";

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Welcome Screen",
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.grey,
      ),
      home: const WelcomeScreen(),
    );
  }
}

class WelcomeScreen extends StatelessWidget {
  const WelcomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Welcome Screen"),
        centerTitle: true,
        backgroundColor: Colors.grey,
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text("Welcome",
              style: TextStyle(fontWeight: FontWeight.bold, fontSize: 30.0, color: Colors.blue),),
            const SizedBox(height: 50.0),
            ElevatedButton(
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (context) {
                      return BlocProvider(
                        create: (context) => SignInBloc(),
                        child: SignInScreen(),
                      );
                    },
                  ),
                );
              },
              style: ElevatedButton.styleFrom(
                fixedSize: const Size(350.0,50.0),
                backgroundColor: Colors.blue,
              ),
              child: const Text("Sign In with Email",
                style: TextStyle(color: Colors.white, fontSize: 20.0),),
            ),
            const SizedBox(height: 20.0),
            ElevatedButton(
              onPressed: () {},
              style: ElevatedButton.styleFrom(
                fixedSize: const Size(350.0,50.0),
                backgroundColor: Colors.blue,
              ),
              child: const Text("Sign In with Google",
                style: TextStyle(color: Colors.white, fontSize: 20.0),),
            ),
          ],
        ),
      ),
    );
  }
}