You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
description: Learn how to add CountController in your FlutterFlow app.
5
+
description: Learn how to add, configure, and use a Count Controller widget in your FlutterFlow app.
6
6
---
7
7
8
-
# CountController
8
+
# Count Controller
9
9
10
-
The CountController widget is used to increment and decrement the count or number.
10
+
The **Count Controller**widget lets users increase or decrease a numeric value. Use it for product quantities, guest counts, ticket selections, or any input that must stay within a defined range.
11
11
12
-
You could use the CountController widget to set the quantity of any product when buying in an e-commerce app.
12
+
## Adding a Count Controller Widget
13
13
14
-
:::tip[Widget State]
15
-
Before diving into form widgets, check out our guide on [**Widget States**](../../../../ff-concepts/state-management/widget-state.md) to efficiently manage the state and behavior of your form elements.
16
-
:::
14
+
To add a Count Controller widget:
17
15
18
-
## Adding CountController to your project
16
+
1. Add the **Count Button** widget from **Form Elements** in the **Widget Palette**.
17
+
2. To configure the count behavior, use the following options:
19
18
20
-
Here's an example of how you can use a CountController widget in your project:
19
+
-**Initial Count:** Sets the value displayed when the widget loads. The default is `0`. To set this value dynamically, select **Set from Variable**.
20
+
-**Step Size:** Sets how much the value increases or decreases with each tap. The default is `1`.
21
+
-**Minimum:** Sets the lowest value users can select.
22
+
-**Maximum:** Sets the highest value users can select.
21
23
22
-
1. First, drag the **CountController** widget from the **Form Elements** tab (in the Widget Panel) or add it directly from the widget tree.
23
-
2. Move to the properties panel (in the right) and scroll down to the **Count Controller Properties**.
24
-
3. 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.
25
-
4. 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.
26
-
5. 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.
24
+
For an inventory selector, you might set **Initial Count**, **Step Size**, and **Minimum** to `1`, and set **Maximum** to the available stock.
27
25
28
26
<div style={{
29
27
position: 'relative',
30
-
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
title="Add and configure a Count Controller widget"
36
35
style={{
37
36
position: 'absolute',
38
37
top: 0,
@@ -41,116 +40,49 @@ Here's an example of how you can use a CountController widget in your project:
41
40
height: '100%',
42
41
colorScheme: 'light'
43
42
}}
44
-
frameborder="0"
43
+
frameBorder="0"
45
44
loading="lazy"
46
45
webkitAllowFullScreen
47
46
mozAllowFullScreen
48
47
allowFullScreen
49
48
allow="clipboard-write">
50
49
</iframe>
51
50
</div>
51
+
52
52
<p></p>
53
53
54
-
## Trigger action on count change
54
+
## Accessing the Current Count
55
55
56
-
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.
56
+
The Count Controller stores its latest value in its [**widget state**](../../../../ff-concepts/state-management/widget-state.md). To use the value in another widget or action, select **Set from Variable > Widget State > [Count Controller name]**.
57
57
58
-
<div style={{
59
-
position: 'relative',
60
-
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
You can use this value to calculate a total price, control conditional visibility, pass a quantity to an action, or save the selection to your backend.
85
59
86
-
1. Select **CountController**, select **Actions** from the Properties panel (the right menu), and click **+ Add Action**.
87
-
2. 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.
88
-
3. Now you can add any action here.
60
+
## Triggering an Action When the Count Changes
89
61
90
-
Here is an example of updating the count in an [app state variable](../../../../resources/data-representation/app-state).
62
+
Use the **On Count Changed** trigger to run an action whenever the user increases or decreases the value:
91
63
92
-
<div style={{
93
-
position: 'relative',
94
-
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
1. Select the Count Controller widget and open the **Actions** tab in the **Properties Panel**.
65
+
2. Select **On Count Changed** and add the action you want to run.
66
+
3. Use the Count Controller's current widget state value wherever the action requires the latest count.
117
67
118
-
## Customizing CountController
68
+
## Customizing a Count Controller Widget
119
69
120
-
The Properties Panel can be used to customize the appearance and behavior of your widget.
70
+
Select the Count Controller in the **Widget Tree** or on the canvas, then use the following sections in the **Properties Panel**.
121
71
122
-
### Customizing icon
72
+
### Style Properties
123
73
124
-
To customize the decrement icon:
74
+
-**Decrement Icon:** Select the icon used to decrease the count, then set its **Icon Size** and **Icon Color**.
75
+
-**Increment Icon:** Select the icon used to increase the count, then set its **Icon Size** and **Icon Color**.
76
+
-**Disabled Icon Color:** Sets the color of the decrement icon when the count reaches its minimum value and the increment icon when it reaches its maximum value.
77
+
-**Count Text Style:** Controls the appearance of the count using **Theme Text Style**, **Font Family**, **Font Weight**, **Font Size**, **Text Color**, **Line Height**, **Letter Spacing**, and **Text Align**.
125
78
126
-
1. Select the **CountController** widget from the widget tree or the canvas area.
127
-
2. Move to the properties panel, and find the **Style Properties** section.
128
-
3. To change the icon, click on the already selected icon and then search and select the new icon.
129
-
4. To change the icon size, enter the value in the **Icon Size** property.
130
-
5. 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.
79
+
### Container Properties
131
80
132
-
<div style={{
133
-
position: 'relative',
134
-
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
0 commit comments