formvalidation

login_screen.dart

import 'package:doctor/features/presentation/widgets/custom_button.dart';
import 'package:doctor/res/custom_colors.dart';
import 'package:doctor/res/custom_textstyles.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';

import '../create_an_account_screen.dart';
import '../main_bottom_navigation_screen.dart';

class LoginScreen extends StatelessWidget {
  static const String id = 'login_screen';
  final _formKey = GlobalKey<FormState>();

  LoginScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: CustomColors.lightGrey,
      body: BlocProvider(
        create: (_) => CounterCubit(),
        child: Form(
          key: _formKey,
          child: Padding(
            padding: const EdgeInsets.all(16.0),
            child: Center(
              child: SingleChildScrollView(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Card(
                      elevation: 5,
                      color: Colors.white,
                      child: Padding(
                        padding: const EdgeInsets.all(10.0),
                        child: Column(
                          children: [
                            const Icon(
                              Icons.person,
                              size: 100,
                              color: Colors.blue,
                            ),
                            ValidationTextFieldWithIcon(
                              validator: (value) {
                                if (value!.isEmpty) {
                                  return 'Field can\'t be empty';
                                }
                                if (value.length > 10 || value.length < 10) {
                                  return 'Enter a valid Email Id.';
                                }
                                return null;
                              },
                              label: "Email ID",
                              icon: Icons.mail,
                              obscure: false,
                              onChanged: (value) {},
                            ),
                            const SizedBox(
                              height: 15,
                            ),
                            ValidationTextFieldWithIcon(
                              validator: (value) {
                                if (value!.isEmpty) {
                                  return 'Field can\'t be empty';
                                }
                                if (value.length < 6) {
                                  return 'Minimum 6 characters are required';
                                }
                                return null;
                              },
                              label: "Password",
                              icon: Icons.lock,
                              obscure: true,
                              onChanged: (value) {},
                            ),
                            const SizedBox(
                              height: 15,
                            ),
                            ValidationTextFieldWithIcon(
                              validator: (value) {
                                if (value!.isEmpty) {
                                  return 'Field can\'t empty';
                                }
                                return null;
                              },
                              label: "Client ID",
                              icon: Icons.person,
                              obscure: true,
                              onChanged: (value) {},
                            ),
                            const SizedBox(
                              height: 20,
                            ),
                            CustomButton(
                                text: "Sign in",
                                onClick: () {
                                  if (_formKey.currentState?.validate() ==
                                      true) {
                                    Navigator.pushNamed(
                                        context, MainBottomNavigationScreen.id);
                                  }
                                }),
                            const SizedBox(
                              height: 20,
                            ),
                          ],
                        ),
                      ),
                    ),
                    const SizedBox(
                      height: 20,
                    ),
                    GestureDetector(
                      onTap: () {
                        Navigator.pushNamed(context, CreateAnAccountScreen.id);
                      },
                      child: Text(
                        "Don't have an account? Register here!",
                        style: CustomTextStyles.semiBold12(CustomColors.blue),
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

class ValidationTextFieldWithIcon extends StatelessWidget {
  final String label;
  final IconData icon;
  final bool obscure;
  final String? Function(String?) onChanged;
  final String? Function(String?) validator;

  const ValidationTextFieldWithIcon(
      {Key? key,
      required this.label,
      required this.icon,
      required this.obscure,
      required this.onChanged,
      required this.validator})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return TextFormField(
      onChanged: onChanged,
      validator: validator,
      style: CustomTextStyles.regular14(CustomColors.blue),
      decoration: InputDecoration(
          fillColor: Colors.white,
          enabledBorder: UnderlineInputBorder(
            borderSide: BorderSide(color: CustomColors.blue),
          ),
          focusedBorder: UnderlineInputBorder(
            borderSide: BorderSide(color: CustomColors.darkBlue),
          ),
          filled: true,
          prefix: Padding(
            padding: const EdgeInsets.only(right: 10),
            child: Icon(
              icon,
              size: 15,
              color: CustomColors.blue,
            ),
          ),
          contentPadding: const EdgeInsets.symmetric(horizontal: 10),
          floatingLabelBehavior: FloatingLabelBehavior.auto,
          labelStyle: CustomTextStyles.regular14(CustomColors.blue),
          labelText: label),
      autofocus: true,
      obscureText: obscure,
    );
  }
}

class CounterCubit extends Cubit<int> {
  CounterCubit() : super(0);

  void increment() => emit(state + 1);
  void decrement() => emit(state - 1);
}