Skip to content

Commit 1e5b147

Browse files
pinkeshmarsPoojaB26
pinkeshmars
and
PoojaB26
authored
Pinkesh/migrate remaining components (#96)
* Added date picker * Added color picker * Added scan bar code qr code * Added signature widget * Added flippable card widget * tag correction * Added checkbox, checkbox list tile and checkbox group in single page * Added switch and switch list tile * Added redirects * Address comments * Switches to Switch * Add StaggeredView as a separate header so it can be picked up by searches. * Move no-ui actions to utility actions [new page] --------- Co-authored-by: PoojaB26 <[email protected]>
1 parent 4f5538c commit 1e5b147

22 files changed

+1574
-295
lines changed

‎docs/resources/control-flow/functions/img/appearance-properties.png

365 KB
Loading

‎docs/resources/control-flow/functions/img/cupertino-style.png

76.3 KB
Loading

‎docs/resources/control-flow/functions/img/customize-color-picker.avif

303 KB
Binary file not shown.

‎docs/resources/control-flow/functions/utility-actions.md

Lines changed: 189 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,189 @@
1+
---
2+
slug: /resources/functions/utility-actions
3+
title: Utility Actions
4+
description: Learn about the built-in utility Actions available in FlutterFlow to enhance your app's UI logic.
5+
tags: [Functions]
6+
sidebar_position: 5
7+
keywords: [Built-in Functions, Backend Query, Backend Logic, Control Flow, FlutterFlow, pub.dev]
8+
---
9+
import Tabs from '@theme/Tabs';
10+
import TabItem from '@theme/TabItem';
11+
12+
# Utility Actions
13+
14+
Utility Actions provide essential functionalities that enhance your app's capabilities, such as data manipulation and system interactions. These actions streamline processes and improve the overall user experience. Examples include copying text to the clipboard and selecting colors or dates.
15+
16+
17+
18+
## Color Picker
19+
20+
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.
21+
22+
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*.
23+
24+
<div style={{
25+
position: 'relative',
26+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
27+
height: 0,
28+
width: '100%'}}>
29+
<iframe
30+
src="https://demo.arcade.software/5lUa4lK1SgPUQvkM6Kqj?embed&show_copy_link=true"
31+
title=""
32+
style={{
33+
position: 'absolute',
34+
top: 0,
35+
left: 0,
36+
width: '100%',
37+
height: '100%',
38+
colorScheme: 'light'
39+
}}
40+
frameborder="0"
41+
loading="lazy"
42+
webkitAllowFullScreen
43+
mozAllowFullScreen
44+
allowFullScreen
45+
allow="clipboard-write">
46+
</iframe>
47+
</div>
48+
<p></p>
49+
50+
51+
### Adding Color Picker [Action]
52+
53+
Follow the steps below to add this action to any widget.
54+
55+
1. Select the **Widget** (e.g., Container, Button, etc.) on which you want to add the action.
56+
2. 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**.
57+
3. Search and select the **Color Picker** (under *Widget/UI Interactions*) action.
58+
4. When the color picker is opened, by default, the primary color is selected. To change this, set the **Initially Selected Color**.
59+
5. You can also customize the look and feel of the color picker by changing the color of the **Text**, **Background**, and **Button**.
60+
6. 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.
61+
7. 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.
62+
8. 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.
63+
64+
:::info
65+
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**.
66+
:::
67+
68+
Here's an example of adding the color picker action and updating the selected color in an app state variable.
69+
70+
<Tabs>
71+
<TabItem value="1" label="Adding color picker action" default>
72+
<div style={{
73+
position: 'relative',
74+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
75+
height: 0,
76+
width: '100%'}}>
77+
<iframe
78+
src="https://demo.arcade.software/BHfN2umFDQgL0upiZUaz?embed&show_copy_link=true"
79+
title=""
80+
style={{
81+
position: 'absolute',
82+
top: 0,
83+
left: 0,
84+
width: '100%',
85+
height: '100%',
86+
colorScheme: 'light'
87+
}}
88+
frameborder="0"
89+
loading="lazy"
90+
webkitAllowFullScreen
91+
mozAllowFullScreen
92+
allowFullScreen
93+
allow="clipboard-write">
94+
</iframe>
95+
</div>
96+
<p></p>
97+
</TabItem>
98+
<TabItem value="2" label="Customize color picker">
99+
![customize-color-picker](img/customize-color-picker.avif)
100+
</TabItem>
101+
</Tabs>
102+
103+
104+
## DateTime Picker
105+
This action allows the user to select a date and time. You could use it to schedule appointments, set a reminder for a specific date, choose travel dates and times, etc.
106+
107+
When this action is triggered, it opens the graphical calendar and clock interface that the user can interact with to select a specific date and time.
108+
109+
<div style={{
110+
position: 'relative',
111+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
112+
height: 0,
113+
width: '100%'}}>
114+
<iframe
115+
src="https://demo.arcade.software/HyKZpuo986EOfdG7IrQC?embed&show_copy_link=true"
116+
title=""
117+
style={{
118+
position: 'absolute',
119+
top: 0,
120+
left: 0,
121+
width: '100%',
122+
height: '100%',
123+
colorScheme: 'light'
124+
}}
125+
frameborder="0"
126+
loading="lazy"
127+
webkitAllowFullScreen
128+
mozAllowFullScreen
129+
allowFullScreen
130+
allow="clipboard-write">
131+
</iframe>
132+
</div>
133+
<p></p>
134+
135+
### Types Date/Time Picker
136+
137+
You can choose to open the following types of *Date/Time* picker dialog:
138+
139+
- **Date**: Allows you to only select a date.
140+
- **Date+Time**: Allows you to select the date followed by the time.
141+
- **Time**: Allows you to only select a time.
142+
143+
### Adding Date/Time Picker [Action]
144+
145+
Follow the steps below to add this action to any widget.
146+
147+
1. Select the **Widget** (e.g., Container, Button, etc.) on which you want to add the action.
148+
2. 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**.
149+
3. Search and select the **Date/Time Picker** (under *Widget/UI Interactions*) action.
150+
4. Set the [Date/Time picker type](#types-datetime-picker).
151+
5. By default, the picker shows the current date/time. You can change this by adjusting the **Default Date/Time**.
152+
6. To define the range of selectable dates, use the **Minimum Date/Time** and **Maximum Date/Time** properties. Click on **Unset** to specify your dates.
153+
7. Control whether the past and future dates/times are selectable with **Allow Past Date/Time** and **Allow Future Date/Time**. **Tip**: If you explicitly set the min or max date, this option will be disabled.
154+
8. For an iOS-style display, activate the **Use Cupertino-style** toggle.
155+
![cupertino-style](img/cupertino-style.png)
156+
9. For more personalized styling, turn off **Use Default Theme** and tweak the settings in the **Appearance Properties** section.
157+
![appearance-properties](img/appearance-properties.png)
158+
159+
:::info
160+
After the user has selected the desired date and time, the picker will close automatically, and the selected date/time can then be accessed via the ***Widget State > Date Picked**.*
161+
:::
162+
163+
Here's an example of adding the date time picker action and displaying the value in a Text widget.
164+
165+
<div style={{
166+
position: 'relative',
167+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
168+
height: 0,
169+
width: '100%'}}>
170+
<iframe
171+
src="https://www.loom.com/embed/ffcbf0422511433b93bef7b08f7501a5?sid=cebeb57a-5bbc-41c4-9604-c9ba2b1aad32"
172+
title=""
173+
style={{
174+
position: 'absolute',
175+
top: 0,
176+
left: 0,
177+
width: '100%',
178+
height: '100%',
179+
colorScheme: 'light'
180+
}}
181+
frameborder="0"
182+
loading="lazy"
183+
webkitAllowFullScreen
184+
mozAllowFullScreen
185+
allowFullScreen
186+
allow="clipboard-write">
187+
</iframe>
188+
</div>
189+
<p></p>

0 commit comments

Comments
 (0)