mirror of
https://github.com/Iconica-Development/flutter_login_widget.git
synced 2025-05-19 05:33:45 +02:00
refactor: extract variables and widgets to shorten the widget tree
This commit is contained in:
Tobias Leijs
parent
bb65426298
commit
b57b238794
1 changed files with 154 additions and 134 deletions
|
|
@ -90,8 +90,94 @@ class _EmailPasswordLoginFormState extends State<EmailPasswordLoginForm> {
|
||||||
|
|
||||||
@override
|
@override
|
||||||
Widget build(BuildContext context) {
|
Widget build(BuildContext context) {
|
||||||
var theme = Theme.of(context);
|
|
||||||
var options = widget.options;
|
var options = widget.options;
|
||||||
|
|
||||||
|
var emailTextFormField = TextFormField(
|
||||||
|
autofillHints: const [
|
||||||
|
AutofillHints.email,
|
||||||
|
AutofillHints.username,
|
||||||
|
],
|
||||||
|
textAlign: options.emailTextAlign ?? TextAlign.start,
|
||||||
|
onChanged: _updateCurrentEmail,
|
||||||
|
validator: widget.options.validations.validateEmail,
|
||||||
|
initialValue: options.initialEmail,
|
||||||
|
keyboardType: TextInputType.emailAddress,
|
||||||
|
textInputAction: TextInputAction.next,
|
||||||
|
style: options.emailTextStyle,
|
||||||
|
decoration: options.emailDecoration,
|
||||||
|
);
|
||||||
|
|
||||||
|
var passwordTextFormField = TextFormField(
|
||||||
|
autofillHints: const [
|
||||||
|
AutofillHints.password,
|
||||||
|
],
|
||||||
|
textAlign: options.passwordTextAlign ?? TextAlign.start,
|
||||||
|
obscureText: _obscurePassword,
|
||||||
|
onChanged: _updateCurrentPassword,
|
||||||
|
validator: widget.options.validations.validatePassword,
|
||||||
|
initialValue: options.initialPassword,
|
||||||
|
keyboardType: TextInputType.visiblePassword,
|
||||||
|
textInputAction: TextInputAction.done,
|
||||||
|
style: options.passwordTextStyle,
|
||||||
|
onFieldSubmitted: (_) async => _handleLogin(),
|
||||||
|
decoration: options.passwordDecoration.copyWith(
|
||||||
|
suffixIcon: options.showObscurePassword
|
||||||
|
? IconButton(
|
||||||
|
padding: options.suffixIconPadding,
|
||||||
|
onPressed: () {
|
||||||
|
setState(() {
|
||||||
|
_obscurePassword = !_obscurePassword;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
icon: Icon(
|
||||||
|
_obscurePassword ? Icons.visibility : Icons.visibility_off,
|
||||||
|
size: options.suffixIconSize,
|
||||||
|
),
|
||||||
|
)
|
||||||
|
: null,
|
||||||
|
),
|
||||||
|
);
|
||||||
|
|
||||||
|
var forgotPasswordButton = widget.onForgotPassword != null
|
||||||
|
? Align(
|
||||||
|
alignment: Alignment.topRight,
|
||||||
|
child: options.forgotPasswordButtonBuilder(
|
||||||
|
context,
|
||||||
|
() => widget.onForgotPassword?.call(_currentEmail, context),
|
||||||
|
false,
|
||||||
|
() {},
|
||||||
|
options,
|
||||||
|
),
|
||||||
|
)
|
||||||
|
: const SizedBox(height: 16);
|
||||||
|
|
||||||
|
var loginButton = AnimatedBuilder(
|
||||||
|
animation: _formValid,
|
||||||
|
builder: (context, _) => options.loginButtonBuilder(
|
||||||
|
context,
|
||||||
|
_handleLogin,
|
||||||
|
!_formValid.value,
|
||||||
|
() {
|
||||||
|
_formKey.currentState?.validate();
|
||||||
|
},
|
||||||
|
options,
|
||||||
|
),
|
||||||
|
);
|
||||||
|
|
||||||
|
var registerButton = options.registrationButtonBuilder(
|
||||||
|
context,
|
||||||
|
() async {
|
||||||
|
widget.onRegister?.call(
|
||||||
|
_currentEmail,
|
||||||
|
_currentPassword,
|
||||||
|
context,
|
||||||
|
);
|
||||||
|
},
|
||||||
|
false,
|
||||||
|
() {},
|
||||||
|
options,
|
||||||
|
);
|
||||||
|
|
||||||
return Scaffold(
|
return Scaffold(
|
||||||
backgroundColor: options.loginBackgroundColor,
|
backgroundColor: options.loginBackgroundColor,
|
||||||
body: CustomScrollView(
|
body: CustomScrollView(
|
||||||
|
|
@ -104,45 +190,10 @@ class _EmailPasswordLoginFormState extends State<EmailPasswordLoginForm> {
|
||||||
children: [
|
children: [
|
||||||
Expanded(
|
Expanded(
|
||||||
flex: options.spacers.titleSpacer,
|
flex: options.spacers.titleSpacer,
|
||||||
child: Column(
|
child: LoginTitle(
|
||||||
children: [
|
options: options,
|
||||||
if (options.spacers.spacerBeforeTitle != null) ...[
|
title: widget.title,
|
||||||
Spacer(flex: options.spacers.spacerBeforeTitle!),
|
subtitle: widget.subtitle,
|
||||||
],
|
|
||||||
if (widget.title != null) ...[
|
|
||||||
Align(
|
|
||||||
alignment: Alignment.topCenter,
|
|
||||||
child: wrapWithDefaultStyle(
|
|
||||||
widget.title,
|
|
||||||
theme.textTheme.headlineSmall,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
],
|
|
||||||
if (options.spacers.spacerAfterTitle != null) ...[
|
|
||||||
Spacer(flex: options.spacers.spacerAfterTitle!),
|
|
||||||
],
|
|
||||||
if (widget.subtitle != null) ...[
|
|
||||||
Align(
|
|
||||||
alignment: Alignment.topCenter,
|
|
||||||
child: wrapWithDefaultStyle(
|
|
||||||
widget.subtitle,
|
|
||||||
theme.textTheme.titleSmall,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
],
|
|
||||||
if (options.spacers.spacerAfterSubtitle != null) ...[
|
|
||||||
Spacer(flex: options.spacers.spacerAfterSubtitle!),
|
|
||||||
],
|
|
||||||
if (options.image != null) ...[
|
|
||||||
Padding(
|
|
||||||
padding: const EdgeInsets.all(16),
|
|
||||||
child: options.image,
|
|
||||||
),
|
|
||||||
],
|
|
||||||
if (options.spacers.spacerAfterImage != null) ...[
|
|
||||||
Spacer(flex: options.spacers.spacerAfterImage!),
|
|
||||||
],
|
|
||||||
],
|
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
Expanded(
|
Expanded(
|
||||||
|
|
@ -158,107 +209,18 @@ class _EmailPasswordLoginFormState extends State<EmailPasswordLoginForm> {
|
||||||
mainAxisSize: MainAxisSize.min,
|
mainAxisSize: MainAxisSize.min,
|
||||||
children: [
|
children: [
|
||||||
options.emailInputContainerBuilder(
|
options.emailInputContainerBuilder(
|
||||||
TextFormField(
|
emailTextFormField,
|
||||||
autofillHints: const [
|
|
||||||
AutofillHints.email,
|
|
||||||
AutofillHints.username,
|
|
||||||
],
|
|
||||||
textAlign:
|
|
||||||
options.emailTextAlign ?? TextAlign.start,
|
|
||||||
onChanged: _updateCurrentEmail,
|
|
||||||
validator:
|
|
||||||
widget.options.validations.validateEmail,
|
|
||||||
initialValue: options.initialEmail,
|
|
||||||
keyboardType: TextInputType.emailAddress,
|
|
||||||
textInputAction: TextInputAction.next,
|
|
||||||
style: options.emailTextStyle,
|
|
||||||
decoration: options.emailDecoration,
|
|
||||||
),
|
|
||||||
),
|
),
|
||||||
options.passwordInputContainerBuilder(
|
options.passwordInputContainerBuilder(
|
||||||
TextFormField(
|
passwordTextFormField,
|
||||||
autofillHints: const [
|
|
||||||
AutofillHints.password,
|
|
||||||
],
|
|
||||||
textAlign: options.passwordTextAlign ??
|
|
||||||
TextAlign.start,
|
|
||||||
obscureText: _obscurePassword,
|
|
||||||
onChanged: _updateCurrentPassword,
|
|
||||||
validator:
|
|
||||||
widget.options.validations.validatePassword,
|
|
||||||
initialValue: options.initialPassword,
|
|
||||||
keyboardType: TextInputType.visiblePassword,
|
|
||||||
textInputAction: TextInputAction.done,
|
|
||||||
style: options.passwordTextStyle,
|
|
||||||
onFieldSubmitted: (_) async => _handleLogin(),
|
|
||||||
decoration: options.passwordDecoration.copyWith(
|
|
||||||
suffixIcon: options.showObscurePassword
|
|
||||||
? IconButton(
|
|
||||||
padding: options.suffixIconPadding,
|
|
||||||
onPressed: () {
|
|
||||||
setState(() {
|
|
||||||
_obscurePassword =
|
|
||||||
!_obscurePassword;
|
|
||||||
});
|
|
||||||
},
|
|
||||||
icon: Icon(
|
|
||||||
_obscurePassword
|
|
||||||
? Icons.visibility
|
|
||||||
: Icons.visibility_off,
|
|
||||||
size: options.suffixIconSize,
|
|
||||||
),
|
|
||||||
)
|
|
||||||
: null,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
),
|
),
|
||||||
if (widget.onForgotPassword != null) ...[
|
forgotPasswordButton,
|
||||||
Align(
|
|
||||||
alignment: Alignment.topRight,
|
|
||||||
child: options.forgotPasswordButtonBuilder(
|
|
||||||
context,
|
|
||||||
() {
|
|
||||||
widget.onForgotPassword
|
|
||||||
?.call(_currentEmail, context);
|
|
||||||
},
|
|
||||||
false,
|
|
||||||
() {},
|
|
||||||
options,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
] else ...[
|
|
||||||
const SizedBox(height: 16),
|
|
||||||
],
|
|
||||||
if (options.spacers.spacerAfterForm != null) ...[
|
if (options.spacers.spacerAfterForm != null) ...[
|
||||||
Spacer(flex: options.spacers.spacerAfterForm!),
|
Spacer(flex: options.spacers.spacerAfterForm!),
|
||||||
],
|
],
|
||||||
AnimatedBuilder(
|
loginButton,
|
||||||
animation: _formValid,
|
|
||||||
builder: (context, _) =>
|
|
||||||
options.loginButtonBuilder(
|
|
||||||
context,
|
|
||||||
_handleLogin,
|
|
||||||
!_formValid.value,
|
|
||||||
() {
|
|
||||||
_formKey.currentState?.validate();
|
|
||||||
},
|
|
||||||
options,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
if (widget.onRegister != null) ...[
|
if (widget.onRegister != null) ...[
|
||||||
options.registrationButtonBuilder(
|
registerButton,
|
||||||
context,
|
|
||||||
() async {
|
|
||||||
widget.onRegister?.call(
|
|
||||||
_currentEmail,
|
|
||||||
_currentPassword,
|
|
||||||
context,
|
|
||||||
);
|
|
||||||
},
|
|
||||||
false,
|
|
||||||
() {},
|
|
||||||
options,
|
|
||||||
),
|
|
||||||
],
|
],
|
||||||
if (options.spacers.spacerAfterButton != null) ...[
|
if (options.spacers.spacerAfterButton != null) ...[
|
||||||
Spacer(flex: options.spacers.spacerAfterButton!),
|
Spacer(flex: options.spacers.spacerAfterButton!),
|
||||||
|
|
@ -278,6 +240,64 @@ class _EmailPasswordLoginFormState extends State<EmailPasswordLoginForm> {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
class LoginTitle extends StatelessWidget {
|
||||||
|
const LoginTitle({
|
||||||
|
required this.options,
|
||||||
|
this.title,
|
||||||
|
this.subtitle,
|
||||||
|
super.key,
|
||||||
|
});
|
||||||
|
|
||||||
|
final LoginOptions options;
|
||||||
|
final Widget? title;
|
||||||
|
final Widget? subtitle;
|
||||||
|
|
||||||
|
@override
|
||||||
|
Widget build(BuildContext context) {
|
||||||
|
var theme = Theme.of(context);
|
||||||
|
return Column(
|
||||||
|
children: [
|
||||||
|
if (options.spacers.spacerBeforeTitle != null) ...[
|
||||||
|
Spacer(flex: options.spacers.spacerBeforeTitle!),
|
||||||
|
],
|
||||||
|
if (title != null) ...[
|
||||||
|
Align(
|
||||||
|
alignment: Alignment.topCenter,
|
||||||
|
child: wrapWithDefaultStyle(
|
||||||
|
title,
|
||||||
|
theme.textTheme.headlineSmall,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
if (options.spacers.spacerAfterTitle != null) ...[
|
||||||
|
Spacer(flex: options.spacers.spacerAfterTitle!),
|
||||||
|
],
|
||||||
|
if (subtitle != null) ...[
|
||||||
|
Align(
|
||||||
|
alignment: Alignment.topCenter,
|
||||||
|
child: wrapWithDefaultStyle(
|
||||||
|
subtitle,
|
||||||
|
theme.textTheme.titleSmall,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
if (options.spacers.spacerAfterSubtitle != null) ...[
|
||||||
|
Spacer(flex: options.spacers.spacerAfterSubtitle!),
|
||||||
|
],
|
||||||
|
if (options.image != null) ...[
|
||||||
|
Padding(
|
||||||
|
padding: const EdgeInsets.all(16),
|
||||||
|
child: options.image,
|
||||||
|
),
|
||||||
|
],
|
||||||
|
if (options.spacers.spacerAfterImage != null) ...[
|
||||||
|
Spacer(flex: options.spacers.spacerAfterImage!),
|
||||||
|
],
|
||||||
|
],
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
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;
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue