FlutterFlow Marketplace Item Documentation
  • FlutterFlow Marketplace Items Docs
  • Items
    • ID Card and Document Camera
    • RichTextEditor
Powered by GitBook
On this page
  • Description
  • Setup Instructions
  1. Items

ID Card and Document Camera

PreviousFlutterFlow Marketplace Items DocsNextRichTextEditor

Last updated 8 months ago

Description

The ID Card & Document Camera widget provides a customizable button that launches a camera interface with an overlay guide to help users capture clear images of documents like ID cards, passports, and SIM cards. This widget utilizes the flutter_camera_overlay package to display a camera overlay, making it easy for users to align their documents properly for the best possible capture.

Key features include:

  • Multiple card formats (ID cards, government IDs, SIM cards, etc.).

  • Option to rotate the camera to landscape mode for better document positioning.

  • Highly customizable button design with options for colors, border radius, padding, and text.

Note

This widget depends on the flutter_camera_overlay package

The camera package is also required for camera functionality; make sure Camera access is requested by your project

Setup Instructions

  1. Add the Widget to Your Page: Drag and drop the ID Card & Document Camera widget onto your desired page in FlutterFlow.

  2. Configure the Widget Properties:

    • width: Sets the width of the button (default is double.infinity).

    • height: Sets the height of the button (default is 50.0).

    • cardType: Select the card format for the overlay:

      • 0: Standard ID card (default).

      • 1: US Government ID card.

      • 2: SIM card.

    • infoText: Custom text to provide instructions for users (e.g., "Position your ID card within the rectangle").

    • labelText: Text label displayed inside the overlay (e.g., "Scanning ID Card").

    • buttonText: Text to display on the button (e.g., "Capture Document").

    • buttonColor: Defines the background color of the button.

    • borderRadius: Adjusts the button’s corner radius (default is 8.0).

    • padding: Specifies padding inside the button (default is 8.0).

    • rotateCamera: A boolean option to rotate the camera to landscape mode for better capture (default is false).

    • onCapture: Callback function to handle the captured image file. It returns an FFUploadedFile? object that can be processed or stored further.

  3. Add Camera Permissions: Make sure your apps requests for camera permission.

  4. Run Your Application: After configuring the widget properties and adding necessary permissions, run your app. When users tap the button, it opens the camera interface with a document overlay guide. After capturing, the widget returns the image file that can be used for verification, storage, or further processing.

By following these steps, you can seamlessly integrate and use the ID Card & Document Camera widget in your FlutterFlow project to capture high-quality document images.

FlutterFlow Marketplace
Item on Marketplace
Logo
Page cover image