|
1 | 1 | ---
|
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 |
3 | 7 | ---
|
4 | 8 |
|
5 |
| -# Navigation between Pages |
| 9 | +# Page Navigation |
6 | 10 |
|
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. |
9 | 12 | Navigation can be programmed to happen on events like button clicks, leading to
|
10 | 13 | actions such as pushing a new route (opening a new page) or popping a route (returning to a previous
|
11 | 14 | 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.
|
59 | 62 | :::
|
60 | 63 |
|
61 | 64 | <figure>
|
62 |
| -  |
| 65 | +  |
63 | 66 | <figcaption class="centered-caption">Properties of a Navigate To Action</figcaption>
|
64 | 67 | </figure>
|
65 | 68 |
|
@@ -95,115 +98,3 @@ previous section:
|
95 | 98 | allow="clipboard-write">
|
96 | 99 | </iframe>
|
97 | 100 | </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 |
| - |
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