2022-11-25 11:41:44 +01:00
[](https://github.com/Iconica-Development) [](https://github.com/Iconica-Development/flutter_login_widget/actions/new) [](https://github.com/tenhobi/effective_dart)
2022-09-20 16:32:46 +02:00
2022-11-25 11:41:44 +01:00
# Login Widget
A package facilitating the basic ingredients for creating functional yet customizable login pages
2022-09-20 16:32:46 +02:00
2022-11-25 11:41:44 +01:00
[Login GIF ](flutter_login.gif )
2022-09-20 16:32:46 +02:00
2022-11-25 11:41:44 +01:00
## Setup
2022-09-20 16:32:46 +02:00
2023-03-14 11:16:13 +01:00
To use this package, add `flutter_login` as a dependency in your pubspec.yaml file.
2022-09-20 16:32:46 +02:00
2025-04-15 10:19:11 +02:00
### Biometrics authentication
You can use faceID or fingerprint by adding:
```dart
loginWithBiometrics: true,
triggerBiometricsAutomatically: true,
```
to the `LoginOptions` object. This will trigger the biometrics authentication immediately when the EmailPasswordLoginForm is shown.
For the full biometrics setup you can follow the instructions in the [local_auth ](https://pub.dev/packages/local_auth ) package.
You need to add the following permissions to your AndroidManifest.xml file:
```xml
< uses-permission android:name = "android.permission.USE_BIOMETRIC" / >
```
```java
import io.flutter.embedding.android.FlutterFragmentActivity;
public class MainActivity extends FlutterFragmentActivity {
// ...
}
```
or MainActivity.kt:
```kotlin
import io.flutter.embedding.android.FlutterFragmentActivity
class MainActivity: FlutterFragmentActivity() {
// ...
}
```
to inherit from `FlutterFragmentActivity` .
2022-11-25 11:41:44 +01:00
## How to use
2022-09-20 16:32:46 +02:00
2022-09-27 16:38:12 +02:00
```dart
2022-09-30 12:28:41 +02:00
final loginOptions = LoginOptions(
2023-03-14 11:16:13 +01:00
emailDecoration: const InputDecoration(
prefixIcon: Icon(Icons.email),
border: OutlineInputBorder(),
),
passwordDecoration: const InputDecoration(
prefixIcon: Icon(Icons.password),
2022-09-30 12:28:41 +02:00
border: OutlineInputBorder(),
),
title: const Text('Login'),
image: const FlutterLogo(),
requestForgotPasswordButtonBuilder: (context, onPressed, isDisabled) {
return Opacity(
opacity: isDisabled ? 0.5 : 1.0,
child: ElevatedButton(
onPressed: onPressed,
child: const Text('Send request'),
),
);
},
);
class LoginExample extends StatelessWidget {
const LoginExample({super.key});
2022-09-20 16:32:46 +02:00
2022-09-30 12:28:41 +02:00
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.dark(),
home: LoginScreen(),
);
}
}
2022-09-20 16:32:46 +02:00
2022-09-30 12:28:41 +02:00
class LoginScreen extends StatelessWidget {
const LoginScreen({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
body: EmailPasswordLoginForm(
options: loginOptions,
onLogin: (email, password) => print('$email:$password'),
onRegister: (email, password) => print('Register!'),
onForgotPassword: (email) {
Navigator.of(context).push(
MaterialPageRoute(
builder: (context) {
return const ForgotPasswordScreen();
},
),
);
},
),
);
}
}
class ForgotPasswordScreen extends StatelessWidget {
const ForgotPasswordScreen({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: ForgotPasswordForm(
options: loginOptions,
title: Text('Forgot password'),
description: Text('Hello world'),
onRequestForgotPassword: (email) {
print('Forgot password email sent to $email');
},
),
);
}
}
```
2022-11-25 11:41:44 +01:00
See the [Example Code ](example/lib/main.dart ) for an example on how to use this package.
## Issues
Please file any issues, bugs or feature request as an issue on our [GitHub ](https://github.com/Iconica-Development/flutter_login_widget ) page. Commercial support is available if you need help with integration with your app or services. You can contact us at [support@iconica.nl ](mailto:support@iconica.nl ).
## Want to contribute
If you would like to contribute to the plugin (e.g. by improving the documentation, solving a bug or adding a cool new feature), please carefully review our [contribution guide ](./CONTRIBUTING.md ) and send us your [pull request ](https://github.com/Iconica-Development/flutter_login_widget/pulls ).
## Author
This `flutter_login_widget` for Flutter is developed by [Iconica ](https://iconica.nl ). You can contact us at < support @ iconica . nl >