flutter_login_widget/README.md

Login Widget

A package facilitating the basic ingredients for creating functional yet customizable login pages

Login GIF

Setup

To use this package, add flutter_login as a dependency in your pubspec.yaml file.

Biometrics authentication

You can use faceID or fingerprint by adding:

  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 package.

You need to add the following permissions to your AndroidManifest.xml file:

  <uses-permission android:name="android.permission.USE_BIOMETRIC"/>

import io.flutter.embedding.android.FlutterFragmentActivity;

public class MainActivity extends FlutterFragmentActivity {
    // ...
}

or MainActivity.kt:

import io.flutter.embedding.android.FlutterFragmentActivity

class MainActivity: FlutterFragmentActivity() {
    // ...
}

to inherit from FlutterFragmentActivity.

How to use

final loginOptions = LoginOptions(
  emailDecoration: const InputDecoration(
    prefixIcon: Icon(Icons.email),
    border: OutlineInputBorder(),
  ),
  passwordDecoration: const InputDecoration(
    prefixIcon: Icon(Icons.password),
    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});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark(),
      home: LoginScreen(),
    );
  }
}

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');
        },
      ),
    );
  }
}

See the Example Code for an example on how to use this package.

Issues

Please file any issues, bugs or feature request as an issue on our GitHub page. Commercial support is available if you need help with integration with your app or services. You can contact us at 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 and send us your pull request.

Author

This flutter_login_widget for Flutter is developed by Iconica. You can contact us at support@iconica.nl