mirror of
https://github.com/Iconica-Development/flutter_login_widget.git
synced 2025-05-19 05:33:45 +02:00
Merge pull request #33 from Iconica-Development/feature/default_styling
feat: add default styling
This commit is contained in:
Gorter-dev
GitHub
commit
f33ca0546d
3 changed files with 427 additions and 393 deletions
|
|
@ -10,38 +10,7 @@ import 'package:flutter_login/src/service/validation.dart';
|
|||
class LoginOptions {
|
||||
const LoginOptions({
|
||||
this.image,
|
||||
this.title,
|
||||
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(
|
||||
this.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:
|
||||
(context, onPressed, isDisabled, onDisabledPress, options) =>
|
||||
InkWell(
|
||||
onTap: () async => onPressed.call(),
|
||||
child: Container(
|
||||
height: 44,
|
||||
width: 254,
|
||||
decoration: const BoxDecoration(
|
||||
color: Color(0xff71C6D1),
|
||||
borderRadius: BorderRadius.all(Radius.circular(20)),
|
||||
this.initialEmail = '',
|
||||
this.initialPassword = '',
|
||||
this.spacers = const LoginSpacerOptions(
|
||||
spacerBeforeTitle: 8,
|
||||
spacerAfterTitle: 2,
|
||||
formFlexValue: 2,
|
||||
),
|
||||
child: const Center(
|
||||
child: Text(
|
||||
'Log in',
|
||||
style: TextStyle(
|
||||
fontWeight: FontWeight.w800,
|
||||
fontSize: 20,
|
||||
color: Colors.white,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
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(
|
||||
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(
|
||||
spacerAfterButton: 3,
|
||||
spacerBeforeTitle: 1,
|
||||
),
|
||||
requestForgotPasswordButtonBuilder:
|
||||
(context, onPressed, isDisabled, onDisabledPress, options) =>
|
||||
InkWell(
|
||||
onTap: onPressed,
|
||||
child: Container(
|
||||
decoration: BoxDecoration(
|
||||
borderRadius: BorderRadius.circular(20),
|
||||
color: const Color(0xff71C6D1),
|
||||
this.loginBackgroundColor = const Color(0xffFAF9F6),
|
||||
this.forgotPasswordBackgroundColor = const Color(0xffFAF9F6),
|
||||
this.forgotPasswordScreenPadding = const Padding(
|
||||
padding: EdgeInsets.symmetric(horizontal: 60),
|
||||
),
|
||||
height: 44,
|
||||
width: 254,
|
||||
child: const Center(
|
||||
child: Text(
|
||||
'Send link',
|
||||
style: TextStyle(
|
||||
fontWeight: FontWeight.w800,
|
||||
fontSize: 20,
|
||||
color: Colors.white,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
this.forgotPasswordCustomAppBar,
|
||||
});
|
||||
|
||||
/// 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(
|
||||
onPressed: !disabled ? onPressed : onDisabledPress,
|
||||
child: Text(options.translations.loginButton),
|
||||
child: InkWell(
|
||||
onTap: () async =>
|
||||
!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(
|
||||
onPressed: !disabled ? onPressed : onDisabledPress,
|
||||
child: Text(options.translations.requestForgotPasswordButton),
|
||||
child: InkWell(
|
||||
onTap: !disabled ? onPressed : onDisabledPress,
|
||||
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,
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
|
||||
|
|
|
|||
|
|
@ -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> {
|
|||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
final Widget description;
|
||||
Widget? title;
|
||||
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!,
|
||||
),
|
||||
],
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue