CountController
The CountController widget is used to increment and decrement the count or number.
You could use the CountController widget to set the quantity of any product when buying in an e-commerce app.
CounController widget
Here's an example of how you can use a CountController widget in your project:
- First, drag the CountController widget from the Form Elements tab (in the Widget Panel) or add it directly from the widget tree.
- Move to the properties panel (in the right) and scroll down to the Count Controller Properties.
- The number on CountController appears as soon as it is loaded, called the Initial Count, 0 by default. To change this initial count, enter the value in the Initial Count input box. You can also set this value dynamically by having it Set from Variable. This can be used to display the default quantity of a product in an E-commerce app.
- The Step Size property sets the value by which the count should be increased or decreased. The default value is 1. To change this, enter the value in the Step Size input box.
- To allow users to set the valid count or quantity, you can limit the CountController range (min and max count) by specifying the value in the Minimum and Maximum input boxes.
Adding CountController widget
Let's see how to trigger an action when the count changes on this widget. This is helpful when you want to update the latest count in your backend (make API call, create/update Firestore document) as the count changes.
Showing the latest count as it changes
To do so:
- Select CountController, select Actions from the Properties panel (the right menu), and click + Add Action.
- You will notice that the Type of Action (aka callback) is already set to On Count Changed. That means actions added under this will be called whenever the count changes.
Trigger action on count change
The elements refer to the increment icon, decrement icon, and count text. You can use the Style Properties section to customize the look and feel of these elements.
To customize the decrement icon:
- Select the CountController widget from the widget tree or the canvas area.
- Move to the properties panel, and find the Style Properties section.
- To change the decrement icon, click on the already selected icon (i.e. Minus -) and then search and select the new icon.
- To change the icon size, enter the value in the Icon Size property.
- To change the icon color, find the Icon Color property, click on the box next to the selected color, select the color, and click Use Color or click on Unset and enter a Hex Code directly.
Customizing decrement icon
To customize the increment icon:
- Select the CountController widget from the widget tree or the canvas area.
- Move to the properties panel, and find the Style Properties section.
- To change the increment icon, click on the already selected icon (i.e Plus +) and then search and select the new icon.
- To change the icon size, enter the value in the Icon Size property.
- To change the icon color, find the Icon Color property, click on the box next to the selected color, select the color, and click Use Color or click on Unset and enter a Hex Code directly.
Customizing increment icon
The CountController elements (decrement,increment icon,count text) resides in the rounded rectangular box called container. You can use the Container Properties section to change its shape, size, and background color, customize its border, and add the elevation and gradient color.
Last modified 5mo ago