File tree Expand file tree Collapse file tree
Expand file tree Collapse file tree Original file line number Diff line number Diff line change @@ -20604,7 +20604,7 @@ This guide shows the typical interaction for updating a user's profile picture i
2060420604
2060520605Here's the experience we'll work toward:
2060620606
20607- <div style="position: relative; height: 640px; width: 280px"><iframe src="https://demo.arcade.software/YDZArv16EF5lLUvVjTeb?embed" title="Arcade Flow (Wed Jan 03 2024)" frameborder="0" loading="lazy" webkitallowfullscreen mozallowfullscreen allowfullscreen style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;color-scheme: light;"></iframe>
20607+ <div style="position: relative; height: 640px; width: 280px"><iframe src="https://demo.arcade.software/YDZArv16EF5lLUvVjTeb?embed" title="Arcade Flow (Wed Jan 03 2024)" frameborder="0" loading="lazy" webkitallowfullscreen mozallowfullscreen allowfullscreen style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;color-scheme: light;"></iframe></div>
2060820608
2060920609## 1. Display user image with an icon
2061020610
@@ -20680,7 +20680,7 @@ The Stack widget renders each child on top of the previous one. By setting `styl
2068020680
2068120681When user taps the profile image, we want to display a bottom sheet with two buttons:
2068220682
20683- <div style="position: relative; height: 500px; width: 280px"><iframe src="https://demo.arcade.software/klblt8altkrLUAxoGEhi?embed" title="studio.ensembleui.com/preview/index.html?appId=nWsD5baeykm3W772kkSw&screenId=P2v4AOS8w3DXfUauqi0Q&showAction=false&devicePreview=true&instantPreview=true" frameborder="0" loading="lazy" webkitallowfullscreen mozallowfullscreen allowfullscreen style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;color-scheme: light;"></iframe>
20683+ <div style="position: relative; height: 500px; width: 280px"><iframe src="https://demo.arcade.software/klblt8altkrLUAxoGEhi?embed" title="studio.ensembleui.com/preview/index.html?appId=nWsD5baeykm3W772kkSw&screenId=P2v4AOS8w3DXfUauqi0Q&showAction=false&devicePreview=true&instantPreview=true" frameborder="0" loading="lazy" webkitallowfullscreen mozallowfullscreen allowfullscreen style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;color-scheme: light;"></iframe></div>
2068420684
2068520685To achieve the above, first wrap the Stack widget inside a Column widget so we can add an onTop to the Column. onTap, we use `showBottomModal` action to open a bottom sheet:
2068620686
Original file line number Diff line number Diff line change @@ -20604,7 +20604,7 @@ This guide shows the typical interaction for updating a user's profile picture i
2060420604
2060520605Here's the experience we'll work toward:
2060620606
20607- <div style="position: relative; height: 640px; width: 280px"><iframe src="https://demo.arcade.software/YDZArv16EF5lLUvVjTeb?embed" title="Arcade Flow (Wed Jan 03 2024)" frameborder="0" loading="lazy" webkitallowfullscreen mozallowfullscreen allowfullscreen style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;color-scheme: light;"></iframe>
20607+ <div style="position: relative; height: 640px; width: 280px"><iframe src="https://demo.arcade.software/YDZArv16EF5lLUvVjTeb?embed" title="Arcade Flow (Wed Jan 03 2024)" frameborder="0" loading="lazy" webkitallowfullscreen mozallowfullscreen allowfullscreen style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;color-scheme: light;"></iframe></div>
2060820608
2060920609## 1. Display user image with an icon
2061020610
@@ -20680,7 +20680,7 @@ The Stack widget renders each child on top of the previous one. By setting `styl
2068020680
2068120681When user taps the profile image, we want to display a bottom sheet with two buttons:
2068220682
20683- <div style="position: relative; height: 500px; width: 280px"><iframe src="https://demo.arcade.software/klblt8altkrLUAxoGEhi?embed" title="studio.ensembleui.com/preview/index.html?appId=nWsD5baeykm3W772kkSw&screenId=P2v4AOS8w3DXfUauqi0Q&showAction=false&devicePreview=true&instantPreview=true" frameborder="0" loading="lazy" webkitallowfullscreen mozallowfullscreen allowfullscreen style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;color-scheme: light;"></iframe>
20683+ <div style="position: relative; height: 500px; width: 280px"><iframe src="https://demo.arcade.software/klblt8altkrLUAxoGEhi?embed" title="studio.ensembleui.com/preview/index.html?appId=nWsD5baeykm3W772kkSw&screenId=P2v4AOS8w3DXfUauqi0Q&showAction=false&devicePreview=true&instantPreview=true" frameborder="0" loading="lazy" webkitallowfullscreen mozallowfullscreen allowfullscreen style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;color-scheme: light;"></iframe></div>
2068420684
2068520685To achieve the above, first wrap the Stack widget inside a Column widget so we can add an onTop to the Column. onTap, we use `showBottomModal` action to open a bottom sheet:
2068620686
You can’t perform that action at this time.
0 commit comments