widget_toolkit_biometrics 0.0.1-dev2 widget_toolkit_biometrics: ^0.0.1-dev2 copied to clipboard
A Flutter package that helps users to handle enabling and disabling biometrics in an application
Widget Toolkit Biometrics #
Widget Toolkit Biometrics uses the local_auth package, in order to provide an easy to use Material Design switch, that enables you to enable or disable biometrics at the application level.
Demo #
Enable/Disable | Not Supported | Not Setup |
---|---|---|
Setup #
Step 1: Add the widget_toolkit_biometrics
and widget_toolkit
packages as dependencies.
$ flutter pub add widget_toolkit widget_toolkit_biometrics
Step 2: Follow the integration instructions for the local_auth package in order for the plugin to work on your desired platforms.
Step 3: Pass the WidgetToolkitTheme
extensions to the ThemeData
of your app:
MaterialApp(
theme: ThemeData.light().copyWith(
colorScheme: ColorScheme.fromSwatch(),
WidgetToolkitTheme.light,
],
),
darkTheme: ThemeData.dark().copyWith(
colorScheme: ColorScheme.fromSwatch(),
extensions: [
WidgetToolkitTheme.dark,
],
),
);
Step 4: Create an implementation of BiometricsLocalDataSource
, for example:
class ProfileLocalDataSource implements BiometricsLocalDataSource {
static const _areBiometricsEnabled = 'areBiometricsEnabled';
Future<SharedPreferences> get _storageInstance => SharedPreferences.getInstance();
@override
Future<bool> areBiometricsEnabled() async {
final storage = await _storageInstance;
return storage.getBool(_areBiometricsEnabled) ?? false;
}
@override
Future<void> setBiometricsEnabled(bool enable) async {
final storage = await _storageInstance;
await storage.setBool(_areBiometricsEnabled, enable);
}
}
Step 5: Use the BiometricsSwitch
widget somewhere in your widget tree, using your implementation of BiometricsLocalDataSource
:
//...
BiometricsSwitch(
biometricsLocalDataSource: ProfileLocalDataSource(),
),
//...
Customization #
Optionally you can provide a localizedReason
, this should be a localized string, which would get shown to the user when they are prompted to confirm that they want to enable biometrics.
localizedReason: 'Activate the biometrics of your device',
Optionally you can provide mapMessageToString
, which will be used to translate the BiometricsMessage
to human readable text and will be used in the default notification:
mapMessageToString: (message) {
switch (message) {
case BiometricsMessage.notSetup:
return 'To use biometrics, you need to turn it on in your device settings!';
case BiometricsMessage.notSupported:
return 'You don\'t have biometric feature on your device!';
case BiometricsMessage.enabled:
return 'Your biometrics are enabled!';
case BiometricsMessage.disabled:
return 'Your biometrics are disabled!';
}
},
Optionally provide builder
if you want to build the element in your own way using the implemented business logic.
builder: (context, enabled, setBiometrics) {
return Switch(
value: enabled,
onChanged: setBiometrics,
);
},
Optionally, use onStateChanged
to execute custom callback or present custom notification to the user whenever the biometrics are enabled or disabled successfully. If you have defined mapMessageToString
the result from that would be passed in as localizedMessage
, otherwise the default mapping of the message to an English string would be passed in. However if you do override this, you will have to handle the case where the user hasn't setup their biometrics, and needs to be led to the settings page to set them up, for example by using the app_settings library.
onStateChanged: (context, message, localizedMessage) {
showBlurredBottomSheet(
context: context,
configuration: const ModalConfiguration(
safeAreaBottom: false,
),
builder: (context) => MessagePanelWidget(
message: localizedMessage,
messageState: message.state(),
),
);
},
Optionally you can provide onError
to handle errors out of the package, or to show a notification, in practice this would only get called if the implementations of BiometricsLocalDataSource.areBiometricsEnabled()
or BiometricsLocalDataSource.setBiometricsEnabled(enable)
throw .
onError: (error) {
showBlurredBottomSheet(
context: context,
configuration:
const ModalConfiguration(safeAreaBottom: false),
builder: (context) => const MessagePanelWidget(
message: 'We\'re sorry we couldn\'t enable biometric authentication at this time',
messageState: MessagePanelState.important,
),
);
},