feat: add more validation styling and textfield size customization

CHANGELOG.md

@@ -1,38 +1,49 @@
+## 5.0.1
+
+- Added more options for styling the error/validation messages and allow height/width of TextFormField's to be changed.
+
 ## 5.0.0
-* Removed the redundant initialEmail parameter from 'ForgotPasswordForm'. The only one to use now is the one in the 'LoginOptions'.
+
+- Removed the redundant initialEmail parameter from 'ForgotPasswordForm'. The only one to use now is the one in the 'LoginOptions'.
 
 ## 4.2.0
-* Option for spacers add the start and end of the form
+
+- Option for spacers add the start and end of the form
 
 ## 4.1.1
-* Export default LoginValidationService
+
+- Export default LoginValidationService
 
 ## 4.1.0
-* Option to add spacers between all items
+
+- Option to add spacers between all items
 
 ## 4.0.0
-* More decoration options less default padding
+
+- More decoration options less default padding
 
 ## 3.1.2
-* Added textStyle option for email and password fields
+
+- Added textStyle option for email and password fields
 
 ## 3.1.1
-* Fix login values not copied to validation
+
+- Fix login values not copied to validation
 
 ## 3.0.0
-* Added login options to loginbuilders for more customization
+
+- Added login options to loginbuilders for more customization
 
 ## 2.0.1
 
-* Fixed email regex
+- Fixed email regex
 
 ## 2.0.0
 
-* add forgot password validation on button press
+- add forgot password validation on button press
-* add onDisabledPress param for methods
+- add onDisabledPress param for methods
-* correctly use initialEmail in forgot password screen
+- correctly use initialEmail in forgot password screen
-
 
 ## 0.0.1
 
-* TODO: Describe initial release.
+- TODO: Describe initial release.

example/pubspec.lock

@@ -68,7 +68,7 @@ packages:
       path: ".."
       relative: true
     source: path
-    version: "4.2.0"
+    version: "5.0.1"
   flutter_test:
     dependency: "direct dev"
     description: flutter

lib/src/config/login_options.dart

@@ -11,7 +11,13 @@ class LoginOptions {
     this.image,
     this.title,
     this.subtitle,
+    this.textFieldHeight,
+    this.textFieldWidth,
     this.maxFormWidth,
+    this.errorStyle = const TextStyle(
+      fontSize: 12.5,
+      color: Colors.red,
+    ),
     this.emailTextStyle,
     this.passwordTextStyle,
     this.emailDecoration = const InputDecoration(),
@@ -26,6 +32,7 @@ class LoginOptions {
     this.requestForgotPasswordButtonBuilder =
         _createRequestForgotPasswordButton,
     this.registrationButtonBuilder = _createRegisterButton,
+    this.errorMessageBuilder = _errorMessageBuilder,
     this.emailInputContainerBuilder = _createEmailInputContainer,
     this.passwordInputContainerBuilder = _createPasswordInputContainer,
   });
@@ -34,6 +41,7 @@ class LoginOptions {
   final ButtonBuilder registrationButtonBuilder;
   final ButtonBuilder forgotPasswordButtonBuilder;
   final ButtonBuilder requestForgotPasswordButtonBuilder;
+  final InputContainerBuilder errorMessageBuilder;
   final InputContainerBuilder emailInputContainerBuilder;
   final InputContainerBuilder passwordInputContainerBuilder;
 
@@ -47,10 +55,14 @@ class LoginOptions {
   /// Maximum width of the form. Defaults to 400.
   final double? maxFormWidth;
 
+  final double? textFieldHeight;
+  final double? textFieldWidth;
+
   final InputDecoration emailDecoration;
   final InputDecoration passwordDecoration;
   final String initialEmail;
   final String initialPassword;
+  final TextStyle? errorStyle;
   final TextStyle? emailTextStyle;
   final TextStyle? passwordTextStyle;
   final LoginTranslations translations;
@@ -81,12 +93,17 @@ class LoginTranslations {
 }
 
 Widget _createEmailInputContainer(Widget child) => Padding(
-      padding: const EdgeInsets.only(bottom: 15),
+      padding: const EdgeInsets.only(bottom: 8),
+      child: child,
+    );
+
+Widget _errorMessageBuilder(Widget child) => Padding(
+      padding: const EdgeInsets.only(left: 16, top: 4),
       child: child,
     );
 
 Widget _createPasswordInputContainer(Widget child) => Padding(
-      padding: const EdgeInsets.only(bottom: 15),
+      padding: const EdgeInsets.only(bottom: 8),
       child: child,
     );
 

lib/src/widgets/email_password_login.dart

@@ -26,6 +26,9 @@ class _EmailPasswordLoginFormState extends State<EmailPasswordLoginForm> {
   final ValueNotifier<bool> _formValid = ValueNotifier(false);
   bool _obscurePassword = true;
 
+  String? emailValidationText;
+  String? passwordValidationText;
+
   String _currentEmail = '';
   String _currentPassword = '';
 
@@ -138,42 +141,93 @@ class _EmailPasswordLoginFormState extends State<EmailPasswordLoginForm> {
                         mainAxisSize: MainAxisSize.min,
                         children: [
                           options.emailInputContainerBuilder(
-                            TextFormField(
+                            Column(
-                              onChanged: _updateCurrentEmail,
+                              children: [
-                              validator:
+                                SizedBox(
-                                  widget.options.validations.validateEmail,
+                                  height: options.textFieldHeight,
-                              initialValue: options.initialEmail,
+                                  width: options.textFieldWidth,
-                              keyboardType: TextInputType.emailAddress,
+                                  child: TextFormField(
-                              textInputAction: TextInputAction.next,
+                                    onChanged: _updateCurrentEmail,
-                              style: options.emailTextStyle,
+                                    validator: (value) {
-                              decoration: options.emailDecoration,
+                                      var validationResult = widget
+                                          .options.validations
+                                          .validateEmail(value);
+                                      setState(() {
+                                        emailValidationText = validationResult;
+                                      });
+                                      return;
+                                    },
+                                    initialValue: options.initialEmail,
+                                    keyboardType: TextInputType.emailAddress,
+                                    textInputAction: TextInputAction.next,
+                                    style: options.emailTextStyle,
+                                    decoration: options.emailDecoration,
+                                  ),
+                                ),
+                                if (emailValidationText != null)
+                                  options.errorMessageBuilder(
+                                    Align(
+                                      alignment: Alignment.centerLeft,
+                                      child: Text(
+                                        emailValidationText!,
+                                        style: options.errorStyle,
+                                      ),
+                                    ),
+                                  ),
+                              ],
                             ),
                           ),
                           options.passwordInputContainerBuilder(
-                            TextFormField(
+                            Column(
-                              obscureText: _obscurePassword,
+                              children: [
-                              onChanged: _updateCurrentPassword,
+                                SizedBox(
-                              validator:
+                                  height: options.textFieldHeight,
-                                  widget.options.validations.validatePassword,
+                                  width: options.textFieldWidth,
-                              initialValue: options.initialPassword,
+                                  child: TextFormField(
-                              keyboardType: TextInputType.visiblePassword,
+                                    obscureText: _obscurePassword,
-                              textInputAction: TextInputAction.done,
+                                    onChanged: _updateCurrentPassword,
-                              style: options.passwordTextStyle,
+                                    validator: (value) {
-                              onFieldSubmitted: (_) => _handleLogin(),
+                                      var validationResult = widget
-                              decoration: options.passwordDecoration.copyWith(
+                                          .options.validations
-                                suffixIcon: IconButton(
+                                          .validatePassword(value);
-                                  onPressed: () {
+                                      setState(() {
-                                    setState(() {
+                                        passwordValidationText =
-                                      _obscurePassword = !_obscurePassword;
+                                            validationResult;
-                                    });
+                                      });
-                                  },
+                                      return;
-                                  icon: Icon(
+                                    },
-                                    _obscurePassword
+                                    initialValue: options.initialPassword,
-                                        ? Icons.visibility
+                                    keyboardType: TextInputType.visiblePassword,
-                                        : Icons.visibility_off,
+                                    textInputAction: TextInputAction.done,
+                                    style: options.passwordTextStyle,
+                                    onFieldSubmitted: (_) => _handleLogin(),
+                                    decoration:
+                                        options.passwordDecoration.copyWith(
+                                      suffixIcon: IconButton(
+                                        onPressed: () {
+                                          setState(() {
+                                            _obscurePassword =
+                                                !_obscurePassword;
+                                          });
+                                        },
+                                        icon: Icon(
+                                          _obscurePassword
+                                              ? Icons.visibility
+                                              : Icons.visibility_off,
+                                        ),
+                                      ),
+                                    ),
                                   ),
                                 ),
-                              ),
+                                if (passwordValidationText != null)
+                                  options.errorMessageBuilder(
+                                    Align(
+                                      alignment: Alignment.centerLeft,
+                                      child: Text(passwordValidationText!,
+                                          style: options.errorStyle),
+                                    ),
+                                  ),
+                              ],
                             ),
                           ),
                           if (widget.onForgotPassword != null) ...[

lib/src/widgets/forgot_password_form.dart

@@ -27,6 +27,8 @@ class _ForgotPasswordFormState extends State<ForgotPasswordForm> {
   final GlobalKey<FormState> _formKey = GlobalKey();
   final FocusNode _focusNode = FocusNode();
 
+  String? emailValidationText;
+
   @override
   void initState() {
     super.initState();
@@ -84,15 +86,40 @@ class _ForgotPasswordFormState extends State<ForgotPasswordForm> {
             Expanded(
               child: Align(
                 child: options.emailInputContainerBuilder(
-                  TextFormField(
+                  Column(
-                    focusNode: _focusNode,
+                    children: [
-                    onChanged: _updateCurrentEmail,
+                      SizedBox(
-                    validator: widget.options.validations.validateEmail,
+                        height: options.textFieldHeight,
-                    initialValue: options.initialEmail,
+                        width: options.textFieldWidth,
-                    keyboardType: TextInputType.emailAddress,
+                        child: TextFormField(
-                    textInputAction: TextInputAction.next,
+                          focusNode: _focusNode,
-                    style: options.emailTextStyle,
+                          onChanged: _updateCurrentEmail,
-                    decoration: options.emailDecoration,
+                          validator: (value) {
+                            var validationResult =
+                                widget.options.validations.validateEmail(value);
+                            setState(() {
+                              emailValidationText = validationResult;
+                            });
+                            return;
+                          },
+                          initialValue: options.initialEmail,
+                          keyboardType: TextInputType.emailAddress,
+                          textInputAction: TextInputAction.next,
+                          style: options.emailTextStyle,
+                          decoration: options.emailDecoration,
+                        ),
+                      ),
+                      if (emailValidationText != null)
+                        options.errorMessageBuilder(
+                          Align(
+                            alignment: Alignment.centerLeft,
+                            child: Text(
+                              emailValidationText!,
+                              style: options.errorStyle,
+                            ),
+                          ),
+                        ),
+                    ],
                   ),
                 ),
               ),

pubspec.yaml

@@ -1,6 +1,6 @@
 name: flutter_login
 description: Flutter Login Component
-version: 5.0.0
+version: 5.0.1
 
 environment:
   sdk: ">=2.18.1 <3.0.0"