Merge pull request #30 from Iconica-Development/6.0.0

fix: change forgotpassword form layout
This commit is contained in:
Freek van de Ven 2024-03-08 14:36:27 +01:00 committed by GitHub
commit f1b11ae79a
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 119 additions and 96 deletions

View file

@ -1,3 +1,8 @@
## 6.0.0
* Changed ForgotPasswordform to use the same layout as the EmailPasswordLoginForm.
* Add option for textalignment for email and password fields.
## 5.2.0 ## 5.2.0
* Added spacer options for the ForogotPasswordForm. * Added spacer options for the ForogotPasswordForm.

View file

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

View file

@ -15,6 +15,8 @@ class LoginOptions {
this.maxFormWidth, this.maxFormWidth,
this.emailTextStyle, this.emailTextStyle,
this.passwordTextStyle, this.passwordTextStyle,
this.emailTextAlign,
this.passwordTextAlign,
this.emailDecoration = const InputDecoration(), this.emailDecoration = const InputDecoration(),
this.passwordDecoration = const InputDecoration(), this.passwordDecoration = const InputDecoration(),
this.initialEmail = '', this.initialEmail = '',
@ -88,6 +90,12 @@ class LoginOptions {
/// The text style for the password input field. /// The text style for the password input field.
final TextStyle? passwordTextStyle; final TextStyle? passwordTextStyle;
/// The text alignment for the email input field.
final TextAlign? emailTextAlign;
/// The text alignment for the password input field.
final TextAlign? passwordTextAlign;
/// Translations for various texts on the login screen. /// Translations for various texts on the login screen.
final LoginTranslations translations; final LoginTranslations translations;

View file

@ -102,7 +102,7 @@ class _EmailPasswordLoginFormState extends State<EmailPasswordLoginForm> {
if (options.title != null) ...[ if (options.title != null) ...[
Align( Align(
alignment: Alignment.topCenter, alignment: Alignment.topCenter,
child: _wrapWithDefaultStyle( child: wrapWithDefaultStyle(
options.title, options.title,
theme.textTheme.headlineSmall, theme.textTheme.headlineSmall,
), ),
@ -114,7 +114,7 @@ class _EmailPasswordLoginFormState extends State<EmailPasswordLoginForm> {
if (options.subtitle != null) ...[ if (options.subtitle != null) ...[
Align( Align(
alignment: Alignment.topCenter, alignment: Alignment.topCenter,
child: _wrapWithDefaultStyle( child: wrapWithDefaultStyle(
options.subtitle, options.subtitle,
theme.textTheme.titleSmall, theme.textTheme.titleSmall,
), ),
@ -148,6 +148,8 @@ class _EmailPasswordLoginFormState extends State<EmailPasswordLoginForm> {
children: [ children: [
options.emailInputContainerBuilder( options.emailInputContainerBuilder(
TextFormField( TextFormField(
textAlign:
options.emailTextAlign ?? TextAlign.start,
onChanged: _updateCurrentEmail, onChanged: _updateCurrentEmail,
validator: widget.options.validations.validateEmail, validator: widget.options.validations.validateEmail,
initialValue: options.initialEmail, initialValue: options.initialEmail,
@ -159,6 +161,8 @@ class _EmailPasswordLoginFormState extends State<EmailPasswordLoginForm> {
), ),
options.passwordInputContainerBuilder( options.passwordInputContainerBuilder(
TextFormField( TextFormField(
textAlign:
options.passwordTextAlign ?? TextAlign.start,
obscureText: _obscurePassword, obscureText: _obscurePassword,
onChanged: _updateCurrentPassword, onChanged: _updateCurrentPassword,
validator: validator:
@ -245,12 +249,12 @@ class _EmailPasswordLoginFormState extends State<EmailPasswordLoginForm> {
], ],
); );
} }
}
Widget? _wrapWithDefaultStyle(Widget? widget, TextStyle? style) { Widget? wrapWithDefaultStyle(Widget? widget, TextStyle? style) {
if (style == null || widget == null) { if (style == null || widget == null) {
return widget; return widget;
} else { } else {
return DefaultTextStyle(style: style, child: widget); return DefaultTextStyle(style: style, child: widget);
}
} }
} }

View file

@ -66,106 +66,112 @@ class _ForgotPasswordFormState extends State<ForgotPasswordForm> {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
var options = widget.options;
var theme = Theme.of(context); var theme = Theme.of(context);
return Form( var options = widget.options;
key: _formKey,
child: ConstrainedBox( return CustomScrollView(
constraints: const BoxConstraints( physics: const ScrollPhysics(),
maxWidth: 300, slivers: [
), SliverFillRemaining(
child: Column( hasScrollBody: false,
mainAxisAlignment: MainAxisAlignment.spaceBetween, fillOverscroll: true,
crossAxisAlignment: CrossAxisAlignment.start, child: Column(
children: [ children: [
if (options.forgotPasswordSpacerOptions.spacerBeforeTitle != if (options.forgotPasswordSpacerOptions.spacerBeforeTitle !=
null) ...[ null) ...[
Spacer( Spacer(
flex: options.forgotPasswordSpacerOptions.spacerBeforeTitle!, flex: options.forgotPasswordSpacerOptions.spacerBeforeTitle!,
), ),
], ],
_wrapWithDefaultStyle( Align(
alignment: Alignment.topCenter,
child: wrapWithDefaultStyle(
widget.title, widget.title,
theme.textTheme.displaySmall, theme.textTheme.displaySmall,
) ?? ),
const SizedBox.shrink(),
if (options.forgotPasswordSpacerOptions.spacerAfterTitle !=
null) ...[
Spacer(
flex: options.forgotPasswordSpacerOptions.spacerAfterTitle!,
), ),
], if (options.forgotPasswordSpacerOptions.spacerAfterTitle !=
_wrapWithDefaultStyle( null) ...[
Spacer(
flex: options.forgotPasswordSpacerOptions.spacerAfterTitle!,
),
],
Align(
alignment: Alignment.topCenter,
child: wrapWithDefaultStyle(
widget.description, widget.description,
theme.textTheme.bodyMedium, theme.textTheme.bodyMedium,
) ?? ),
const SizedBox.shrink(),
if (options.forgotPasswordSpacerOptions.spacerAfterDescription !=
null) ...[
Spacer(
flex:
options.forgotPasswordSpacerOptions.spacerAfterDescription!,
), ),
], if (options.forgotPasswordSpacerOptions.spacerAfterDescription !=
Expanded( null) ...[
flex: options.forgotPasswordSpacerOptions.formFlexValue, Spacer(
child: Align( flex: options
child: options.emailInputContainerBuilder( .forgotPasswordSpacerOptions.spacerAfterDescription!,
TextFormField( ),
focusNode: _focusNode, ],
onChanged: _updateCurrentEmail, Expanded(
validator: widget.options.validations.validateEmail, flex: options.forgotPasswordSpacerOptions.formFlexValue,
initialValue: options.initialEmail, child: ConstrainedBox(
keyboardType: TextInputType.emailAddress, constraints: BoxConstraints(
textInputAction: TextInputAction.next, maxWidth: options.maxFormWidth ?? 300,
style: options.emailTextStyle, ),
decoration: options.emailDecoration, child: Form(
key: _formKey,
child: Align(
alignment: Alignment.center,
child: options.emailInputContainerBuilder(
TextFormField(
textAlign: options.emailTextAlign ?? TextAlign.start,
focusNode: _focusNode,
onChanged: _updateCurrentEmail,
validator: widget.options.validations.validateEmail,
initialValue: options.initialEmail,
keyboardType: TextInputType.emailAddress,
textInputAction: TextInputAction.next,
style: options.emailTextStyle,
decoration: options.emailDecoration,
),
),
),
), ),
), ),
), ),
), if (options.forgotPasswordSpacerOptions.spacerBeforeButton !=
if (options.forgotPasswordSpacerOptions.spacerBeforeButton != null) ...[
null) ...[ Spacer(
Spacer( flex: options.forgotPasswordSpacerOptions.spacerBeforeButton!,
flex: options.forgotPasswordSpacerOptions.spacerBeforeButton!, ),
), ],
], AnimatedBuilder(
AnimatedBuilder( animation: _formValid,
animation: _formValid, builder: (context, snapshot) => Align(
builder: (context, snapshot) => Align( child: widget.options.requestForgotPasswordButtonBuilder(
child: widget.options.requestForgotPasswordButtonBuilder( context,
context, () async {
() async { _formKey.currentState?.validate();
_formKey.currentState?.validate(); if (_formValid.value) {
if (_formValid.value) { widget.onRequestForgotPassword(_currentEmail);
widget.onRequestForgotPassword(_currentEmail); }
} },
}, !_formValid.value,
!_formValid.value, () {
() { _formKey.currentState?.validate();
_formKey.currentState?.validate(); },
}, options,
options, ),
), ),
), ),
), if (options.forgotPasswordSpacerOptions.spacerAfterButton !=
if (options.forgotPasswordSpacerOptions.spacerAfterButton != null) ...[
null) ...[ Spacer(
Spacer( flex: options.forgotPasswordSpacerOptions.spacerAfterButton!,
flex: options.forgotPasswordSpacerOptions.spacerAfterButton!, ),
), ],
], ],
], ),
), ),
), ],
); );
} }
Widget? _wrapWithDefaultStyle(Widget? widget, TextStyle? style) {
if (style == null || widget == null) {
return widget;
} else {
return DefaultTextStyle(style: style, child: widget);
}
}
} }

View file

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