Skip to content

Commit 8a840b9

Browse files
pinkeshmarspinkeshmars
authored
Merge pull request #106 from FlutterFlow/pinkesh/missing-topics-2-1
Missing topics 2.1
2 parents 1e5b147 + dcb9486 commit 8a840b9

34 files changed

+1140
-56
lines changed

‎docs/ff-concepts/alerts-notification/_category_.json

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"label": "Alerts & Notifications",
3+
"position": 8
4+
}

‎docs/ff-concepts/alerts-notification/alert-dialog.md

Lines changed: 199 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,199 @@
1+
---
2+
title: Alert Dialog
3+
slug: /concepts/alerts-notification/alert-dialog
4+
sidebar_position: 0
5+
tags: [Actions, Alerts & Notifications]
6+
keywords: [FlutterFlow, Actions, Alerts & Notifications, Alert Dialog]
7+
---
8+
9+
# Alert Dialog
10+
11+
The action allows you to alert the user of important situations that require acknowledgment in the form of a pop-up or custom-designed dialog. With this feature, you can choose to display a pre-built pop-up or create a custom design that suits your specific requirements.
12+
13+
<div style={{
14+
position: 'relative',
15+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
16+
height: 0,
17+
width: '100%'}}>
18+
<iframe
19+
src="https://demo.arcade.software/i3HbwgcbqbLyJQPRjr8a?embed&show_copy_link=true"
20+
title=""
21+
style={{
22+
position: 'absolute',
23+
top: 0,
24+
left: 0,
25+
width: '100%',
26+
height: '100%',
27+
colorScheme: 'light'
28+
}}
29+
frameborder="0"
30+
loading="lazy"
31+
webkitAllowFullScreen
32+
mozAllowFullScreen
33+
allowFullScreen
34+
allow="clipboard-write">
35+
</iframe>
36+
</div>
37+
<p></p>
38+
39+
### Types of Alert Dialog
40+
41+
We allow you to define two types of Alert Dialog Actions:
42+
43+
- **Informational Dialog:** To show some information the user should be aware of before interacting with the app. Contains only a single action button.
44+
- **Confirm Dialog:** This dialog can contain two action buttons. It can trigger the subsequent action based on whether a user confirms the action. It can also be used before performing any non-revertable user action, for example, before deleting a user account.
45+
- **Custom Dialog**: This is a fully customizable dialog that you can create using [components](../../resources/ui/components/overview.md).
46+
47+
### Adding Informational Dialog [Action]
48+
49+
Follow the steps below to add this type of action to any widget:
50+
51+
1. Select the **Widget** (e.g., Button) on which you want to add the action.
52+
2. Select **Actions** from the Properties panel (the right menu), and click **+ Add Action**.
53+
3. Search and select the **Alert Dialog** (under *Alerts/Notifications*) action.
54+
4. Set the **Alert Dialog Type** to **Informational Dialog**.
55+
5. Provide the **Title** and **Message** for the dialog. Note: You can also set it from a variable; for example, a combined text with a value from a variable.
56+
6. Also, enter a **Dismiss Text** that will be shown on the action button.
57+
58+
<div style={{
59+
position: 'relative',
60+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
61+
height: 0,
62+
width: '100%'}}>
63+
<iframe
64+
src="https://demo.arcade.software/99GFeVxk2dvIX7kFatOP?embed&show_copy_link=true"
65+
title=""
66+
style={{
67+
position: 'absolute',
68+
top: 0,
69+
left: 0,
70+
width: '100%',
71+
height: '100%',
72+
colorScheme: 'light'
73+
}}
74+
frameborder="0"
75+
loading="lazy"
76+
webkitAllowFullScreen
77+
mozAllowFullScreen
78+
allowFullScreen
79+
allow="clipboard-write">
80+
</iframe>
81+
</div>
82+
<p></p>
83+
84+
### Adding Confirm Dialog [Action]
85+
86+
Follow the steps below to add this type of action to any widget:
87+
88+
1. Select the **Widget** (e.g., Button) on which you want to define the action.
89+
2. Select **Actions** from the Properties panel (the right menu), and click **Open**. This will open an **Action Flow Editor** in a new popup window.
90+
1. Click on the **+ Add Action**.
91+
2. On the right side, search and select **Alert Dialog**.
92+
3. Set the **Alert Dialog Type** to **Confirm Dialog**.
93+
4. Provide the **Title** and **Message** for the dialog. Note: You can also set it from a variable; for example, a combined text with a value from a variable.
94+
5. Now, enter a **Dismiss Text** (shown on the action button that will cancel the Action) and a **Confirm Text** (shown on the action button that will trigger the Action that you will define in the next step).
95+
6. Now, click on the **+** button and select **Add Conditional**.
96+
7. On the right side (**Set Condition for Action**), set the **Source** to **Confirm Dialog Response**.
97+
1. Under the **TRUE** section, add an action that will be triggered if a user gives confirmation.
98+
2. Under the **FALSE** section, add an action that will be triggered if a user cancels this dialog.
99+
3. Click **Close**.
100+
101+
<div style={{
102+
position: 'relative',
103+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
104+
height: 0,
105+
width: '100%'}}>
106+
<iframe
107+
src="https://demo.arcade.software/zlP2hl64nrid2ODbN8wb?embed&show_copy_link=true"
108+
title=""
109+
style={{
110+
position: 'absolute',
111+
top: 0,
112+
left: 0,
113+
width: '100%',
114+
height: '100%',
115+
colorScheme: 'light'
116+
}}
117+
frameborder="0"
118+
loading="lazy"
119+
webkitAllowFullScreen
120+
mozAllowFullScreen
121+
allowFullScreen
122+
allow="clipboard-write">
123+
</iframe>
124+
</div>
125+
<p></p>
126+
127+
### Adding Custom Dialog [Action]
128+
129+
Before you add this action, ensure you [create a component](../../resources/ui/components/custom-components/getting-started.md) that you want to display as a custom dialog. Now follow the steps below to add this type of action to any widget:
130+
131+
1. Select the **Widget** (e.g., Button) on which you want to add the action.
132+
2. Select **Actions** from the Properties panel (the right menu), and click **+ Add Action**.
133+
3. Search and select the **Alert Dialog** (under *Alerts/Notifications*) action.
134+
4. Set the **Alert Dialog Type** to **Custom Dialog** and **Select Component**.
135+
5. It is recommended to set the appropriate **Width** and **Height** for the custom dialog.
136+
6. Optionally, you can set the **Background** and **Barrier Color** for this dialog.
137+
138+
![Setting background color and barrier color](imgs/custom-dialog.avif)
139+
140+
7. By default, this type of action blocks the following action (if any) from triggering while this action is in progress, meaning the dialog is present on the screen. However, in some cases, you might want to allow the next action (after this) to execute, for example, making an API call immediately after showing the custom loading dialog. To do so, enable **Non Blocking** option.
141+
8. By default, **Non Dismissble** option closes the dialog when you click outside of it. To disable this behavior, enable this option.
142+
143+
<div style={{
144+
position: 'relative',
145+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
146+
height: 0,
147+
width: '100%'}}>
148+
<iframe
149+
src="https://demo.arcade.software/F5SinThEDKDwc337AM60?embed&show_copy_link=true"
150+
title=""
151+
style={{
152+
position: 'absolute',
153+
top: 0,
154+
left: 0,
155+
width: '100%',
156+
height: '100%',
157+
colorScheme: 'light'
158+
}}
159+
frameborder="0"
160+
loading="lazy"
161+
webkitAllowFullScreen
162+
mozAllowFullScreen
163+
allowFullScreen
164+
allow="clipboard-write">
165+
</iframe>
166+
</div>
167+
<p></p>
168+
169+
9. By default, the custom dialog appears in the center of the screen. However, you can use the **Dialog Alignment** property to decide where to position the dialog on the screen.
170+
171+
![Align custom dialog](imgs/align-custom-dialog.avif)
172+
173+
10. To position the dialog around the widget that opened it, enable the **Align with the Target Widget**, and then align using the **Target Alignment** property. **Tip**: If dialog goes out of the screen, enable **Avoid Overflow**.
174+
175+
<div style={{
176+
position: 'relative',
177+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
178+
height: 0,
179+
width: '100%'}}>
180+
<iframe
181+
src="https://demo.arcade.software/DwufbH1LAEpjw1dBSRYX?embed&show_copy_link=true"
182+
title=""
183+
style={{
184+
position: 'absolute',
185+
top: 0,
186+
left: 0,
187+
width: '100%',
188+
height: '100%',
189+
colorScheme: 'light'
190+
}}
191+
frameborder="0"
192+
loading="lazy"
193+
webkitAllowFullScreen
194+
mozAllowFullScreen
195+
allowFullScreen
196+
allow="clipboard-write">
197+
</iframe>
198+
</div>
199+
<p></p>

‎docs/ff-concepts/alerts-notification/dismiss-custom-dialog.md

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
---
2+
title: Dismiss Custom Dialog
3+
slug: /concepts/alerts-notification/dismiss-custom-dialog
4+
sidebar_position: 1
5+
tags: [Actions, Alerts & Notifications]
6+
keywords: [FlutterFlow, Actions, Alerts & Notifications, Dismiss Custom Dialog]
7+
---
8+
9+
# Dismiss Custom Dialog
10+
11+
With this action, you can easily close the [custom dialog](alert-dialog.md#adding-custom-dialog-action), providing a convenient way for users to dismiss it. This functionality is handy when you want to give users the option to close the dialog from any widget within it, like a close button.
12+
13+
<div style={{
14+
position: 'relative',
15+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
16+
height: 0,
17+
width: '100%'}}>
18+
<iframe
19+
src="https://demo.arcade.software/ihrcUlB3vJ7L6Oog2Ob0?embed&show_copy_link=true"
20+
title=""
21+
style={{
22+
position: 'absolute',
23+
top: 0,
24+
left: 0,
25+
width: '100%',
26+
height: '100%',
27+
colorScheme: 'light'
28+
}}
29+
frameborder="0"
30+
loading="lazy"
31+
webkitAllowFullScreen
32+
mozAllowFullScreen
33+
allowFullScreen
34+
allow="clipboard-write">
35+
</iframe>
36+
</div>
37+
<p></p>
38+
39+
## Adding Dismiss Custom Dialog [Action]
40+
41+
Follow the steps below to add this type of action to any widget:
42+
43+
1. Select the **Widget** (e.g., Button) on which you want to add the action.
44+
2. Select **Actions** from the Properties panel (the right menu), and click **+ Add Action**.
45+
3. Search and select the **Dismiss Custom Dialog** (under *Alerts/Notifications*) action.
46+
4. You can set a default value to be sent when the user closes the custom dialog. You can do so by enabling the **Has Value** option. For instance, if the dialog provides a list of colors and the user closes it without selecting any color, you can set a default color value of "Black" to be sent as the default selection.
47+
48+
![Adding Dismiss Custom Dialog action](imgs/adding-dismiss-custom-dialog-action.png)

‎docs/ff-concepts/alerts-notification/imgs/adding-dismiss-custom-dialog-action.png

53.4 KB
Loading

‎docs/ff-concepts/alerts-notification/imgs/align-custom-dialog.avif

88.6 KB
Binary file not shown.

‎docs/ff-concepts/alerts-notification/imgs/custom-dialog.avif

151 KB
Binary file not shown.

‎docs/ff-integrations/notifications/push-notifications/img.png renamed to ‎docs/ff-concepts/alerts-notification/imgs/img.png

File renamed without changes.

‎docs/ff-integrations/notifications/push-notifications/img_1.png renamed to ‎docs/ff-concepts/alerts-notification/imgs/img_1.png

File renamed without changes.

‎docs/ff-integrations/notifications/push-notifications/img_2.png renamed to ‎docs/ff-concepts/alerts-notification/imgs/img_2.png

File renamed without changes.

‎docs/ff-integrations/notifications/one-signal/img.png renamed to ‎docs/ff-concepts/alerts-notification/imgs/os-img.png

File renamed without changes.

0 commit comments

Comments
 (0)