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.
Adding CountController to your project
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.
Trigger action on count change
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.
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.
Now you can add any action here.
Here is an example of updating the count in an app state variable.
Customizing CountController
The Properties Panel can be used to customize the appearance and behavior of your widget.
Add Padding
Here are the instructions on how to add padding.
Adjust the Alignment
Here are the instructions on adjusting the alignment.
Customizing CountController Elements
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.
Customizing decrement icon
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 increment 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.
Changing Count Text style
To change the count text style, you can follow the instructions here.
Customizing CountController Container
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.
Set color dynamically
See how to set a color from variable to any color property of this widget.
Show/Hide CountController
Please find the instructions to show/hide the widget here
Last updated
