Skip to content

Commit a52a2fb

Browse files
pinkeshmarspinkeshmars
committed
Added bottom sheet
1 parent e2cf3cb commit a52a2fb

File tree

5 files changed

+162
-4
lines changed

5 files changed

+162
-4
lines changed

‎docs/ff-concepts/navigation-routing/bottom-sheet.md

Lines changed: 158 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,158 @@
1+
---
2+
title: Bottom Sheet
3+
slug: /concepts/navigation/bottom-sheet
4+
sidebar_position: 7
5+
tags: [Navigation, Actions]
6+
keywords: [FlutterFlow, Bottom Sheet, Navigation]
7+
---
8+
# Bottom Sheet
9+
A Bottom Sheet is an alternative to a menu or a dialog. It opens from bottom to top and can be dismissed by swiping it from top to bottom. When it opens, it prevents the user from interacting with the rest of the app.
10+
11+
You can use the bottom sheet when you want to perform a small action without creating a separate screen.
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/4GbJ3ujPrnvX6MwYiGdY?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 Bottom Sheet action
40+
41+
Below are the types of Bottom Sheet actions:
42+
43+
1. **Show**: This opens the bottom sheet.
44+
2. **Dismiss**: This closes the bottom sheet.
45+
46+
## Opening Bottom Sheet
47+
48+
Follow the steps below to add an action that opens the bottom sheet:
49+
50+
1. Create a bottom sheet [component](../../resources/ui/components/overview.md). Tip: you can also create one from the 'BottomSheet' templates.
51+
52+
<div style={{
53+
position: 'relative',
54+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
55+
height: 0,
56+
width: '100%'}}>
57+
<iframe
58+
src="https://demo.arcade.software/OfBRZFRhgkbMjHmXfEyo?embed&show_copy_link=true"
59+
title=""
60+
style={{
61+
position: 'absolute',
62+
top: 0,
63+
left: 0,
64+
width: '100%',
65+
height: '100%',
66+
colorScheme: 'light'
67+
}}
68+
frameborder="0"
69+
loading="lazy"
70+
webkitAllowFullScreen
71+
mozAllowFullScreen
72+
allowFullScreen
73+
allow="clipboard-write">
74+
</iframe>
75+
</div>
76+
<p></p>
77+
78+
2. Select the **Widget** (e.g., Button) from where you want to open the bottom sheet.
79+
3. Select **Actions** from the Properties panel (the right menu), and click **+ Add Action**.
80+
4. Search and select the **Bottom Sheet** (under *Widget/UI Interactions*) action.
81+
5. To open the bottom sheet, select **Show**.
82+
6. **Select Component** as the component you created for the bottom sheet.
83+
7. (Optional) set the **Height** value. You should set the height if you want the bottom sheet to appear only up to some portion of the screen.
84+
8. You can set the **Background** and **Barrier Color** for the bottom sheet.
85+
86+
![Set Background and Barrier color](imgs/bottom-sheet-background-color.png)
87+
88+
9. You can also [pass parameters](../../resources/ui/components/custom-components/using-components.md#pass-down-values) to a bottom sheet component.
89+
10. By default, this type of action blocks the following action (if any) from triggering while this action is in progress. (i.e., meaning the bottom sheet 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 bottom sheet. To do so, enable **Non Blocking** option.
90+
11. By default, **Non Dismissble** option closes the bottom sheet when you click outside of it. To disable this behavior, enable this option.
91+
12. With **Enable Drag** option, you can open and close the bottom sheet using a swipe gesture.
92+
13. Optional: If you are returning any value from the bottom sheet, provide the **Action Output Variable Name**. The result will be stored in this variable.
93+
94+
<div style={{
95+
position: 'relative',
96+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
97+
height: 0,
98+
width: '100%'}}>
99+
<iframe
100+
src="https://www.loom.com/embed/def8de637f1a43f1bd5f443d59ba5c29?sid=ab58e43b-e6d0-49e9-a536-e349885b6e63"
101+
title=""
102+
style={{
103+
position: 'absolute',
104+
top: 0,
105+
left: 0,
106+
width: '100%',
107+
height: '100%',
108+
colorScheme: 'light'
109+
}}
110+
frameborder="0"
111+
loading="lazy"
112+
webkitAllowFullScreen
113+
mozAllowFullScreen
114+
allowFullScreen
115+
allow="clipboard-write">
116+
</iframe>
117+
</div>
118+
<p></p>
119+
120+
## Closing Bottom Sheet
121+
122+
Follow the steps below to add an action that closes the bottom sheet:
123+
124+
1. Select the **Widget** (e.g., Button, ListTile, Container) on which you want to add the action.
125+
2. Select **Actions** from the Properties panel (the right menu), and click **+ Add Action**.
126+
3. Search and select the **Bottom Sheet** (under *Widget/UI Interactions*) action.
127+
4. To close the bottom sheet, select **Dismiss**.
128+
5. If you want to return a value from the current bottom sheet, enable the **Has Value** toggle and pass the value by setting its *Data Type* and *Value Source*.
129+
1. If you enable the *Has Value* option, you must come back to the action that opens this bottom sheet and provide the **Action Output Variable Name**. This will be used to retrieve the value from the bottom sheet.
130+
2. Now you can use the *Action Output Variable Name* to get the data.
131+
132+
Here is an example of returning the selected user name back to the page.
133+
134+
<div style={{
135+
position: 'relative',
136+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
137+
height: 0,
138+
width: '100%'}}>
139+
<iframe
140+
src="https://demo.arcade.software/KDaNgnasSA3pZ9fxjBF5?embed&show_copy_link=true"
141+
title=""
142+
style={{
143+
position: 'absolute',
144+
top: 0,
145+
left: 0,
146+
width: '100%',
147+
height: '100%',
148+
colorScheme: 'light'
149+
}}
150+
frameborder="0"
151+
loading="lazy"
152+
webkitAllowFullScreen
153+
mozAllowFullScreen
154+
allowFullScreen
155+
allow="clipboard-write">
156+
</iframe>
157+
</div>
158+
<p></p>

‎docs/ff-concepts/navigation-routing/imgs/bottom-sheet-background-color.png

123 KB
Loading

‎docs/ff-concepts/navigation-routing/launch-url-action.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ slug: /concepts/navigation/launch-url
33
title: Launch URL [Action]
44
description: Learn how to use the Launch URL Action in FlutterFlow to open URLs with supporting apps.
55
tags: [Launch URL, Action, Concepts]
6-
sidebar_position: 7
6+
sidebar_position: 9
77
keywords: [FlutterFlow, Launch URL, Action, Concepts]
88
---
99

‎docs/ff-concepts/navigation-routing/share-action.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ slug: /concepts/navigation/share-action
33
title: Share [Action]
44
description: Learn how to use the Share Action in your FlutterFlow app to share content.
55
tags: [Share Action, Navigation, Concepts]
6-
sidebar_position: 6
6+
sidebar_position: 8
77
keywords: [FlutterFlow, Share Action, Navigation, Concepts]
88
---
99

‎firebase.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -740,7 +740,7 @@
740740
},
741741
{
742742
"source": "/widgets-and-components/custom-components/bottom-sheet",
743-
"destination": "/",
743+
"destination": "/concepts/navigation/bottom-sheet",
744744
"type": 301
745745
},
746746
{
@@ -970,7 +970,7 @@
970970
},
971971
{
972972
"source": "/actions/actions/widget-ui-interactions/bottom-sheet",
973-
"destination": "/",
973+
"destination": "/concepts/navigation/bottom-sheet",
974974
"type": 301
975975
},
976976
{

0 commit comments

Comments
 (0)