Skip to content

Commit 1391282

Browse files
pinkeshmarspinkeshmars
committed
Added walkthroughs
1 parent 9343f98 commit 1391282

File tree

3 files changed

+300
-3
lines changed

3 files changed

+300
-3
lines changed

‎docs/resources/projects/imgs/misaligned-focus-example.png

431 KB
Loading

‎docs/resources/projects/imgs/wt-steps.png

536 KB
Loading

‎docs/resources/projects/settings/project-setup.md

Lines changed: 300 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
---
22
slug: project-setup
33
title: Project Setup
4-
tags: [permissions, multiple languages, multi-platform]
5-
keywords: [permission message, enabling platforms, support multiple languages, adding custom permissions]
4+
tags: [permissions, multiple languages, multi-platform, walkthrough]
5+
keywords: [permission message, enabling platforms, support multiple languages, adding custom permissions, walkthrough]
66
description: Learn how to setup your project in FlutterFlow.
77
sidebar_position: 0
88
---
@@ -235,4 +235,301 @@ By default, the generated project can run on Android, iOS, and the Web without a
235235
---
236236

237237
## Multiple Languages
238-
To support multiple languages in your app, refer [here](../../../ff-concepts/localization-accessibility/add-multiple-languages.md).
238+
To support multiple languages in your app, refer [here](../../../ff-concepts/localization-accessibility/add-multiple-languages.md).
239+
240+
---
241+
242+
## Walkthroughs
243+
244+
A walkthrough in app development is a guided tour of the app's features and functionality, typically presented to the user when they first launch the app. It is designed to help new users understand how to use the app and navigate its various sections.
245+
246+
For example, consider a news article app. When a new user opens the app for the first time, they might be greeted with a series of pop-ups that highlight key features such as watching article videos, subscribing to article updates, and filtering articles by tags.
247+
248+
<div style={{
249+
position: 'relative',
250+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
251+
height: 0,
252+
width: '100%'}}>
253+
<iframe
254+
src="https://www.loom.com/embed/cc0e2560855d4e988a6b881ca1b63377?sid=8f959be3-b08a-4043-a3df-bea460297b2a"
255+
title=""
256+
style={{
257+
position: 'absolute',
258+
top: 0,
259+
left: 0,
260+
width: '100%',
261+
height: '100%',
262+
colorScheme: 'light'
263+
}}
264+
frameborder="0"
265+
loading="lazy"
266+
webkitAllowFullScreen
267+
mozAllowFullScreen
268+
allowFullScreen
269+
allow="clipboard-write">
270+
</iframe>
271+
</div>
272+
<p></p>
273+
274+
The steps to create and display a walkthrough in your app are as follows:
275+
276+
1. [Create walkthrough](#1-create-walkthrough)
277+
2. [Start walkthrough](#2-start-walkthrough)
278+
3. [Get notified on walkthrough skipped and completed](#3-get-notified-on-walkthrough-skipped-and-completed)
279+
280+
### 1. Create walkthrough
281+
282+
To create a walkthrough:
283+
284+
1. Navigate to **Settings and Integrations** > **General** > **Walkthroughs >** click **Create New**.
285+
2. Start with providing the **Name**, **Description** and then select the **Page** on which you want to show the walkthrough. The name you enter will be used to initiate the walkthrough later.
286+
3. Now, we must add the steps for our walkthrough. Each step that we add here acts as a separate screen or popup that nicely animates to highlight the UI element. To add steps:
287+
1. Click on the **+ Add Step**.
288+
2. Choose the widget to highlight by clicking **Widget Unset**. In the right-side preview, select the desired widget and click **Confirm**.
289+
3. When the widget is in focus, you may want to present information about it; this could be a simple text or a custom component (e.g., a text with an arrow). You have complete control over what you want to display via a [component](../../../resources/ui/components/overview.md). Click the diamond icon to create a new component and then set it to **Content**.
290+
4. You can also choose where the Content will be displayed by setting the **Content Alignment**.
291+
5. Choose a **Focus Shape** for the widget—either **Circle** or **Rectangle**.
292+
6. Pick an **Overlay Color** that you want to display when the widget is highlighted.
293+
7. By default, we also add a skip button on the screen, and you can align it using the **Skip Alignment** option.
294+
8. Add additional steps by repeating the process for all UI elements you wish to feature.
295+
296+
![Walkthrough Step](../imgs/wt-steps.png)
297+
298+
4. To preview the walkthrough, click the **Start Preview** button and use the arrows to navigate through the steps.
299+
5. To rearrange the steps, enable the **Reorder** option and then use the arrows to adjust their sequence.
300+
6. Click the **Add Walkthrough** to save.
301+
302+
<div style={{
303+
position: 'relative',
304+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
305+
height: 0,
306+
width: '100%'}}>
307+
<iframe
308+
src="https://www.loom.com/embed/1ea4a7c79626421095a0b1363356efe8?sid=5e8fa4e8-18c3-4191-9304-8b131028df29"
309+
title=""
310+
style={{
311+
position: 'absolute',
312+
top: 0,
313+
left: 0,
314+
width: '100%',
315+
height: '100%',
316+
colorScheme: 'light'
317+
}}
318+
frameborder="0"
319+
loading="lazy"
320+
webkitAllowFullScreen
321+
mozAllowFullScreen
322+
allowFullScreen
323+
allow="clipboard-write">
324+
</iframe>
325+
</div>
326+
<p></p>
327+
328+
### 2. Start Walkthrough [Action]
329+
330+
After creating a walkthrough, you can display it on a page using the Start Walkthrough action. Follow the steps below to add this action on a page load.
331+
332+
1. Walkthroughs are generally presented immediately upon page load. Therefore, open the page where you would like the walkthrough to be showcased.
333+
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.
334+
3. Ensure the **On Page Load** is selected and click on the **+ Add Action**.
335+
4. On the right side, search and select the **Walkthrough > Start Walkthrough** (under *Widget/UI Interactions*) action.
336+
5. Click to **Select Walkthrough** that you have created.
337+
338+
<div style={{
339+
position: 'relative',
340+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
341+
height: 0,
342+
width: '100%'}}>
343+
<iframe
344+
src="https://www.loom.com/embed/13ff22ea7a624d54b3874256fac88b9c?sid=91ed6db7-8e16-4464-a133-b532846eaa36"
345+
title=""
346+
style={{
347+
position: 'absolute',
348+
top: 0,
349+
left: 0,
350+
width: '100%',
351+
height: '100%',
352+
colorScheme: 'light'
353+
}}
354+
frameborder="0"
355+
loading="lazy"
356+
webkitAllowFullScreen
357+
mozAllowFullScreen
358+
allowFullScreen
359+
allow="clipboard-write">
360+
</iframe>
361+
</div>
362+
<p></p>
363+
364+
### 3. Get notified on walkthrough skipped and completed
365+
366+
Sometimes, you might want to get a callback to know whether the walkthrough is skipped or completed. For example, you could set up a callback to gather analytics or trigger a specific action once the walkthrough is finished, such as directing the user to a new page or enabling certain features of the app.
367+
368+
When a walkthrough is added on a page, you'll see the following types of actions (aka callbacks), and you can choose any of them to add actions under it.
369+
370+
1. **On Walkthrough Complete**: Actions added under this will be triggered whenever the user finishes all the steps of the walkthrough.
371+
2. **On Walkthrough Skip**: Actions added under this will be triggered whenever the user chooses to skip the walkthrough.
372+
373+
<Tabs>
374+
<TabItem value="1" label="On Walkthrough Complete" default>
375+
<div style={{
376+
position: 'relative',
377+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
378+
height: 0,
379+
width: '100%'}}>
380+
<iframe
381+
src="https://www.loom.com/embed/fceb1c6ed1c842c6ab1a697719cfed60?sid=b41d279d-ea29-4536-b36a-0104e3f8fe0c"
382+
title=""
383+
style={{
384+
position: 'absolute',
385+
top: 0,
386+
left: 0,
387+
width: '100%',
388+
height: '100%',
389+
colorScheme: 'light'
390+
}}
391+
frameborder="0"
392+
loading="lazy"
393+
webkitAllowFullScreen
394+
mozAllowFullScreen
395+
allowFullScreen
396+
allow="clipboard-write">
397+
</iframe>
398+
</div>
399+
<p></p>
400+
</TabItem>
401+
<TabItem value="2" label="On Walkthrough Skip">
402+
<div style={{
403+
position: 'relative',
404+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
405+
height: 0,
406+
width: '100%'}}>
407+
<iframe
408+
src="https://www.loom.com/embed/adce2ee91ed2406db4ff3e010eb39a85?sid=9235994c-3da9-4b7b-b0ed-ace0afecf010"
409+
title=""
410+
style={{
411+
position: 'absolute',
412+
top: 0,
413+
left: 0,
414+
width: '100%',
415+
height: '100%',
416+
colorScheme: 'light'
417+
}}
418+
frameborder="0"
419+
loading="lazy"
420+
webkitAllowFullScreen
421+
mozAllowFullScreen
422+
allowFullScreen
423+
allow="clipboard-write">
424+
</iframe>
425+
</div>
426+
<p></p>
427+
</TabItem>
428+
</Tabs>
429+
430+
Here's how you do it:
431+
432+
1. Open the page, select **Actions** from the Properties panel (the right menu), and click **Open**. This will open an **Action Flow Editor** in a new popup window.
433+
2. Select **On** **Walkthrough Complete** or **On Walkthrough Skip** and add actions under it.
434+
435+
<div style={{
436+
position: 'relative',
437+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
438+
height: 0,
439+
width: '100%'}}>
440+
<iframe
441+
src="https://www.loom.com/embed/53546557a01d4e65864f997467cea6ad?sid=f8f999ae-97cc-4a96-9b8a-7736a6561907"
442+
title=""
443+
style={{
444+
position: 'absolute',
445+
top: 0,
446+
left: 0,
447+
width: '100%',
448+
height: '100%',
449+
colorScheme: 'light'
450+
}}
451+
frameborder="0"
452+
loading="lazy"
453+
webkitAllowFullScreen
454+
mozAllowFullScreen
455+
allowFullScreen
456+
allow="clipboard-write">
457+
</iframe>
458+
</div>
459+
<p></p>
460+
461+
### Video guide
462+
463+
If you prefer watching a video tutorial, here's the one for you:
464+
465+
<div style={{
466+
position: 'relative',
467+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
468+
height: 0,
469+
width: '100%'}}>
470+
<iframe
471+
src="https://www.youtube.com/embed/FFpR1SDrZEQ"
472+
title=""
473+
style={{
474+
position: 'absolute',
475+
top: 0,
476+
left: 0,
477+
width: '100%',
478+
height: '100%',
479+
colorScheme: 'light'
480+
}}
481+
frameborder="0"
482+
loading="lazy"
483+
webkitAllowFullScreen
484+
mozAllowFullScreen
485+
allowFullScreen
486+
allow="clipboard-write">
487+
</iframe>
488+
</div>
489+
<p></p>
490+
491+
### FAQs
492+
493+
<details>
494+
<summary>How do I fix when walkthrough misaligns on a widget, not focusing on the component?</summary>
495+
<p>
496+
This issue typically arises when a widget's animation and the walkthrough start simultaneously. As the walkthrough initiates, it captures the widget's initial position before the animation completes. Consequently, after the animation concludes, the widget may have shifted to a different location, leading to misalignment.
497+
498+
![Misaligned focus example](../imgs/misaligned-focus-example.png)
499+
500+
To resolve this, simply add a delay ([Wait](../../../resources/control-flow/time-based-logic/wait-action.md) action) before initiating the walkthrough. **Remember,** the wait duration must be equal to or greater than the duration of the animation.
501+
502+
<div style={{
503+
position: 'relative',
504+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
505+
height: 0,
506+
width: '100%'}}>
507+
<iframe
508+
src="https://www.loom.com/embed/890eb9c517e84302afd0d8934c3f29fa?sid=85faf200-c076-4dee-b75b-604582f1b43c"
509+
title=""
510+
style={{
511+
position: 'absolute',
512+
top: 0,
513+
left: 0,
514+
width: '100%',
515+
height: '100%',
516+
colorScheme: 'light'
517+
}}
518+
frameborder="0"
519+
loading="lazy"
520+
webkitAllowFullScreen
521+
mozAllowFullScreen
522+
allowFullScreen
523+
allow="clipboard-write">
524+
</iframe>
525+
</div>
526+
<p></p>
527+
</p>
528+
</details>
529+
530+
<details>
531+
<summary>My widget is not highlighting on a scrollable page. What should I do?</summary>
532+
<p>
533+
We are aware of a limitation where widgets that are not visible on a page (i.e., you need to scroll down to see them) may not be highlighted. We are actively working to resolve this issue. As a temporary workaround, you can try placing the widget in an area that is visible without scrolling. We appreciate your patience and hope to have a fix soon!
534+
</p>
535+
</details>

0 commit comments

Comments
 (0)