Color Picker
Using this action, you can allow users to pick their favorite color from the palette or by entering a HEX/RGB color value. You might, for instance, utilize this to give customers the option of choosing the color of a product you offer.
When this action is triggered, it opens the color picker, where users can customize the color. The color picker will close once the desired color has been selected, and the selected color will then be accessible via Widget State > Color Picked.
Adding Color Picker action
Follow the steps below to add this action to any widget.
Select the Widget (e.g., Container, Button, etc.) on which you want to add the action.
Select Actions from the properties panel (the right menu), If it's the first action, click + Add Action button. Otherwise, click the "+" button below the previous action tile (inside Action Flow Editor) and select Add Action.
Search and select the Color Picker (under Widget/UI Interactions) action.
When the color picker is opened, by default, the primary color is selected. To change this, set the Initially Selected Color.
You can also customize the look and feel of the color picker by changing the color of the Text, Background, and Button.
By default, the color picker allows users to add opacity to the color. To allow users only select the opaque colors, disable the Allow Opacity toggle.
Recent colors help users choose any previous color they have used. Disable the Show Recent Color toggle if you don't want to show them.
The selected color is now available at Widget State > Color Picked. You can access it from any widget's color property or click the "+" button and add the following action to update the selected color in your backend or app state.
After the user has selected the desired color, the picker will close automatically, and the selected color can then be accessed via the Widget State > Color Picked.
Here's an example of adding the color picker action and updating the selected color in an app state variable.
Last updated
