FlutterFlow Docs
Troubleshooting GuidesDocs Feedback
Ask or search…
⌃K
Links
Comment on page

Signature

The signature widget allows you to capture a signature. This widget tracks your finger or mouse pointer on a screen and draws the line accordingly on a signature pad.
You can use this widget to get the user consent on an agreement or contract in digital form.
Signature widget

Adding Signature widget

Here's an example of how you can add the Signature widget to your project:
  1. 1.
    First, drag the Signature widget from the Form Elements tab (in the Widget Panel) or add it directly from the widget tree.
  2. 2.
    Move to the properties panel, scroll down to the Signature section and adjust the width and height of the widget.
Adding signature widget

Saving signature to Firestore document

You might be using the Firestore database to store your app data in the collection-document model. Let's see how you can save the signature into the Firestore document.
Saving signature to Firestore document
The drawn signature is first uploaded and stored as an image into the Firebase Storage using the Upload Signature action. This returns the uploaded URL, which can be stored inside the Firestore document for later access.
Saving signature to Firestore document comprises the following steps:

1. Prerequisites

First, ensure you incorporate all the mentioned prerequisites.
  1. 1.
    Be familiar with Structuring the Firebase Database.
  2. 2.
    Complete all steps in the Firebase Setup section for your project.
  3. 3.
    Create a Collection with the schema that contains a field with an Image Path data type.
Field with Image Path data type

2. Upload signature

You can upload the signature by adding the Upload Signature action. Learn how to add this action on the page below.

3. Passing signature image URL into document field

The Upload Signature action (added in the previous step) returns the URL of the signature image. You can use it to pass into the document field by adding the action that creates or updates the document, such as Create Document or Update Document.
Here are the steps in detail:
  1. 1.
    Select the Widget (e.g., Button) on which you want to add the action.
  2. 2.
    Select Actions from the Properties panel (the right menu), and click Open. This will open an Action flow Editor in a new popup window.
    1. 1.
      Select the already added Upload Signature Action, click on the + button at the bottom of the box and select Add Action.
    2. 2.
      On the right side, search and select Create Document or Update Document.
    3. 3.
      If you select Create Document.
      1. 1.
        Set the Collection to your collection name (e.g., todo).
    4. 4.
      If you select Update Document, set the document reference to update.
      1. 1.
        If you have access to the document, set the Source to the actual document and Available Options to reference.
    5. 5.
      Under the Set Fields section, click on the + Field button.
    6. 6.
      Click on the Field name until you see the fields that store the slider value.
      1. 1.
        Set the Value Source to From Variable.
      2. 2.
        Click on the UNSET (this will open a popup on the left side).
      3. 3.
        Select the Widget State and then select Uploaded Signature URL.
    7. 7.
      Close the action flow editor.
Passing signature image URL into document field

Clear signature

You can allow users to delete the signature if they make a mistake or want to get the perfect signature. You can do this by adding the Clear Signature action. Learn how to add this action on the page below.

Customization

You can customize the appearance and behavior of this widget using the various properties available under the properties panel.

Customizing pen

To change the pen color and stroke width:
  1. 1.
    Select the Signature widget from the widget tree or the canvas area.
  2. 2.
    Move to the properties panel, and scroll down to the Signature section.
  3. 3.
    Find the Pen Color property and click on the box next to the already selected color, select the color, then click Use Color or click on an already selected color and enter a Hex Code directly.
  4. 4.
    Find the Pen Stroke Width property and enter the value. The higher value increases the thickness of the stroke.
Customizing pen

Changing background color

You can change the background color of the signature pad while the app is running and when the image is uploaded to the Firebase storage.
To change the background color:
  1. 1.
    Select the Signature widget from the widget tree or the canvas area.
  2. 2.
    Move to the properties panel, and scroll down to the Signature section.
  3. 3.
    Find the Background Color property and click on the box next to the already selected color, select the color, then click Use Color or click on an already selected color and enter a Hex Code directly.
  4. 4.
    Similarly, you can change the background color when the image is uploaded to the Firebase storage. To do so, use the Exported Background Color property.
Changing background color

Add padding

​Here are the instructions on how to add padding.

Adjust alignment

​Here are the instructions on adjusting the alignment.

Set color dynamically

See how to set a color from variable to any color property of this widget.

Show/hide widget

Please find the instructions to show/hide the widget here.
Previous
CheckboxGroup
Next
Widget Commonalities
Last modified 4mo ago