Skip to content

Commit d667563

Browse files
PoojaB26PoojaB26
committed
Add conditional logic section
1 parent 00b7c72 commit d667563

File tree

2 files changed

+133
-2
lines changed

2 files changed

+133
-2
lines changed

‎docs/resources/control-flow/functions/control-flow-actions/conditional-logic.md

Lines changed: 133 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,140 @@
22
title: Conditional Logic
33
---
44

5+
Conditional logic is a fundamental concept in programming and software development. It involves making decisions in code based on certain conditions. This is achieved using conditional statements, which evaluate expressions to determine whether they are true or false. Depending on the result, different actions or outcomes are executed.
56

7+
#### How Conditional Logic Works
8+
- **Condition:** An expression that evaluates to either true or false.
9+
- **True Path:** The set of actions to execute if the condition is true.
10+
- **False Path:** The set of actions to execute if the condition is false.
611

12+
![true-false.png](..%2Fimg%2Ftrue-false.png)
713

8-
Creating a conditional action in FF & example
14+
## Conditional Flows
15+
Conditional flows enhance basic true-false logic by handling multiple conditions and executing specific actions based on those conditions. This is achieved through more complex flows, such as single conditions, multiple conditions (using AND/OR), and conditional values with If/Then/Else logic.
916

10-
How to use conditional when setting properties (utility function)
17+
### Single Condition
18+
This flow allows you to define a condition based on the comparison of two values, which can be set manually or derived from variables. The condition will return True or False.
19+
20+
**Comparison Options:**
21+
22+
- Equal To
23+
- Not Equal To
24+
- Less Than
25+
- Greater Than
26+
- Less Than Or Equal To
27+
- Greater Than Or Equal To
28+
- Is Set
29+
- Is Not Set
30+
31+
Arcade
32+
33+
### Multiple Conditions (AND/OR)
34+
This flow lets you combine multiple single conditions using logical AND or OR operators. It is useful for more complex decision-making processes.
35+
36+
Arcade
37+
38+
### Conditional Value (If/Then/Else)
39+
Conditional Value allows you to set a dynamic variable based on different conditions. For each condition, you can specify a value that will be assigned if the condition is true. A default value can be provided if none of the conditions are met.
40+
41+
Arcade
42+
43+
## Setting Widget Properties with Conditional Logic
44+
45+
FlutterFlow allows you to dynamically set the properties of widgets based on conditional logic. Depending on the expected data type of the property, you can use a combination of conditional flows to achieve your desired logic.
46+
47+
Here's an example where we use Conditional Logic to determine the value of a Text widget:
48+
49+
<div style={{
50+
position: 'relative',
51+
paddingBottom: 'calc(56.67989417989418% + 41px)',
52+
height: 0,
53+
width: '100%'
54+
}}>
55+
<iframe
56+
src="https://demo.arcade.software/zTJw7GmAolmmE1S6vTvv?embed&show_copy_link=true"
57+
title=""
58+
style={{
59+
position: 'absolute',
60+
top: 0,
61+
left: 0,
62+
width: '100%',
63+
height: '100%',
64+
colorScheme: 'light'
65+
}}
66+
frameborder="0"
67+
loading="lazy"
68+
webkitAllowFullScreen
69+
mozAllowFullScreen
70+
allowFullScreen
71+
allow="clipboard-write">
72+
</iframe>
73+
</div>
74+
75+
<figure>
76+
<figcaption class="centered-caption">If the `placePicker` widget state is set, then return the placePicker address string. Else, if the `defaultAddress` component parameter is set and not empty, then return that as a string. Otherwise, return a default address value.</figcaption>
77+
</figure>
78+
79+
80+
## Conditional Actions
81+
82+
When you need to execute actions based on specific conditions, you can do so in the Action Flow Editor. By combining simple single conditions or multiple conditions, you can create complex logical flows. These conditions can be configured as learned in the Setting Properties section, allowing your action flows to follow **True/False** logic or **If-Else, If-Else If-Else** structures.
83+
84+
Here's a quick demo to illustrate a simple Single Condition Action flow:
85+
86+
<div style={{
87+
position: 'relative',
88+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
89+
height: 0,
90+
width: '100%'
91+
}}>
92+
<iframe
93+
src="https://demo.arcade.software/SPvvln7RqEx25mL9eQ4t?embed&show_copy_link=true"
94+
title=""
95+
style={{
96+
position: 'absolute',
97+
top: 0,
98+
left: 0,
99+
width: '100%',
100+
height: '100%',
101+
colorScheme: 'light'
102+
}}
103+
frameborder="0"
104+
loading="lazy"
105+
webkitAllowFullScreen
106+
mozAllowFullScreen
107+
allowFullScreen
108+
allow="clipboard-write">
109+
</iframe>
110+
</div>
111+
112+
<p></p>
113+
114+
You can easily convert a single condition action flow into a multiple condition action flow by
115+
enabling the Multiple Conditions toggle. Here's how:
116+
117+
<div style={{
118+
position: 'relative',
119+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
120+
height: 0,
121+
width: '100%'
122+
}}>
123+
<iframe
124+
src="https://demo.arcade.software/sSiA90fRKnsZkTLOyPFg?embed&show_copy_link=true"
125+
title=""
126+
style={{
127+
position: 'absolute',
128+
top: 0,
129+
left: 0,
130+
width: '100%',
131+
height: '100%',
132+
colorScheme: 'light'
133+
}}
134+
frameborder="0"
135+
loading="lazy"
136+
webkitAllowFullScreen
137+
mozAllowFullScreen
138+
allowFullScreen
139+
allow="clipboard-write">
140+
</iframe>
141+
</div>

‎docs/resources/control-flow/functions/img/true-false.png

88.8 KB
Loading

0 commit comments

Comments
 (0)