internal/flutter_login_widget
5
0
Fork 0
mirror of https://github.com/Iconica-Development/flutter_login_widget.git synced 2025-05-19 05:33:45 +02:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #39 from Iconica-Development/38-add-autofill-functionality-for-the-login-form

Browse source 
38 add autofill functionality for the login form
This commit is contained in:
mike doornenbal 2024-06-26 09:48:07 +02:00 committed by GitHub
commit 54e0a687cc
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 194 additions and 156 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
CHANGELOG.md
View file

@ -1,3 +1,8 @@
## 7.1.0
* Added autofillgroup to support native password managers
## 7.0.0 ## 7.0.0
* Removed `title` and `subtitle` parameters from `LoginOptions` in favour of passing them directly to the `EmailPasswordLoginForm` widget directly * Removed `title` and `subtitle` parameters from `LoginOptions` in favour of passing them directly to the `EmailPasswordLoginForm` widget directly

2
example/pubspec.lock
View file

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

308
lib/src/widgets/email_password_login.dart
View file

@ -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(
@ -153,108 +204,29 @@ class _EmailPasswordLoginFormState extends State<EmailPasswordLoginForm> {
), ),
child: Form( child: Form(
key: _formKey, key: _formKey,
child: Column( child: AutofillGroup(
mainAxisSize: MainAxisSize.min, child: Column(
children: [ mainAxisSize: MainAxisSize.min,
options.emailInputContainerBuilder( children: [
TextFormField( options.emailInputContainerBuilder(
textAlign: emailTextFormField,
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( passwordTextFormField,
TextFormField(
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,
),
), ),
), forgotPasswordButton,
if (widget.onForgotPassword != null) ...[ if (options.spacers.spacerAfterForm != null) ...[
Align( Spacer(flex: options.spacers.spacerAfterForm!),
alignment: Alignment.topRight, ],
child: options.forgotPasswordButtonBuilder( loginButton,
context, if (widget.onRegister != null) ...[
() { registerButton,
widget.onForgotPassword ],
?.call(_currentEmail, context); if (options.spacers.spacerAfterButton != null) ...[
}, Spacer(flex: options.spacers.spacerAfterButton!),
false, ],
() {},
options,
),
),
] else ...[
const SizedBox(height: 16),
], ],
if (options.spacers.spacerAfterForm != null) ...[ ),
Spacer(flex: options.spacers.spacerAfterForm!),
],
AnimatedBuilder(
animation: _formValid,
builder: (context, _) => options.loginButtonBuilder(
context,
_handleLogin,
!_formValid.value,
() {
_formKey.currentState?.validate();
},
options,
),
),
if (widget.onRegister != null) ...[
options.registrationButtonBuilder(
context,
() async {
widget.onRegister?.call(
_currentEmail,
_currentPassword,
context,
);
},
false,
() {},
options,
),
],
if (options.spacers.spacerAfterButton != null) ...[
Spacer(flex: options.spacers.spacerAfterButton!),
],
],
), ),
), ),
), ),
@ -268,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;

33
lib/src/widgets/forgot_password_form.dart
View file

@ -129,21 +129,24 @@ class _ForgotPasswordFormState extends State<ForgotPasswordForm> {
), ),
child: Form( child: Form(
key: _formKey, key: _formKey,
child: Align( child: AutofillGroup(
alignment: Alignment.center, child: Align(
child: options.emailInputContainerBuilder( alignment: Alignment.center,
TextFormField( child: options.emailInputContainerBuilder(
textAlign: TextFormField(
options.emailTextAlign ?? TextAlign.start, autofillHints: const [AutofillHints.email],
focusNode: _focusNode, textAlign:
onChanged: _updateCurrentEmail, options.emailTextAlign ?? TextAlign.start,
validator: focusNode: _focusNode,
widget.options.validations.validateEmail, onChanged: _updateCurrentEmail,
initialValue: options.initialEmail, validator:
keyboardType: TextInputType.emailAddress, widget.options.validations.validateEmail,
textInputAction: TextInputAction.next, initialValue: options.initialEmail,
style: options.emailTextStyle, keyboardType: TextInputType.emailAddress,
decoration: options.emailDecoration, textInputAction: TextInputAction.next,
style: options.emailTextStyle,
decoration: options.emailDecoration,
),
), ),
), ),
), ),

2
pubspec.yaml
View file

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