widget_toolkit_biometrics

Description:

widget toolkit biometrics

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
copied to clipboard
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(),
],
),
);
copied to clipboard
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);
}
}
copied to clipboard
Step 5: Use the BiometricsSwitch widget somewhere in your widget tree, using your implementation of BiometricsLocalDataSource:
//...
BiometricsSwitch(
biometricsLocalDataSource: ProfileLocalDataSource(),
),
//...
copied to clipboard
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',
copied to clipboard
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!';
}
},
copied to clipboard
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,
);
},
copied to clipboard
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(),
),
);
},
copied to clipboard
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,
),
);
},
copied to clipboard