# Signature > This page is about FlutterFlow Studio (the visual builder), not FlutterFlow (the app builder you use by describing your app). URL: https://docs.flutterflow.io/resources/ui/widgets/built-in-widgets/signature Learn how to capture, upload, save, and clear a signature in FlutterFlow Studio. The **Signature** widget provides a drawing pad where users can sign with a finger, stylus, or mouse. You can clear the drawing, upload it as an image, and save the uploaded image URL in your database. A signature is drawn, uploaded as an image, and referenced by its URL in a database. :::caution A captured signature is sensitive user data. The drawing alone does not verify a user's identity or establish legally valid consent. Design your consent flow for the requirements that apply to your app, and clearly explain how the signature will be used, stored, and deleted. ::: ## Using the Signature Widget ### 1. Adding a Signature Widget To add and size the widget: 1. Add the **Signature** widget from the **Form Elements** section of the **Widget Palette**, or add it from the **Widget Tree**. 2. Select the widget and open the **Properties Panel**. 3. In the **Signature** properties, set its **Width** and **Height**. Give the pad enough space for users to sign comfortably on the smallest supported screen. ![Signature widget selected on an agreement page, with its size and appearance settings outlined in blue.](https://docs.flutterflow.io/assets/images/add-signature-widget-013fb0a390d882cd92fcdf8b6ad30e9a.avif) ### 2. Uploading a Signature The **Upload Signature** action uploads the drawing from a selected Signature widget to Firebase Storage. After the upload succeeds, you can use the uploaded image URL in other widgets or actions. :::note Currently, the **Upload Signature** action supports uploads only to [**Firebase Storage**](https://docs.flutterflow.io/integrations/firebase-storage/storage-rules#deploying-storage-rules). ::: Before starting the upload, make sure the user has drawn a signature. Also disable repeated submission while the upload is running, show progress, and provide a clear error message if it fails. To upload a signature: 1. Select the widget that submits the signature, such as a Button. 2. Open the **Actions** tab and select **+ Add Action**. 3. Select **Upload Signature**. 4. Set **Signature to Upload** to the Signature widget containing the drawing. 5. Optionally, enable **Crop Exported Image** to crop the uploaded image to the area containing the drawing instead of exporting the full Signature widget canvas. If the canvas width or height is unset or infinite, the exported image crops to the minimum size along that axis. The signature is centered in the exported canvas. ![Upload Signature action with the Signature widget selection and Crop Exported Image option outlined in blue.](https://docs.flutterflow.io/assets/images/upload-signature-action-6e9ab945852461781b4450c0dae33ca3.avif) ### 3. Accessing the Signature After the **Upload Signature** action succeeds, access the uploaded image URL from **Widget State > Uploaded Signature URL**. Select this value when setting an Image widget's source or passing the URL to another action. You can also save the URL in a database field so the signature remains available after the page closes. ![Update Page State action with the Uploaded Signature URL field and Widget State option outlined in blue.](https://docs.flutterflow.io/assets/images/uploaded-signature-url-a8dcd48b75c98e6341252f4a6051b476.avif) ## Clearing a Signature The **Clear Signatures** action erases the current drawing from one or more Signature widgets. :::caution This action does not delete an image that has already been uploaded, and it does not clear a URL already stored in your database. ::: To clear a drawing: 1. Select the widget that will clear the pad, such as an IconButton. 2. Open the **Actions** tab and select **+ Add Action**. 3. Select **Clear Signatures**. 4. Under **Signature Fields**, select the Signature widget or widgets to clear. If the signature has already been submitted, separately delete the stored file and clear its database URL. See [**Clearing or Deleting Media**](https://docs.flutterflow.io/concepts/file-handling/clear-delete-media) for the difference between clearing a local value and deleting uploaded media. ## Customizing the Signature Select the Signature widget and use its properties to configure: - **Width** and **Height**: Set the size of the drawing pad. - **Pen Color**: Set the color of the signature stroke. - **Pen Stroke Width**: Set the thickness of the signature stroke. - **Background Color**: Set the background color shown in the Signature widget. - **Export Background Color**: Set the background color of the saved signature PNG. :::note Signature widget colors are set when the widget initializes and do not update afterward. Use a pen color that contrasts clearly with the pad and avoid making the stroke so thin that it becomes difficult to see. ::: ## Best Practices - Explain why the signature is required before asking the user to draw it. - Apply database and storage rules that restrict access to authorized users. - Define how long signatures are retained and provide a deletion process when required. - Pair the signature with relevant consent details, such as the agreement version, user identity, and submission time, when appropriate for your use case. - Provide a clearly labeled way to clear and redraw the signature before submission. - Do not rely on color alone for instructions or error feedback. - Provide an accessible alternative when a user cannot draw a signature with a pointer or touch input.