Skip to content

Commit 86006a4

Browse files
pinkeshmarspinkeshmars
committed
Added alert dialog
1 parent 1e5b147 commit 86006a4

File tree

5 files changed

+204
-1
lines changed

5 files changed

+204
-1
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: 1
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](../../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](../../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/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.

‎firebase.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1085,7 +1085,7 @@
10851085
},
10861086
{
10871087
"source": "/actions/actions/alerts-notifications/alert-dialog",
1088-
"destination": "/",
1088+
"destination": "/concepts/alerts-notification/alert-dialog",
10891089
"type": 301
10901090
},
10911091
{

0 commit comments

Comments
 (0)