Merge pull request #33 from Iconica-Development/feature/default_styling

feat: add default styling

lib/src/config/login_options.dart

@@ -10,38 +10,7 @@ import 'package:flutter_login/src/service/validation.dart';
 class LoginOptions {
   const LoginOptions({
     this.image,
-    this.title,
+    this.title = const Text(
-    this.subtitle,
-    this.maxFormWidth,
-    this.emailTextStyle,
-    this.passwordTextStyle,
-    this.emailTextAlign,
-    this.passwordTextAlign,
-    this.emailDecoration = const InputDecoration(),
-    this.passwordDecoration = const InputDecoration(),
-    this.initialEmail = '',
-    this.initialPassword = '',
-    this.spacers = const LoginSpacerOptions(),
-    this.translations = const LoginTranslations(),
-    this.validationService,
-    this.loginButtonBuilder = _createLoginButton,
-    this.forgotPasswordButtonBuilder = _createForgotPasswordButton,
-    this.requestForgotPasswordButtonBuilder =
-        _createRequestForgotPasswordButton,
-    this.registrationButtonBuilder = _createRegisterButton,
-    this.emailInputContainerBuilder = _createEmailInputContainer,
-    this.passwordInputContainerBuilder = _createPasswordInputContainer,
-    this.showObscurePassword = true,
-    this.forgotPasswordSpacerOptions = const ForgotPasswordSpacerOptions(),
-  });
-
-  factory LoginOptions.defaults() => LoginOptions(
-        spacers: const LoginSpacerOptions(
-          spacerBeforeTitle: 8,
-          spacerAfterTitle: 2,
-          formFlexValue: 2,
-        ),
-        title: const Text(
       'Log in',
       style: TextStyle(
         color: Color(0xff71C6D1),
@@ -49,7 +18,13 @@ class LoginOptions {
         fontSize: 24,
       ),
     ),
-        emailDecoration: const InputDecoration(
+    this.subtitle,
+    this.maxFormWidth,
+    this.emailTextStyle,
+    this.passwordTextStyle,
+    this.emailTextAlign,
+    this.passwordTextAlign,
+    this.emailDecoration = const InputDecoration(
       contentPadding: EdgeInsets.symmetric(horizontal: 8),
       labelText: 'Email address',
       border: OutlineInputBorder(),
@@ -64,7 +39,7 @@ class LoginOptions {
         fontSize: 16,
       ),
     ),
-        passwordDecoration: const InputDecoration(
+    this.passwordDecoration = const InputDecoration(
       contentPadding: EdgeInsets.symmetric(horizontal: 8),
       labelText: 'Password',
       border: OutlineInputBorder(),
@@ -79,89 +54,34 @@ class LoginOptions {
         fontSize: 16,
       ),
     ),
-        loginButtonBuilder:
+    this.initialEmail = '',
-            (context, onPressed, isDisabled, onDisabledPress, options) =>
+    this.initialPassword = '',
-                InkWell(
+    this.spacers = const LoginSpacerOptions(
-          onTap: () async => onPressed.call(),
+      spacerBeforeTitle: 8,
-          child: Container(
+      spacerAfterTitle: 2,
-            height: 44,
+      formFlexValue: 2,
-            width: 254,
-            decoration: const BoxDecoration(
-              color: Color(0xff71C6D1),
-              borderRadius: BorderRadius.all(Radius.circular(20)),
     ),
-            child: const Center(
+    this.translations = const LoginTranslations(),
-              child: Text(
+    this.validationService,
-                'Log in',
+    this.loginButtonBuilder = _createLoginButton,
-                style: TextStyle(
+    this.forgotPasswordButtonBuilder = _createForgotPasswordButton,
-                  fontWeight: FontWeight.w800,
+    this.requestForgotPasswordButtonBuilder =
-                  fontSize: 20,
+        _createRequestForgotPasswordButton,
-                  color: Colors.white,
+    this.registrationButtonBuilder = _createRegisterButton,
-                ),
+    this.emailInputContainerBuilder = _createEmailInputContainer,
-              ),
+    this.passwordInputContainerBuilder = _createPasswordInputContainer,
-            ),
+    this.showObscurePassword = true,
-          ),
+    this.forgotPasswordSpacerOptions = const ForgotPasswordSpacerOptions(
-        ),
-        registrationButtonBuilder:
-            (context, onPressed, isDisabled, onDisabledPress, options) =>
-                TextButton(
-          onPressed: () async {
-            await onPressed.call();
-          },
-          child: const Text(
-            'Create account',
-            style: TextStyle(
-              decoration: TextDecoration.underline,
-              decorationColor: Color(0xff71C6D1),
-              color: Color(0xff71C6D1),
-              fontSize: 18,
-              fontWeight: FontWeight.w800,
-            ),
-          ),
-        ),
-        forgotPasswordButtonBuilder:
-            (context, onPressed, isDisabled, onDisabledPress, options) =>
-                TextButton(
-          onPressed: () async {
-            await onPressed.call();
-          },
-          child: const Text(
-            'Forgot password?',
-            style: TextStyle(
-              fontSize: 12,
-              fontWeight: FontWeight.w500,
-              color: Color(0xff8D8D8D),
-            ),
-          ),
-        ),
-        forgotPasswordSpacerOptions: const ForgotPasswordSpacerOptions(
       spacerAfterButton: 3,
       spacerBeforeTitle: 1,
     ),
-        requestForgotPasswordButtonBuilder:
+    this.loginBackgroundColor = const Color(0xffFAF9F6),
-            (context, onPressed, isDisabled, onDisabledPress, options) =>
+    this.forgotPasswordBackgroundColor = const Color(0xffFAF9F6),
-                InkWell(
+    this.forgotPasswordScreenPadding = const Padding(
-          onTap: onPressed,
+      padding: EdgeInsets.symmetric(horizontal: 60),
-          child: Container(
-            decoration: BoxDecoration(
-              borderRadius: BorderRadius.circular(20),
-              color: const Color(0xff71C6D1),
     ),
-            height: 44,
+    this.forgotPasswordCustomAppBar,
-            width: 254,
+  });
-            child: const Center(
-              child: Text(
-                'Send link',
-                style: TextStyle(
-                  fontWeight: FontWeight.w800,
-                  fontSize: 20,
-                  color: Colors.white,
-                ),
-              ),
-            ),
-          ),
-        ),
-      );
 
   /// Builds the login button.
   final ButtonBuilder loginButtonBuilder;
@@ -236,6 +156,18 @@ class LoginOptions {
   /// Get validations.
   ValidationService get validations =>
       validationService ?? LoginValidationService(this);
+
+  /// The background color for the login screen.
+  final Color loginBackgroundColor;
+
+  /// The background color for the forgot password screen.
+  final Color forgotPasswordBackgroundColor;
+
+  /// The padding for the forgot password screen.
+  final Padding forgotPasswordScreenPadding;
+
+  /// forgot password custom AppBar
+  final AppBar? forgotPasswordCustomAppBar;
 }
 
 class LoginTranslations {
@@ -245,7 +177,7 @@ class LoginTranslations {
     this.emailInvalid = 'Enter a valid email address',
     this.loginButton = 'Login',
     this.forgotPasswordButton = 'Forgot password?',
-    this.requestForgotPasswordButton = 'Send request',
+    this.requestForgotPasswordButton = 'Send link',
     this.registrationButton = 'Create Account',
   });
 
@@ -274,9 +206,27 @@ Widget _createLoginButton(
 ) =>
     Opacity(
       opacity: disabled ? 0.5 : 1.0,
-      child: ElevatedButton(
+      child: InkWell(
-        onPressed: !disabled ? onPressed : onDisabledPress,
+        onTap: () async =>
-        child: Text(options.translations.loginButton),
+            !disabled ? await onPressed() : await onDisabledPress(),
+        child: Container(
+          height: 44,
+          width: 254,
+          decoration: const BoxDecoration(
+            color: Color(0xff71C6D1),
+            borderRadius: BorderRadius.all(Radius.circular(20)),
+          ),
+          child: Center(
+            child: Text(
+              options.translations.loginButton,
+              style: const TextStyle(
+                fontWeight: FontWeight.w800,
+                fontSize: 20,
+                color: Colors.white,
+              ),
+            ),
+          ),
+        ),
       ),
     );
 
@@ -289,9 +239,18 @@ Widget _createForgotPasswordButton(
 ) =>
     Opacity(
       opacity: disabled ? 0.5 : 1.0,
-      child: ElevatedButton(
+      child: TextButton(
         onPressed: !disabled ? onPressed : onDisabledPress,
-        child: Text(options.translations.forgotPasswordButton),
+        child: Text(
+          options.translations.forgotPasswordButton,
+          style: const TextStyle(
+            decoration: TextDecoration.underline,
+            decorationColor: Color(0xff8D8D8D),
+            fontSize: 12,
+            fontWeight: FontWeight.w500,
+            color: Color(0xff8D8D8D),
+          ),
+        ),
       ),
     );
 
@@ -304,9 +263,26 @@ Widget _createRequestForgotPasswordButton(
 ) =>
     Opacity(
       opacity: disabled ? 0.5 : 1.0,
-      child: ElevatedButton(
+      child: InkWell(
-        onPressed: !disabled ? onPressed : onDisabledPress,
+        onTap: !disabled ? onPressed : onDisabledPress,
-        child: Text(options.translations.requestForgotPasswordButton),
+        child: Container(
+          decoration: BoxDecoration(
+            borderRadius: BorderRadius.circular(20),
+            color: const Color(0xff71C6D1),
+          ),
+          height: 44,
+          width: 254,
+          child: Center(
+            child: Text(
+              options.translations.requestForgotPasswordButton,
+              style: const TextStyle(
+                fontWeight: FontWeight.w800,
+                fontSize: 20,
+                color: Colors.white,
+              ),
+            ),
+          ),
+        ),
       ),
     );
 
@@ -319,9 +295,18 @@ Widget _createRegisterButton(
 ) =>
     Opacity(
       opacity: disabled ? 0.5 : 1.0,
-      child: ElevatedButton(
+      child: TextButton(
         onPressed: !disabled ? onPressed : onDisabledPress,
-        child: Text(options.translations.registrationButton),
+        child: Text(
+          options.translations.registrationButton,
+          style: const TextStyle(
+            decoration: TextDecoration.underline,
+            decorationColor: Color(0xff71C6D1),
+            color: Color(0xff71C6D1),
+            fontSize: 18,
+            fontWeight: FontWeight.w800,
+          ),
+        ),
       ),
     );
 

lib/src/widgets/email_password_login.dart

@@ -84,7 +84,9 @@ class _EmailPasswordLoginFormState extends State<EmailPasswordLoginForm> {
   Widget build(BuildContext context) {
     var theme = Theme.of(context);
     var options = widget.options;
-    return CustomScrollView(
+    return Scaffold(
+      backgroundColor: options.loginBackgroundColor,
+      body: CustomScrollView(
         physics: const ScrollPhysics(),
         slivers: [
           SliverFillRemaining(
@@ -151,7 +153,8 @@ class _EmailPasswordLoginFormState extends State<EmailPasswordLoginForm> {
                               textAlign:
                                   options.emailTextAlign ?? TextAlign.start,
                               onChanged: _updateCurrentEmail,
-                            validator: widget.options.validations.validateEmail,
+                              validator:
+                                  widget.options.validations.validateEmail,
                               initialValue: options.initialEmail,
                               keyboardType: TextInputType.emailAddress,
                               textInputAction: TextInputAction.next,
@@ -177,7 +180,8 @@ class _EmailPasswordLoginFormState extends State<EmailPasswordLoginForm> {
                                     ? IconButton(
                                         onPressed: () {
                                           setState(() {
-                                          _obscurePassword = !_obscurePassword;
+                                            _obscurePassword =
+                                                !_obscurePassword;
                                           });
                                         },
                                         icon: Icon(
@@ -249,6 +253,7 @@ class _EmailPasswordLoginFormState extends State<EmailPasswordLoginForm> {
             ),
           ),
         ],
+      ),
     );
   }
 }

lib/src/widgets/forgot_password_form.dart

@@ -3,6 +3,7 @@ import 'dart:async';
 import 'package:flutter/material.dart';
 import 'package:flutter_login/flutter_login.dart';
 
+// ignore: must_be_immutable
 class ForgotPasswordForm extends StatefulWidget {
   /// Constructs a [ForgotPasswordForm] widget.
   ///
@@ -11,18 +12,44 @@ class ForgotPasswordForm extends StatefulWidget {
   /// [onRequestForgotPassword]: Callback function for requesting
   /// password reset.
   /// [title]: Widget to display title.
-  const ForgotPasswordForm({
+  ForgotPasswordForm({
     required this.options,
-    required this.description,
     required this.onRequestForgotPassword,
+    this.description,
     super.key,
     this.title,
-  });
+  }) {
+    title == null
+        ? title = const Padding(
+            padding: EdgeInsets.only(bottom: 8.0),
+            child: Text(
+              'Forgot Password',
+              style: TextStyle(
+                color: Color(0xff71C6D1),
+                fontWeight: FontWeight.w800,
+                fontSize: 24,
+              ),
+            ),
+          )
+        : title = title;
+
+    description == null
+        ? description = const Padding(
+            padding: EdgeInsets.only(bottom: 16),
+            child: Text(
+              'No worries. Enter your email address below so we can'
+              ' send you a link to reset your password.',
+              textAlign: TextAlign.center,
+              style: TextStyle(fontWeight: FontWeight.w400, fontSize: 16),
+            ),
+          )
+        : description = description;
+  }
 
   final LoginOptions options;
 
-  final Widget? title;
+  Widget? title;
-  final Widget description;
+  Widget? description;
 
   final FutureOr<void> Function(String email) onRequestForgotPassword;
 
@@ -69,7 +96,15 @@ class _ForgotPasswordFormState extends State<ForgotPasswordForm> {
     var theme = Theme.of(context);
     var options = widget.options;
 
-    return CustomScrollView(
+    return Scaffold(
+      backgroundColor: options.forgotPasswordBackgroundColor,
+      appBar: widget.options.forgotPasswordCustomAppBar ??
+          AppBar(
+            backgroundColor: const Color(0xffFAF9F6),
+          ),
+      body: Padding(
+        padding: options.forgotPasswordScreenPadding.padding,
+        child: CustomScrollView(
           physics: const ScrollPhysics(),
           slivers: [
             SliverFillRemaining(
@@ -80,7 +115,8 @@ class _ForgotPasswordFormState extends State<ForgotPasswordForm> {
                   if (options.forgotPasswordSpacerOptions.spacerBeforeTitle !=
                       null) ...[
                     Spacer(
-                  flex: options.forgotPasswordSpacerOptions.spacerBeforeTitle!,
+                      flex: options
+                          .forgotPasswordSpacerOptions.spacerBeforeTitle!,
                     ),
                   ],
                   Align(
@@ -93,7 +129,8 @@ class _ForgotPasswordFormState extends State<ForgotPasswordForm> {
                   if (options.forgotPasswordSpacerOptions.spacerAfterTitle !=
                       null) ...[
                     Spacer(
-                  flex: options.forgotPasswordSpacerOptions.spacerAfterTitle!,
+                      flex:
+                          options.forgotPasswordSpacerOptions.spacerAfterTitle!,
                     ),
                   ],
                   Align(
@@ -103,7 +140,8 @@ class _ForgotPasswordFormState extends State<ForgotPasswordForm> {
                       theme.textTheme.bodyMedium,
                     ),
                   ),
-              if (options.forgotPasswordSpacerOptions.spacerAfterDescription !=
+                  if (options
+                          .forgotPasswordSpacerOptions.spacerAfterDescription !=
                       null) ...[
                     Spacer(
                       flex: options
@@ -122,10 +160,12 @@ class _ForgotPasswordFormState extends State<ForgotPasswordForm> {
                           alignment: Alignment.center,
                           child: options.emailInputContainerBuilder(
                             TextFormField(
-                          textAlign: options.emailTextAlign ?? TextAlign.start,
+                              textAlign:
+                                  options.emailTextAlign ?? TextAlign.start,
                               focusNode: _focusNode,
                               onChanged: _updateCurrentEmail,
-                          validator: widget.options.validations.validateEmail,
+                              validator:
+                                  widget.options.validations.validateEmail,
                               initialValue: options.initialEmail,
                               keyboardType: TextInputType.emailAddress,
                               textInputAction: TextInputAction.next,
@@ -140,7 +180,8 @@ class _ForgotPasswordFormState extends State<ForgotPasswordForm> {
                   if (options.forgotPasswordSpacerOptions.spacerBeforeButton !=
                       null) ...[
                     Spacer(
-                  flex: options.forgotPasswordSpacerOptions.spacerBeforeButton!,
+                      flex: options
+                          .forgotPasswordSpacerOptions.spacerBeforeButton!,
                     ),
                   ],
                   AnimatedBuilder(
@@ -165,13 +206,16 @@ class _ForgotPasswordFormState extends State<ForgotPasswordForm> {
                   if (options.forgotPasswordSpacerOptions.spacerAfterButton !=
                       null) ...[
                     Spacer(
-                  flex: options.forgotPasswordSpacerOptions.spacerAfterButton!,
+                      flex: options
+                          .forgotPasswordSpacerOptions.spacerAfterButton!,
                     ),
                   ],
                 ],
               ),
             ),
           ],
+        ),
+      ),
     );
   }
 }