Comment on page
Flutter 🦅
Our
CardScan Flutter widget makes it easy to add insurance card scanning to any Flutter application in 5 minutes or less.
Add the
insurance_card_scanner package to your pubspec.yaml file.dependencies:
flutter:
sdk: flutter
insurance_card_scanner: ^0.1.4
Import the library widget into your project files:
import 'package:insurance_card_scanner/insurance_card_scanner.dart';
You can optionally add the API client for more custom applications.
import 'package:insurance_card_scanner/insurance_card_scanner_api.dart';
import 'package:insurance_card_scanner/insurance_card_scanner.dart';
class ScannerWidgetScreen extends StatelessWidget {
const ScannerWidgetScreen({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Scanner widget'),
),
body: CardScanner(
sessionToken: '<pass your token here>',
onCardScanSuccess: (card) {
print('Scan success');
},
onCardScanError: (message) {
print(message ?? 'Unknown Scan error');
},
onCardScanCancel: () {
Navigator.of(context).pop();
},
),
);
}
}
CardScanner(
// Required
live: false,
sessionToken: token,
onCardScanSuccess: onSuccess,
// Recommended
onCardScanCancel: onCancel,
onCardScanError: onError,
// Optional
backsideSupport: scanBackside,
onCardScanRetry: onRetry,
shouldCardScanRetry: shouldRetry,
// UI Customization
messages: messages,
messageStyle: messagesStyle,
autoSwitchActiveColor: autoSwitchActiveColor,
autoSwitchInactiveColor: autoSwitchInactiveColor,
progressBarColor: progressBarColor,
widgetBackgroundColor: widgetBackgroundColor,
)
Prop | Required | Type | Description |
|---|---|---|---|
live | false | Boolean | Toggle the production or sandbox version. Default: false |
sessionToken | true | String | |
onCardScanSuccess | true | Function | Called on successful scan. The first argument is the scanned card. |
onCardScanCancel | false | Function | Triggered when the user cancels the CardScanner UI. |
onCardScanError | false | Function | Called when an error is returned by the API or the CardScanner fails to initalize. |
backsideSupport | false | Boolean | Enable scanning of the front and back side of the card.
Default: false |
onCardScanRetry | false | Function | Called when a failed scan triggers a retry. |
shouldCardScanRetry | false | Function | Called when a scan has failed, returning false will cause the scan to not retry.
Default: True |
The flutter widget is designed to be customizable. Please see the customization section of UI Components to adjust these elements to match your application's branding and theme:
Note: All UI/UX Props are optional
Prop | Type | Description |
|---|---|---|
messages | Object | Customize the text displayed by the UI. |
messageStyle | TextStyle | Set the size, color and background color of the text displayed by the UI. |
autoSwitchActiveColor | Color | Set the color of the auto scan switch |
autoSwitchInactiveColor | Color | Set the color of the disabled auto scan switch |
progressBarColor | Color | Set the color of the progress bars or bounding box that surrounds the card scanning area. |
widgetBackgroundColor | Color | Set the main background color for the widget. |
The
onCardScanSuccess callback allows you to execute a custom function when the card scanning process is completed successfully. This function receives the scanned card data as an argument.To use the
onCardScanSuccess callback, pass a function that receives the scanned card data:void handleCardScanSuccess(Card card) {
print('Card scanned successfully: $card');
}
CardScanner(
sessionToken: token,
onCardScanSuccess: handleCardScanSuccess,
)
In this example, the
handleCardScanSuccess function logs the scanned card data to the console when the scanning process is completed successfully.The
onCardScanError callback allows you to execute a custom function when there's a failure during the card scanning process. This function receives an error object as an argument.To use the
onCardScanError callback, pass a function that receives the error object:void handleCardScanError(CardScanError error) {
print('Scanning failed: $error');
}
CardScanner(
sessionToken: token,
onCardScanSuccess: cardScanSuccess,
onCardScanError: handleCardScanError,
)
In this example, the
handleCardScanError function logs the error object to the console when a scanning failure occurs.By using the
onCardScanSuccess and onCardScanError callbacks, you can handle successful and failed scanning events, allowing you to implement custom actions or display appropriate messages to the user.
The
onCardScanCancel callback enables you to execute a custom function when the user cancels the card scanning process. This can be useful for tracking user behavior, navigating to a different part of the application, or displaying an appropriate message.To use the
onCardScanCancel callback, pass a function that will be executed when the user cancels the scanning process:import 'package:flutter/material.dart';
import 'package:insurance_card_scanner/insurance_card_scanner.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
bool showCardScanWidget = true;
void cardScanSuccess(Card card) {
// Handle card scan success
}
void cardScanError(CardScanError error) {
// Handle card scan error
}
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Insurance Card Scanner'),
),
body: showCardScanWidget
? CardScanner(
sessionToken: token,
onCardScanSuccess: cardScanSuccess,
onCardScanError: cardScanError,
onCardScanCancel: () => setState(() => showCardScanWidget = false),
)
: Container(),
),
);
}
}
In this example, we initialize the
showCardScanWidget state variable to true. Then, we conditionally render the CardScanner widget based on the value of showCardScanWidget. We then use the onCardScanCancel callback to set the showCardScanWidget state variable to false when the user cancels the scanning process.
The
onCardScanRetry callback allows you to execute a custom function when a retry is triggered due to a scanning failure.To use the
onCardScanRetry callback, pass a function that receives the retry event as an argument:void handleRetry(dynamic event) {
print('Retry triggered: $event');
}
CardScanner(
sessionToken: token,
onCardScanSuccess: cardScanSuccess,
onCardScanRetry: handleRetry,
)
In this example, the
handleRetry function logs the retry event to the console when a retry is triggered.
The
shouldCardScanRetry callback allows you to control whether the scanning process should automatically retry upon failure. By default, the component retries automatically if the scanning fails. If you want to disable this behavior, pass a function that returns false to the shouldCardScanRetry callback.To use the
shouldCardScanRetry prop, pass a function that returns a boolean value:bool disableRetry() {
return false;
}
CardScanner(
sessionToken: token,
onCardScanSuccess: cardScanSuccess,
onCardScanRetry: handleRetry,
shouldCardScanRetry: disableRetry,
)
In this example, the
disableRetry function returns false, which disables the automatic retry behavior. If you want to conditionally enable or disable retries based on specific criteria, modify the disableRetry function accordingly.Last modified 2d ago