Skip to content

Commit 4499b7b

Browse files
committed
Addressed review comments
1 parent 379bbba commit 4499b7b

File tree

12 files changed

+77
-688
lines changed

12 files changed

+77
-688
lines changed

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

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,8 +25,7 @@ Follow the steps below to add this action to any widget.
2525
---
2626

2727
## URL schemes
28-
29-
The following are some common URL schemes that can be handled by an external app present on the user's device.
28+
A URL scheme is a way to define how different types of links, such as webpages, phone numbers, SMS messages, and emails, should be handled by an app or browser. The following are some common URL schemes that can be handled by an external app present on the user's device.
3029

3130
### Open a webpage
3231

docs/ff-concepts/navigation-routing/nav-overview.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ sidebar_position: 0
1010

1111
Navigation in FlutterFlow is a crucial aspect of app development, enabling users to move between different pages or screens. This is achieved through a system of routing, where each page is assigned a unique route identifier. Understanding how navigation works and what happens to the navigation stack under the hood can help you create a seamless user experience.
1212

13-
## What are Routes?
13+
## What is Routing?
1414

1515
**Routing** refers to the mechanism of defining paths or routes for different screens in an app. Each screen is associated with a unique route name, making it easier to navigate to that screen on events like button clicks. In FlutterFlow, routes are automatically assigned to pages when they are created.
1616

Lines changed: 8 additions & 117 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,14 @@
11
---
2-
sidebar_position: 3
2+
slug: page-navigation
3+
title: Page Navigation
4+
tags: []
5+
description: Learn how to navigate between pages in FlutterFlow.
6+
sidebar_position: 1
37
---
48

5-
# Navigation between Pages
9+
# Page Navigation
610

7-
Navigation in FlutterFlow involves moving between different pages. This is
8-
handled through routing, where each page is identified by a unique route.
11+
Page Navigation in FlutterFlow is handled through routing, where each page is identified by a unique route.
912
Navigation can be programmed to happen on events like button clicks, leading to
1013
actions such as pushing a new route (opening a new page) or popping a route (returning to a previous
1114
page). FlutterFlow simplifies the routing process, allowing you to visually design the navigation
@@ -59,7 +62,7 @@ set **Disable Android Back Button** property on the destination page.
5962
:::
6063

6164
<figure>
62-
![Nav.png](..%2Fimgs%2FNav.png)
65+
![Nav.png](imgs/Nav.png)
6366
<figcaption class="centered-caption">Properties of a Navigate To Action</figcaption>
6467
</figure>
6568

@@ -95,115 +98,3 @@ previous section:
9598
allow="clipboard-write">
9699
</iframe>
97100
</div>
98-
99-
### Page Parameters
100-
101-
**Parameters** in FlutterFlow are used to pass data between pages. When navigating
102-
from one page to another, you can send parameters to configure the destination
103-
page based on the data from the current page. This is useful for tasks like
104-
passing a user ID to a profile page or specific details to a detailed view page.
105-
106-
To create a page parameter, follow the steps:
107-
108-
<div style={{
109-
position: 'relative',
110-
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
111-
height: 0,
112-
width: '100%'
113-
}}>
114-
<iframe
115-
src="https://demo.arcade.software/oZV2X0pKNYO61p1jhY22?embed&show_copy_link=true"
116-
title="Create Page Parameters"
117-
style={{
118-
position: 'absolute',
119-
top: 0,
120-
left: 0,
121-
width: '100%',
122-
height: '100%',
123-
colorScheme: 'light'
124-
}}
125-
frameborder="0"
126-
loading="lazy"
127-
webkitAllowFullScreen
128-
mozAllowFullScreen
129-
allowFullScreen
130-
allow="clipboard-write">
131-
</iframe>
132-
</div>
133-
134-
When a page parameter is set to Required, it indicates that this parameter is
135-
mandatory when navigating to this page. Users must provide this value;
136-
otherwise, FlutterFlow will throw errors. However, if you are creating an
137-
optional parameter, please ensure this option is unchecked.
138-
139-
Additionally, you can specify a default value in the Default Parameter Value
140-
field to safeguard against incoming values that are empty or null. This step is
141-
optional.
142-
143-
![Page-Params.png](..%2Fimgs%2FPage-Params.png)
144-
145-
If you have created a **Required** Page Parameter and there is a Navigation Action
146-
already set on your previous page, FlutterFlow will throw errors because this
147-
required parameter has not yet been sent from the previous page. Let's fix that:
148-
149-
150-
<div style={{
151-
position: 'relative',
152-
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
153-
height: 0,
154-
width: '100%'
155-
}}>
156-
<iframe
157-
src="https://demo.arcade.software/kp34JJipEW24hz0u5RsW?embed&show_copy_link=true"
158-
title="Send Page Parameters"
159-
style={{
160-
position: 'absolute',
161-
top: 0,
162-
left: 0,
163-
width: '100%',
164-
height: '100%',
165-
colorScheme: 'light'
166-
}}
167-
frameborder="0"
168-
loading="lazy"
169-
webkitAllowFullScreen
170-
mozAllowFullScreen
171-
allowFullScreen
172-
allow="clipboard-write">
173-
</iframe>
174-
</div>
175-
176-
<figure>
177-
178-
<figcaption class="centered-caption"></figcaption>
179-
</figure>
180-
181-
182-
183-
:::info[When to use Page Parameters?]
184-
Page parameters are used to pass essential data between pages that is not
185-
persisted in the app’s global state but is necessary for specific
186-
functionalities or displays on the subsequent page. Here’s a
187-
breakdown of typical uses:
188-
189-
- **Contextual Data:** Information that defines the context of the new page, such
190-
as
191-
identifiers for items or entities that the page must display. This could include
192-
identifiers for transactions, specific products, or user profiles that were
193-
selected on the previous page.
194-
195-
- **Configuration Options:** Settings or options chosen by the user that affect
196-
how
197-
the next page functions or appears. For example, filter or sort preferences
198-
selected on a list page that need to be applied on a subsequent results page.
199-
200-
- **Operational Parameters:** Values needed for calculations or logic on the next
201-
page
202-
that are generated through user activities on the current page. These could be
203-
values like quantities, dates, or configuration details necessary to perform
204-
operations or initiate processes on the next page.
205-
206-
Page parameters are thus essential for maintaining a seamless user experience,
207-
enabling the new page to function as intended based on the specific needs and
208-
inputs from a previous interaction.
209-
:::

0 commit comments

Comments
 (0)