diff --git a/docs/ff-concepts/navigation-routing/deep-dynamic-linking.md b/docs/ff-concepts/navigation-routing/deep-dynamic-linking.md index 2fbea9f0..d591e2ce 100644 --- a/docs/ff-concepts/navigation-routing/deep-dynamic-linking.md +++ b/docs/ff-concepts/navigation-routing/deep-dynamic-linking.md @@ -1,5 +1,6 @@ --- title: Deep & Dynamic Linking +sidebar_position: 4 --- # Deep & Dynamic Linking @@ -15,7 +16,7 @@ any website link would work. The figure below illustrates how it works:
- ![img.png](img.png) + ![img.png](imgs/img.png)
Deep and Dynamic link flow
@@ -38,12 +39,12 @@ links to work, you must have the app installed on your device. The deep link consists of three parts. It begins with the scheme followed by the host and page name, such as `designersapp://designersapp.com/profile`. -![img_1.png](img_1.png) +![img_1.png](imgs/img_1.png) If the page name is not provided (i.e. `designersapp://mydesignersapp.com/)`It will open the app's landing page. -![img_2.png](img_2.png) +![img_2.png](imgs/img_2.png) ### Adding Deep Link @@ -78,7 +79,7 @@ In this step, You will set the URL scheme. To do that: the back button from a deep link page, enable the **Pages Are Subroutes of Root Page** option. * *Tip**: we recommend enabling this option to increase user engagement with your app. -![img_3.png](img_3.png) +![img_3.png](imgs/img_3.png) #### 2. Setting page URL @@ -287,7 +288,7 @@ In this step, You will set the URL scheme. To do that: the back button from a deep link page, enable the **Pages Are Subroutes of Root Page** option. * *Tip**: we recommend enabling this option to increase user engagement with your app. -![img_4.png](img_4.png) +![img_4.png](imgs/img_4.png) #### 4. Setting page URL @@ -377,7 +378,7 @@ To pass custom data with the link, you need to have the following: 1. Make sure you have a parameter defined on a page you want to pass in a dynamic link.
- ![img_5.png](img_5.png) + ![img_5.png](imgs/img_5.png)
Adding parameter on page
@@ -386,7 +387,7 @@ To pass custom data with the link, you need to have the following:
- ![img_6.png](img_6.png) + ![img_6.png](imgs/img_6.png)
Including a parameter in the route
diff --git a/docs/ff-concepts/navigation-routing/generate-current-page-link.md b/docs/ff-concepts/navigation-routing/generate-current-page-link.md index 7dc66404..8ebbadf9 100644 --- a/docs/ff-concepts/navigation-routing/generate-current-page-link.md +++ b/docs/ff-concepts/navigation-routing/generate-current-page-link.md @@ -1,3 +1,8 @@ +--- +title: Generate Current Page Link +sidebar_position: 5 +--- + # Generate Current Page Link Using this action, you can generate the dynamic link for the current page. @@ -9,7 +14,7 @@ Using this action, you can generate the dynamic link for the current page. :::info[Prerequisites] -Before adding this action, ensure you have performed all the steps to[add the dynamic link](deep-dynamic-linking.md#adding-dynamic-link). +Before adding this action, ensure you have performed all the steps to [**add the dynamic link**](deep-dynamic-linking.md#adding-dynamic-link). ::: ## Defining Generate Current Page Link action diff --git a/docs/resources/ui-building-blocks/imgs/Nav.png b/docs/ff-concepts/navigation-routing/imgs/Nav.png similarity index 100% rename from docs/resources/ui-building-blocks/imgs/Nav.png rename to docs/ff-concepts/navigation-routing/imgs/Nav.png diff --git a/docs/resources/ui-building-blocks/imgs/Page-Params.png b/docs/ff-concepts/navigation-routing/imgs/Page-Params.png similarity index 100% rename from docs/resources/ui-building-blocks/imgs/Page-Params.png rename to docs/ff-concepts/navigation-routing/imgs/Page-Params.png diff --git a/docs/ff-concepts/navigation-routing/imgs/WebViewDemo.png b/docs/ff-concepts/navigation-routing/imgs/WebViewDemo.png new file mode 100644 index 00000000..71400495 Binary files /dev/null and b/docs/ff-concepts/navigation-routing/imgs/WebViewDemo.png differ diff --git a/docs/ff-concepts/navigation-routing/imgs/adding-parameter-details-page.gif b/docs/ff-concepts/navigation-routing/imgs/adding-parameter-details-page.gif new file mode 100644 index 00000000..0c96ee1f Binary files /dev/null and b/docs/ff-concepts/navigation-routing/imgs/adding-parameter-details-page.gif differ diff --git a/docs/ff-concepts/navigation-routing/imgs/build-first-page.png b/docs/ff-concepts/navigation-routing/imgs/build-first-page.png new file mode 100644 index 00000000..5ce188b0 Binary files /dev/null and b/docs/ff-concepts/navigation-routing/imgs/build-first-page.png differ diff --git a/docs/ff-concepts/navigation-routing/imgs/build-listview-details-page.png b/docs/ff-concepts/navigation-routing/imgs/build-listview-details-page.png new file mode 100644 index 00000000..079a4753 Binary files /dev/null and b/docs/ff-concepts/navigation-routing/imgs/build-listview-details-page.png differ diff --git a/docs/ff-concepts/navigation-routing/imgs/build-second-page.png b/docs/ff-concepts/navigation-routing/imgs/build-second-page.png new file mode 100644 index 00000000..9a77087c Binary files /dev/null and b/docs/ff-concepts/navigation-routing/imgs/build-second-page.png differ diff --git a/docs/ff-concepts/navigation-routing/imgs/ceate-email.gif b/docs/ff-concepts/navigation-routing/imgs/ceate-email.gif new file mode 100644 index 00000000..9633a59c Binary files /dev/null and b/docs/ff-concepts/navigation-routing/imgs/ceate-email.gif differ diff --git a/docs/ff-concepts/navigation-routing/imgs/doc-reference-todo-details.png b/docs/ff-concepts/navigation-routing/imgs/doc-reference-todo-details.png new file mode 100644 index 00000000..20f02a54 Binary files /dev/null and b/docs/ff-concepts/navigation-routing/imgs/doc-reference-todo-details.png differ diff --git a/docs/ff-concepts/navigation-routing/imgs/doc-referenence-todo-details.png b/docs/ff-concepts/navigation-routing/imgs/doc-referenence-todo-details.png new file mode 100644 index 00000000..5c6cd61d Binary files /dev/null and b/docs/ff-concepts/navigation-routing/imgs/doc-referenence-todo-details.png differ diff --git a/docs/ff-concepts/navigation-routing/imgs/firestore-data-manager.avif b/docs/ff-concepts/navigation-routing/imgs/firestore-data-manager.avif new file mode 100644 index 00000000..f12d090a Binary files /dev/null and b/docs/ff-concepts/navigation-routing/imgs/firestore-data-manager.avif differ diff --git a/docs/ff-concepts/navigation-routing/img.png b/docs/ff-concepts/navigation-routing/imgs/img.png similarity index 100% rename from docs/ff-concepts/navigation-routing/img.png rename to docs/ff-concepts/navigation-routing/imgs/img.png diff --git a/docs/ff-concepts/navigation-routing/img_1.png b/docs/ff-concepts/navigation-routing/imgs/img_1.png similarity index 100% rename from docs/ff-concepts/navigation-routing/img_1.png rename to docs/ff-concepts/navigation-routing/imgs/img_1.png diff --git a/docs/ff-concepts/navigation-routing/img_2.png b/docs/ff-concepts/navigation-routing/imgs/img_2.png similarity index 100% rename from docs/ff-concepts/navigation-routing/img_2.png rename to docs/ff-concepts/navigation-routing/imgs/img_2.png diff --git a/docs/ff-concepts/navigation-routing/img_3.png b/docs/ff-concepts/navigation-routing/imgs/img_3.png similarity index 100% rename from docs/ff-concepts/navigation-routing/img_3.png rename to docs/ff-concepts/navigation-routing/imgs/img_3.png diff --git a/docs/ff-concepts/navigation-routing/img_4.png b/docs/ff-concepts/navigation-routing/imgs/img_4.png similarity index 100% rename from docs/ff-concepts/navigation-routing/img_4.png rename to docs/ff-concepts/navigation-routing/imgs/img_4.png diff --git a/docs/ff-concepts/navigation-routing/img_5.png b/docs/ff-concepts/navigation-routing/imgs/img_5.png similarity index 100% rename from docs/ff-concepts/navigation-routing/img_5.png rename to docs/ff-concepts/navigation-routing/imgs/img_5.png diff --git a/docs/ff-concepts/navigation-routing/img_6.png b/docs/ff-concepts/navigation-routing/imgs/img_6.png similarity index 100% rename from docs/ff-concepts/navigation-routing/img_6.png rename to docs/ff-concepts/navigation-routing/imgs/img_6.png diff --git a/docs/ff-concepts/navigation-routing/imgs/launch-url.avif b/docs/ff-concepts/navigation-routing/imgs/launch-url.avif new file mode 100644 index 00000000..eb43a376 Binary files /dev/null and b/docs/ff-concepts/navigation-routing/imgs/launch-url.avif differ diff --git a/docs/ff-concepts/navigation-routing/imgs/pass-doc-reference.gif b/docs/ff-concepts/navigation-routing/imgs/pass-doc-reference.gif new file mode 100644 index 00000000..2f813562 Binary files /dev/null and b/docs/ff-concepts/navigation-routing/imgs/pass-doc-reference.gif differ diff --git a/docs/ff-concepts/navigation-routing/imgs/passing-data-2.avif b/docs/ff-concepts/navigation-routing/imgs/passing-data-2.avif new file mode 100644 index 00000000..4f6f2511 Binary files /dev/null and b/docs/ff-concepts/navigation-routing/imgs/passing-data-2.avif differ diff --git a/docs/ff-concepts/navigation-routing/imgs/passing-data-next-page.gif b/docs/ff-concepts/navigation-routing/imgs/passing-data-next-page.gif new file mode 100644 index 00000000..2f83a1d3 Binary files /dev/null and b/docs/ff-concepts/navigation-routing/imgs/passing-data-next-page.gif differ diff --git a/docs/ff-concepts/navigation-routing/imgs/passing-data.png b/docs/ff-concepts/navigation-routing/imgs/passing-data.png new file mode 100644 index 00000000..15087f8b Binary files /dev/null and b/docs/ff-concepts/navigation-routing/imgs/passing-data.png differ diff --git a/docs/ff-concepts/navigation-routing/imgs/passing-doc-reference.png b/docs/ff-concepts/navigation-routing/imgs/passing-doc-reference.png new file mode 100644 index 00000000..41093c5d Binary files /dev/null and b/docs/ff-concepts/navigation-routing/imgs/passing-doc-reference.png differ diff --git a/docs/ff-concepts/navigation-routing/imgs/passing-listview-item.gif b/docs/ff-concepts/navigation-routing/imgs/passing-listview-item.gif new file mode 100644 index 00000000..cab4ef49 Binary files /dev/null and b/docs/ff-concepts/navigation-routing/imgs/passing-listview-item.gif differ diff --git a/docs/ff-concepts/navigation-routing/imgs/phone.gif b/docs/ff-concepts/navigation-routing/imgs/phone.gif new file mode 100644 index 00000000..61803df6 Binary files /dev/null and b/docs/ff-concepts/navigation-routing/imgs/phone.gif differ diff --git a/docs/ff-concepts/navigation-routing/imgs/poproute.avif b/docs/ff-concepts/navigation-routing/imgs/poproute.avif new file mode 100644 index 00000000..da4733f2 Binary files /dev/null and b/docs/ff-concepts/navigation-routing/imgs/poproute.avif differ diff --git a/docs/ff-concepts/navigation-routing/imgs/pushroute.avif b/docs/ff-concepts/navigation-routing/imgs/pushroute.avif new file mode 100644 index 00000000..8825c7a8 Binary files /dev/null and b/docs/ff-concepts/navigation-routing/imgs/pushroute.avif differ diff --git a/docs/ff-concepts/navigation-routing/imgs/replaceroute.avif b/docs/ff-concepts/navigation-routing/imgs/replaceroute.avif new file mode 100644 index 00000000..51973157 Binary files /dev/null and b/docs/ff-concepts/navigation-routing/imgs/replaceroute.avif differ diff --git a/docs/ff-concepts/navigation-routing/imgs/text-message.gif b/docs/ff-concepts/navigation-routing/imgs/text-message.gif new file mode 100644 index 00000000..38b2a241 Binary files /dev/null and b/docs/ff-concepts/navigation-routing/imgs/text-message.gif differ diff --git a/docs/ff-concepts/navigation-routing/imgs/todo-details-copy.png b/docs/ff-concepts/navigation-routing/imgs/todo-details-copy.png new file mode 100644 index 00000000..e7aa1f7d Binary files /dev/null and b/docs/ff-concepts/navigation-routing/imgs/todo-details-copy.png differ diff --git a/docs/ff-concepts/navigation-routing/imgs/webpage.gif b/docs/ff-concepts/navigation-routing/imgs/webpage.gif new file mode 100644 index 00000000..fe5fd354 Binary files /dev/null and b/docs/ff-concepts/navigation-routing/imgs/webpage.gif differ diff --git a/docs/ff-concepts/navigation-routing/launch-url-action.md b/docs/ff-concepts/navigation-routing/launch-url-action.md new file mode 100644 index 00000000..7dbadd41 --- /dev/null +++ b/docs/ff-concepts/navigation-routing/launch-url-action.md @@ -0,0 +1,90 @@ +--- +slug: launch-url +title: Launch URL [Action] +tags: [] +description: Learn how to use the Launch URL Action in FlutterFlow to open URLs with supporting apps. +sidebar_position: 7 +--- + +The Launch URL Action lets you specify a URL that will be opened using an app supporting it. If there is more than one app that can handle the specified URL, the user will be presented with a dialog from where one of the apps can be selected. + +## Adding Launch URL Action + +Follow the steps below to add this action to any widget. + +1. Select the **Widget** (e.g., Container, Button, etc.) on which you want to add the action. +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. +3. Click on the **+ Add Action**. +4. On the right side, search and select the **Launch URL** (under widget/UI Interactions) action. +5. In the *URL Value Type* property, select either **Specify URL** (to add the URL as a String) or **From Variable** (to use the value stored in a String variable). +6. If using **Specify URL**, enter the URL that you want to use in the **URL** field. For example, you can enter "[https://flutter.dev](https://flutter.dev/)" to open the Flutter webpage. +7. If using **From Variable**, select the **Source** from which to fetch the URL value. You can also specify a **Default Value** that will be used when the variable value is not set (i.e. null). + +![launch-url.avif](imgs/launch-url.avif) + +--- + +## URL schemes +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. + +### Open a webpage + +This URL scheme for loading up a webpage can be defined in this format: + +#### Scheme + +`http:` + +`https:` + +#### Example + +`https://flutter.dev` + +![webpage.gif](imgs/webpage.gif) + +### Use a phone number + +This URL scheme helps to handle phone numbers inside your app. Using this, you can easily initiate a phone call to the provided phone number from the user's device. + +#### Scheme + +`tel:` + +#### Example + +`tel:2125551212` + +![phone.gif](imgs/phone.gif) + +### Compose a text message + +This URL scheme lets you redirect users from your app to compose and send an SMS message to a specified phone number. + +#### Scheme + +`sms:` + +#### Example + +`sms:2125551212` + +![text-message.gif](imgs/text-message.gif) + +### Create an email + +This URL scheme helps you to launch an email app on the user's device. It allows you to pass the *email to*, *subject*, and *body* to the app so that you have these fields prefilled with details as the email app is opened. + +#### Scheme + +`mailto:?subject=&body=` + +#### Example + +`mailto:name@example.org?subject=Welcome%20to%20FlutterFlow&body=Hey%20there` + +This will pass the following details to the email app: + +***mailto:*** name@example.org, ***subject:*** Welcome to FlutterFlow, ***body:*** Hey there + +![ceate-email.gif](imgs/ceate-email.gif) \ No newline at end of file diff --git a/docs/ff-concepts/navigation-routing/nav-overview.md b/docs/ff-concepts/navigation-routing/nav-overview.md new file mode 100644 index 00000000..643bd788 --- /dev/null +++ b/docs/ff-concepts/navigation-routing/nav-overview.md @@ -0,0 +1,102 @@ +--- +slug: overview +title: Overview +tags: [] +description: Learn how to add navigation in FlutterFlow. +sidebar_position: 0 +--- + +# Overview + +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. + +## What are Routes? +Routes are essentially the paths that define different screens or pages within the app. Each route is associated with a specific screen and has a unique identifier that allows the app to recognize and navigate to it. For example, a route could point to the home screen, a product details page, or a user profile page. + +| Page | Route | +|------------------|------------------| +| Home | /home | +| Product Details | /product-details | +| Cart | /cart | + + +## Navigation Stack Logic + +The **navigation stack** is a data structure that keeps track of the routes as they are pushed and popped off the stack. It follows the Last In, First Out (LIFO) principle, meaning the last screen that was navigated to is the first one to be navigated away from when the user presses the back button. + +Here’s how the navigation stack logic works in FlutterFlow: + +### 1. Pushing a Route +When you navigate to a new screen, that route is pushed onto the top of the stack. + +For example, if you are on the home screen and navigate to the profile screen, the profile screen route is pushed onto the stack. + +![pushroute.avif](imgs/pushroute.avif) + +### 2. Popping a Route +When you navigate back, the topmost route is popped off the stack, and the previous screen becomes visible. + +For example, if you are on the profile screen and press the back button, the profile screen route is popped off, revealing the home screen. + +![poproute.avif](imgs/poproute.avif) + +### 3. Replacing a Route +Sometimes, you might want to replace the current route with a new one without adding to the stack. This is useful for actions like logging in, where you don’t want users to navigate back to the login screen after they have logged in. + +For example, after a successful login, replace the login screen route with the home screen route. + +![replaceroute.avif](imgs/replaceroute.avif) + + +## Navigation Actions + +In FlutterFlow, there are three main navigation actions you can use to navigate between different screens in your app. Here are they: + +1. [Navigate To (Push a Route)](#1-navigate-to-push-a-route) +2. [Navigate Back (Pop a Route)](#2-navigate-back-pop-a-route) +3. [Replace Route](#3-replace-route) + +### 1. Navigate To (Push a Route) + +This action involves navigating to a new screen by pushing a new route onto the navigation stack. + +**What Happens Under the Hood:** + +- When you push a route, a new screen is placed on top of the current stack. This means the current screen is still in the stack but is not visible to the user. +- The new screen becomes the active screen that the user interacts with. + +:::info + +Learn more about adding this action [**here**](../../resources/ui-building-blocks/pages/navigation#navigate-to-action). + +::: + +### 2. Navigate Back (Pop a Route) + +This action involves navigating back to the previous screen by popping the current route off the navigation stack. + +**What Happens Under the Hood:** + +- When you pop a route, the current screen is removed from the stack, and the previous screen becomes active again. +- This action effectively reverses the last push operation. + +:::info + +Learn more about adding this action [**here**](../../resources/ui-building-blocks/pages/navigation#navigate-back-action). + +::: + +### 3. Replace Route + +This action involves replacing the current route with a new route. Unlike pushing a route, replacing a route does not add to the stack but swaps the current route with the new one. + +**What Happens Under the Hood:** + +- The current screen is removed from the stack, and the new screen is added in its place. + +:::info + +- This is useful when you want to prevent the user from navigating back to the previous screen. +- This action is essentially the **Navigate To** action with the **Replace Route** option enabled. Learn more about adding this action [**here**](../../resources/ui-building-blocks/pages/navigation#navigate-to-action). + +::: \ No newline at end of file diff --git a/docs/resources/ui-building-blocks/pages/navigation.md b/docs/ff-concepts/navigation-routing/page-navigation.md similarity index 56% rename from docs/resources/ui-building-blocks/pages/navigation.md rename to docs/ff-concepts/navigation-routing/page-navigation.md index 4d1974fd..54726d65 100644 --- a/docs/resources/ui-building-blocks/pages/navigation.md +++ b/docs/ff-concepts/navigation-routing/page-navigation.md @@ -1,11 +1,14 @@ --- -sidebar_position: 3 +slug: page-navigation +title: Page Navigation +tags: [] +description: Learn how to navigate between pages in FlutterFlow. +sidebar_position: 1 --- -# Navigation between Pages +# Page Navigation -Navigation in FlutterFlow involves moving between different pages. This is -handled through routing, where each page is identified by a unique route. +Page Navigation in FlutterFlow is handled through routing, where each page is identified by a unique route. Navigation can be programmed to happen on events like button clicks, leading to actions such as pushing a new route (opening a new page) or popping a route (returning to a previous 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. :::
- ![Nav.png](..%2Fimgs%2FNav.png) + ![Nav.png](imgs/Nav.png)
Properties of a Navigate To Action
@@ -95,115 +98,3 @@ previous section: allow="clipboard-write"> - -### Page Parameters - -**Parameters** in FlutterFlow are used to pass data between pages. When navigating -from one page to another, you can send parameters to configure the destination -page based on the data from the current page. This is useful for tasks like -passing a user ID to a profile page or specific details to a detailed view page. - -To create a page parameter, follow the steps: - -
- -
- -When a page parameter is set to Required, it indicates that this parameter is -mandatory when navigating to this page. Users must provide this value; -otherwise, FlutterFlow will throw errors. However, if you are creating an -optional parameter, please ensure this option is unchecked. - -Additionally, you can specify a default value in the Default Parameter Value -field to safeguard against incoming values that are empty or null. This step is -optional. - -![Page-Params.png](..%2Fimgs%2FPage-Params.png) - -If you have created a **Required** Page Parameter and there is a Navigation Action -already set on your previous page, FlutterFlow will throw errors because this -required parameter has not yet been sent from the previous page. Let's fix that: - - -
- -
- -
- -
-
- - - -:::info[When to use Page Parameters?] -Page parameters are used to pass essential data between pages that is not -persisted in the app’s global state but is necessary for specific -functionalities or displays on the subsequent page. Here’s a -breakdown of typical uses: - -- **Contextual Data:** Information that defines the context of the new page, such -as -identifiers for items or entities that the page must display. This could include -identifiers for transactions, specific products, or user profiles that were -selected on the previous page. - -- **Configuration Options:** Settings or options chosen by the user that affect -how -the next page functions or appears. For example, filter or sort preferences -selected on a list page that need to be applied on a subsequent results page. - -- **Operational Parameters:** Values needed for calculations or logic on the next -page -that are generated through user activities on the current page. These could be -values like quantities, dates, or configuration details necessary to perform -operations or initiate processes on the next page. - -Page parameters are thus essential for maintaining a seamless user experience, -enabling the new page to function as intended based on the specific needs and -inputs from a previous interaction. -::: \ No newline at end of file diff --git a/docs/ff-concepts/navigation-routing/passing-data.md b/docs/ff-concepts/navigation-routing/passing-data.md new file mode 100644 index 00000000..43f173ca --- /dev/null +++ b/docs/ff-concepts/navigation-routing/passing-data.md @@ -0,0 +1,163 @@ +--- +slug: passing-data +title: Passing Data +tags: [] +description: Learn how to pass data between pages in FlutterFlow. +sidebar_position: 2 +--- +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +# Passing Data between Pages + +As you build your app, you'll often encounter the need to pass through or transfer data from one page to another. For instance, when a user taps on a product item, you may want to send product data to the next page to display its details. + +## Page parameters +This process of passing data between pages is accomplished using **Parameters**. When navigating +from one page to another, you can send parameters to configure the destination +page based on the data from the current page. This is useful for tasks like +passing a user ID to a profile page or specific details to a detailed view page. + +To create a page parameter, follow the steps: + +
+ +
+

+ +When a page parameter is set to Required, it indicates that this parameter is +mandatory when navigating to this page. Users must provide this value; +otherwise, FlutterFlow will throw errors. However, if you are creating an +optional parameter, please ensure this option is unchecked. + +Additionally, you can specify a default value in the Default Parameter Value +field to safeguard against incoming values that are empty or null. This step is +optional. + +![Page-Params.png](imgs/Page-Params.png) + +If you have created a **Required** Page Parameter and there is a Navigation Action +already set on your previous page, FlutterFlow will throw errors because this +required parameter has not yet been sent from the previous page. Let's fix that: + + +
+ +
+ +
+ +
+
+ +:::info +Passing data can only be tested in **Run** and **Test** Mode (it can not be tested in Preview Mode). +::: + +## When to use Page Parameters? +Page parameters are used to pass essential data between pages that is not +persisted in the app’s global state but is necessary for specific +functionalities or displays on the subsequent page. Here’s a +breakdown of typical uses: + +- **Contextual Data:** Information that defines the context of the new page, such +as +identifiers for items or entities that the page must display. This could include +identifiers for transactions, specific products, or user profiles that were +selected on the previous page. + +- **Configuration Options:** Settings or options chosen by the user that affect +how +the next page functions or appears. For example, filter or sort preferences +selected on a list page that need to be applied on a subsequent results page. + +- **Operational Parameters:** Values needed for calculations or logic on the next +page +that are generated through user activities on the current page. These could be +values like quantities, dates, or configuration details necessary to perform +operations or initiate processes on the next page. + +Page parameters are thus essential for maintaining a seamless user experience, +enabling the new page to function as intended based on the specific needs and +inputs from a previous interaction. + +## Allowed Data Types + +You can pass any supported data from one page to another via *page parameter(s)*. You can think of a *page parameter* as a variable that holds the value being passed from one page to another. + +:::info +If you are using Firestore Database, most of the time, you would pass the *Document* (an actual record inside the Firestore collection) and *Document Reference (points to actual document)* between the pages. +::: +--- + +## Video guide + +If you prefer watching a video tutorial, here's the one for you: +
+ +
\ No newline at end of file diff --git a/docs/ff-concepts/navigation-routing/share-action.md b/docs/ff-concepts/navigation-routing/share-action.md index 57dc507b..6daf7320 100644 --- a/docs/ff-concepts/navigation-routing/share-action.md +++ b/docs/ff-concepts/navigation-routing/share-action.md @@ -1,4 +1,7 @@ - +--- +title: Share [Action] +sidebar_position: 6 +--- # Share [Action] @@ -33,8 +36,13 @@ Demo of defining Share Action using a **Specific Value** is as follows: +

+ Alternatively, a demo of defining Share Action using **From Variable** option is as follows: +

+ +
diff --git a/docs/ff-concepts/navigation-routing/special-page-navigation/_category_.json b/docs/ff-concepts/navigation-routing/special-page-navigation/_category_.json new file mode 100644 index 00000000..974b8432 --- /dev/null +++ b/docs/ff-concepts/navigation-routing/special-page-navigation/_category_.json @@ -0,0 +1,4 @@ +{ + "label": "Special Page Navigations", + "position": 3 +} \ No newline at end of file diff --git a/docs/ff-concepts/navigation-routing/special-page-navigation/imgs/PageViewDemo.avif b/docs/ff-concepts/navigation-routing/special-page-navigation/imgs/PageViewDemo.avif new file mode 100644 index 00000000..16f48b1f Binary files /dev/null and b/docs/ff-concepts/navigation-routing/special-page-navigation/imgs/PageViewDemo.avif differ diff --git a/docs/ff-concepts/navigation-routing/special-page-navigation/imgs/TabBarDemo.avif b/docs/ff-concepts/navigation-routing/special-page-navigation/imgs/TabBarDemo.avif new file mode 100644 index 00000000..5972205e Binary files /dev/null and b/docs/ff-concepts/navigation-routing/special-page-navigation/imgs/TabBarDemo.avif differ diff --git a/docs/ff-concepts/navigation-routing/special-page-navigation/imgs/change-the-tab-bar-position.gif b/docs/ff-concepts/navigation-routing/special-page-navigation/imgs/change-the-tab-bar-position.gif new file mode 100644 index 00000000..086bc410 Binary files /dev/null and b/docs/ff-concepts/navigation-routing/special-page-navigation/imgs/change-the-tab-bar-position.gif differ diff --git a/docs/ff-concepts/navigation-routing/special-page-navigation/imgs/customizing-button-TabBar-style.png b/docs/ff-concepts/navigation-routing/special-page-navigation/imgs/customizing-button-TabBar-style.png new file mode 100644 index 00000000..8eae2b1e Binary files /dev/null and b/docs/ff-concepts/navigation-routing/special-page-navigation/imgs/customizing-button-TabBar-style.png differ diff --git a/docs/ff-concepts/navigation-routing/special-page-navigation/imgs/customizing-indicator-style.png b/docs/ff-concepts/navigation-routing/special-page-navigation/imgs/customizing-indicator-style.png new file mode 100644 index 00000000..4f4376b9 Binary files /dev/null and b/docs/ff-concepts/navigation-routing/special-page-navigation/imgs/customizing-indicator-style.png differ diff --git a/docs/ff-concepts/navigation-routing/special-page-navigation/imgs/customizing-toggle-button-TabBar-style.gif b/docs/ff-concepts/navigation-routing/special-page-navigation/imgs/customizing-toggle-button-TabBar-style.gif new file mode 100644 index 00000000..667b43ff Binary files /dev/null and b/docs/ff-concepts/navigation-routing/special-page-navigation/imgs/customizing-toggle-button-TabBar-style.gif differ diff --git a/docs/ff-concepts/navigation-routing/special-page-navigation/imgs/set-margin.gif b/docs/ff-concepts/navigation-routing/special-page-navigation/imgs/set-margin.gif new file mode 100644 index 00000000..73941b22 Binary files /dev/null and b/docs/ff-concepts/navigation-routing/special-page-navigation/imgs/set-margin.gif differ diff --git a/docs/ff-concepts/navigation-routing/special-page-navigation/imgs/setting-initial-page-index.png b/docs/ff-concepts/navigation-routing/special-page-navigation/imgs/setting-initial-page-index.png new file mode 100644 index 00000000..b69aa67a Binary files /dev/null and b/docs/ff-concepts/navigation-routing/special-page-navigation/imgs/setting-initial-page-index.png differ diff --git a/docs/ff-concepts/navigation-routing/special-page-navigation/imgs/setting-initial-tab-index.gif b/docs/ff-concepts/navigation-routing/special-page-navigation/imgs/setting-initial-tab-index.gif new file mode 100644 index 00000000..b9b2a89c Binary files /dev/null and b/docs/ff-concepts/navigation-routing/special-page-navigation/imgs/setting-initial-tab-index.gif differ diff --git a/docs/ff-concepts/navigation-routing/special-page-navigation/imgs/tab-index.webp b/docs/ff-concepts/navigation-routing/special-page-navigation/imgs/tab-index.webp new file mode 100644 index 00000000..3fa31340 Binary files /dev/null and b/docs/ff-concepts/navigation-routing/special-page-navigation/imgs/tab-index.webp differ diff --git a/docs/ff-concepts/navigation-routing/special-page-navigation/overview.md b/docs/ff-concepts/navigation-routing/special-page-navigation/overview.md new file mode 100644 index 00000000..f16de64d --- /dev/null +++ b/docs/ff-concepts/navigation-routing/special-page-navigation/overview.md @@ -0,0 +1,14 @@ +--- +slug: overview +title: Overview +tags: [] +description: Learn how to add Special Page Navigations in FlutterFlow. +sidebar_position: 0 +--- + +# Overview +FlutterFlow provides special navigation widgets like Tab Bar, NavBar, and PageView for advanced navigation scenarios: + +- **Tab Bar**: Used for navigating between different sections of your app with tabs, ideal for organizing content into categories. Learn more [here](tabbar). +- **NavBar**: A bottom navigation bar that helps users switch between major sections of your app seamlessly. Learn more [here](#). +- **PageView**: Allows for swipeable pages, perfect for creating onboarding screens or multi-step forms. Learn more [here](#). \ No newline at end of file diff --git a/docs/ff-concepts/navigation-routing/special-page-navigation/pageview-widget.md b/docs/ff-concepts/navigation-routing/special-page-navigation/pageview-widget.md new file mode 100644 index 00000000..3294c7ee --- /dev/null +++ b/docs/ff-concepts/navigation-routing/special-page-navigation/pageview-widget.md @@ -0,0 +1,316 @@ +--- +slug: pageview +title: PageView +tags: [] +description: Learn how to use the PageView widget for creating swipeable pages, perfect for creating onboarding screens or multi-step forms. +sidebar_position: 2 +--- + +# PageView +The PageView widget is used to create swipeable pages. In page view, you can add multiple child widgets, each of which is considered a page and can be scrolled horizontally or vertically. + +The PageView is useful when you have a collection of pages that you want to display one at a time, especially if you want the user to be able to swipe between them, such as in an onboarding screen, an app that shows a short video by swiping up or down just like Instagram, TikTok, Youtube shorts, etc. + +![PageViewDemo](imgs/PageViewDemo.avif) + +## Adding PageView widget + +To add the PageView widget to your app: + +1. Add the **PageView** widget from the **Layout Elements** tab. +2. By default, it adds three pages and shows the first one in the canvas. In the widget tree, it is represented as **PageView Page**. To see another page in the canvas, move to the **Properties Panel >** set the **Active Page** to the page you want to see. +3. To add a new page, move to the **Properties Panel > Active Page >** click **+ Add Page**. +4. To delete any page, select the **PageView Page** (which you want to delete) from the widget tree or the canvas area and press the **Delete** key on the keyboard. +5. By default, PageView Page contains an [Image](#) widget; however, you can customize it as per your requirement. For example, if you want to use the PageView widget to create an onboarding experience, you could wrap (`⌘` + B) the default image widget inside the [Stack](#) widget and then add some more widgets. + +
+ +
+ +## Adding infinite scroll + +The PageView widget is an incredibly versatile widget that can be utilized in a variety of situations to create interactive applications. For example, you might want to use it in an app that involves reading books, magazines, or similar content to mimic the experience of flipping through pages. + +In such situations, you might consider adding an infinite scroll on this widget, which automatically loads the new pages as you swipe. + +We have already covered how to [add infinite scroll on ListView](#) widget, which will give you an overall idea of how to add infinite scroll on the PageView widget as well. + +## Customizing + +You can customize the appearance and behavior of this widget using the various properties available under the properties panel. + +### Changing the scroll direction + +By default, the PageView comes with a horizontal scroll for the pages. To change the scroll direction to vertical, move to the **Properties Panel > Page View Properties >** set the **Axis** to **Vertical**. + +
+ +
+ +### Enable/disable swipe to scroll + +This widget allows you to change the page using a swipe gesture as well as clicking on the indicator (3 dots at the bottom indicate which page is being viewed). You can change this behavior and only allow changing the page on click of the indicator. + +To do so, move to the **Properties Panel > Page View Properties >** disable **Allow swipe scrolling**. + +
+ +
+ +### Update page on swipe + +Sometimes you might want to rebuild the page on which the PageView widget is contained. i.e., rebuilding the outside of the page view widget. You might want to load data or show/hide UI elements based on the page currently being displayed. For example, you could display a floating action button only on a certain page or show/hide certain widgets based on the page index. + +To do so, move to the **Properties Panel > Page View Properties >** turn on the **Update Page on Swipe**. + +Here's an example of displaying the current page index on a page that contains the PageView widget. + +
+ +
+ +### Trigger action on swipe + +You might want to trigger an action when the page is swiped in the PageView widget. For example, you might want to load data for a specific page only when the user swipes to it instead of loading all the data upfront. + +To trigger action on swipe: + +1. Select the widget from the widget tree or canvas area. +2. Select **Actions** from the Properties panel (the right menu), and click **+ Add Action**. +3. You will notice that the **Type of Action** (aka callback) is already set to **On Page Swipe**. That means actions added under this will be called whenever the page is swiped. +4. Now, you can add any action here. + +Here is an example showing the [snackbar](#) message whenever the page is swiped to the second page. + +
+ +
+ +### Setting initial page index + +You might want to display a specific page as soon as it is loaded. To do so, move to the **Properties Panel > Page View Properties >** enter the **Initial Page Index** value. Please **note** that the page index starts from 0. So, if you want to set page 1, you should enter 0. If you want to set page 2, you should enter 1, and so on. + +![setting-initial-page-index.png](imgs/setting-initial-page-index.png) + +### Set margin + +Margin adds a space between the PageView content and its border. To change the margin, select the **PageView** widget, move to the **Properties Panel > Page View Properties >** find the **Margin** property, and change the values. + +
+ +
+ +### Customize the indicator + +The Indicator helps you identify which page is currently being viewed. You can change the appearance of the Indicator using the various properties available under the *Indicator Properties* section. + +To customize the indicator: + +1. Select the **PageView** widget, and move to the **Properties Panel > Indicator Properties**. +2. To change the indicator position, + 1. Find the **Horizontal Alignment** property and adjust the value by using the slider or entering a value. A value of -1 will place the Indicator all the way to the left, while a value of 1 will place the Indicator all the way to the right. + 2. Similarly, you can also change the indicator position vertically using the **Vertical Alignment** property. A value of -1 will place the Indicator all the way to the top, while a value of 1 will place the Indicator all the way to the bottom. +3. To add padding around the indicator, find the **Padding** property and enter the values in L (Left), T (Top), R (Right), and B (Bottom) properties to get the desired result. +4. To change the active and inactive color, use the **Active Color** and **Inactive Color** properties to change the color. +5. To change the indicator dot size, use the **Dot Width** and **Dot height** properties. +6. To change the size of an active dot, you can use the **Expansion Factor** property. For example, if you enter 2, the active dot size will be twice its normal size. + +:::info +The width of the active dot is calculated by multiplying the value of the **Dot Width** property with the value of the **Expansion Factor** property. That means if the Dot Width is set to 40 and *Expansion Factor* is set to 2, then the width of the Active dot will be 80. +::: + +7. To add space between the indicator dots, use the **Spacing** property. +8. To adjust the rounded corner of indicator dots, use the **Border Radius** property. +9. To show only the border, enable the **Outline** toggle. +10. If you want to hide the indicators, disable the **Show Indicator** toggle. + +
+ +
+ +### Scroll PageView on button press + +If you use the PageView widget to create the onboarding experience, you may probably want to allow users to scroll the pages on button press (e.g., next, previous, and skip buttons) in addition to the swipe to scroll. You can do so by adding the PageView and then defining the Control Page View action on the Tap of a Button widget. + +Here's an example of scrolling PageView on button press: + +1. First, [add the PageView](#adding-pageview-widget) widget. +2. [Customize the PageView](#customizing) widget and add buttons to go to the previous and next pages. +3. Now select any button and define the [Control Page View action](#). + +--- + +## Video guide + +If you prefer watching a video tutorial, here's the one for you: +
+ +
\ No newline at end of file diff --git a/docs/ff-concepts/navigation-routing/special-page-navigation/tabbar-widget.md b/docs/ff-concepts/navigation-routing/special-page-navigation/tabbar-widget.md new file mode 100644 index 00000000..651f1d53 --- /dev/null +++ b/docs/ff-concepts/navigation-routing/special-page-navigation/tabbar-widget.md @@ -0,0 +1,275 @@ +--- +slug: tabbar +title: TabBar +tags: [] +description: Learn how to use the TabBar widget in FlutterFlow to create a horizontal row of tabs for navigating different content views in your app. +sidebar_position: 1 +--- + +# TabBar + +The TabBar widget displays a horizontal row of tabs, allowing users to switch between different content views by tapping on the tabs. Each tab typically represents a different section or category of content. + +It can be used in various types of apps, such as news apps with different categories, e-commerce apps with product categories, or social media apps with different sections like feeds, notifications, and messages. + +![TabBarDemo.avif](imgs/TabBarDemo.avif) + +## Adding TabBar widget + +To add the TabBar widget to your app: + +1. [Add](#) the **TabBar** widget from the **Layout Elements** tab. +2. By default, it adds three tabs to the page and shows the first one in the canvas. In the [widget tree](#), it is represented as **Tab** and **TabBar Page**. To see another tab in the canvas, select the **TabBar** widget, move to the **Properties Panel,** and ****set the **Active Tab** to the one you want to see. +3. To customize the Tab: + 1. Select the **Tab >** Move to **Properties Panel**. + 2. Use the **Text** property to change the label of the Tab. + 3. You can also [add **Icon**](#), align it horizontally, and set its margin. **Tip**: To only display Icon, remove the Text value. +4. Inside the **TabBar Page**, you can replace the existing **Text** widget with any widget of your choice. +5. To add a new tab, move to the **Properties Panel > Active Page >** click **+ Add Page**. + +:::tip +- If you want to adjust the height of a TabBar Page, wrap a TabBar widget inside a container and then set the container’s height. +- You can find the currently selected tab index from *set from variable menu > widget state > TabBar Current Index*. +::: + +
+ +
+ +## Change tab in response to widget action + +If you want to change the tab selection in response to a widget action, such as a button click, you can do so by adding the [Control Tab Bar](#) action. + +## Customizing + +You can customize the appearance and behavior of this widget using the various properties available under the properties panel. + +### Customizing label + +To customize the tab label: + +1. Select the **TabBar** widget > move to the **Properties Panel > Label Properties**. +2. To [set different colors](#) when the tab is selected and unselected, use the **Selected Color** and **Unselected Color** properties. +3. To add some space around the label, use the **Label Padding** property. +4. Use the **Label Style** property to change its [styling](#). You can also set the label styling for the unselected tab text by enabling the **Custom Unselected Label Style**. + +
+ +
+ +### Customizing tab + +By default, the tab in the TabBar widget is displayed with an indicator style, which includes a line under the tab to indicate the currently viewed page. However, you have the flexibility to change the tab's styling to achieve different visual effects. Instead of the indicator style, you can customize the tab to appear as a row of buttons or a toggle button, depending on your design requirements and preferences. + +To change the tab styling: + +1. Select the **TabBar** widget > move to the **Properties Panel > Tab Properties**. +2. Choose the **Tab Bar Style** from **Indicator**, **Button** and **Toggle Button**. +3. When the style is set to **Indicator**, you can set the indicator **Color** and **Weight** (thickness). + + ![customizing-indicator-style.png](imgs/customizing-indicator-style.png) + +4. When the style is set to **Button**, you have the following options to customize: + 1. To set the tab background color for selected and unselected states, use the **Fill Color** and **Idle** **Fill Color,** respectively. + 2. To set the border color for selected and unselected states, use the **Border Color** and **Idle Border Color,** respectively. Also, make sure to set the **Border Width** to see the border. + 3. To adjust the rounded corner of each tab, use the **Border Radius** property. + 4. You can also set the **Elevation** and **Button Margin** properties for all tabs. + + ![customizing-button-TabBar-style.png](imgs/customizing-button-TabBar-style.png) + +5. When the style is set to **Toggle** **Button**, you have the following options to customize: + 1. To set the tab background color for selected and unselected states, use the **Fill Color** and **Idle** **Fill Color,** respectively. + 2. To set a border around all tabs, use the **Border Color** and **Border Width** properties. + 3. To add a divider between the tabs, use the **Div** **Border Color** and **Border Width** properties. + 4. You can also set the **Elevation** and **Button Margin** properties for all tabs. + + ![customizing-toggle-button-TabBar-style.gif](imgs/customizing-toggle-button-TabBar-style.gif) + + +### Setting initial tab index + +You might want to display a specific tab as selected as soon as the TabBar is loaded. To do so, move to the **Properties Panel > General Properties >** enter the **Initial Tab Index** value. Please **note** that the tab index starts from 0. So, if you want to set tab 1, you should enter 0. If you want to set tab 2, you should enter 1, and so on. + +![tab-index.webp](imgs/tab-index.webp) + +![setting-initial-tab-index .gif](imgs/setting-initial-tab-index.gif) + +### Change the tab bar position + +Sometimes you might want to change the default tab bar position, i.e., from top to bottom. You can do so by navigating to **Properties Panel > General Properties >** changing the **Tab Bar Position** value. + +![change-the-tab-bar-position.gif](imgs/change-the-tab-bar-position.gif) + +### Making TabBar Scrollable + +When you have a large number of tabs, they may not all fit on the screen. To address this, you can make the tabs scrollable, allowing the user to scroll horizontally to view all the tabs. + +To make a TabBar scrollable, select the TabBar widget > move to the **Properties Panel > General Properties >** enable the **Tab Bar Scrollable** option. + +:::info +If there are fewer tabs, you can control the alignment using the **Tab Bar Horizontal Alignment** property. However, for fewer tabs, you may not need to make them scrollable, but the option is available if required. +::: + +
+ +
+ +### Set margin + +Margin adds a space between the TabBar and its border. To change the margin, select the **TabBar** widget, move to the **Properties Panel > General Properties >** find the **Tab Bar** **Margin** property, and change the values. + +![set-margin .gif](imgs/set-margin.gif) + +### Disable swipe to switch tab + +By default, you can switch to another tab by swiping and clicking on the tab. In case you want to disable the swiping behavior, you can do so by navigating to **Properties Panel > General Properties >** disabling the **Allow Swiping to Switch Tabs**. + +
+ +
+ +### Keeping tab state alive + +By default, when you switch to a different tab, the state of the previous tab is lost and gets rebuilt when you switch back to it. However, in certain scenarios, you may want to maintain the state of each tab to preserve user input, scroll positions, data from an API call, or any other relevant data. This is called keeping the tab state alive. + +To keep the tab state alive, select the **TabBar** widget **> Properties Panel > General Properties>** enable **Keep Tab State Alive**. + +
+ +
+ +--- + +## Video guide + +If you prefer watching a video tutorial, here's the one for you: + +
+ +
diff --git a/docs/ff-concepts/navigation-routing/webview-widget.md b/docs/ff-concepts/navigation-routing/webview-widget.md new file mode 100644 index 00000000..a1989140 --- /dev/null +++ b/docs/ff-concepts/navigation-routing/webview-widget.md @@ -0,0 +1,81 @@ +--- +slug: webview +title: WebView +tags: [] +description: Learn how to use the WebView widget in FlutterFlow to display website content directly within your app. +sidebar_position: 6 +--- + +# WebView + +The WebView widget lets you display the website content right inside your app. It's useful in a case where you don't want your users to leave your app to view the web page. + + +## Adding WebView widget + +To add the WebView widget to your app: + +1. Add the **WebView** widget from the **Base Elements** tab. +2. Head over to Properties Panel, adjust the **Width** and **Height**, and then enter the Webview URL.(e.g., https://flutterflow.io/,https://en.wikipedia.org/wiki/Main_Page). +3. Certain web pages may have restrictions that prevent them from being viewed within the WebView, such as popular websites like [Unsplash](https://unsplash.com/) or [Facebook](https://www.facebook.com/). However, you can override these restrictions by enabling the **Bypass Domain Restrictions** option. +4. You can also **Force Allow Vertical** and **Horizontal Scrolling** if needed. + +
+ +
+ +## Customizing + +You can customize the appearance and behavior of this widget using the various properties available under the properties panel. + +### Load content from HTML + +Sometimes, you might choose to construct your own HTML with the desired styling and structure and then load that HTML into a WebView. For example, display a privacy policy page with a slight variation using modified HTML content (which might be different than the one hosted on your site). + +To do so, enable the **Load content from HTML** and then enter your **Webview HTML Content**. + +
+ +
diff --git a/docs/resources/ui-building-blocks/pages/pages-configuration.md b/docs/resources/ui-building-blocks/pages/pages-configuration.md index fff17b52..ebe0c08b 100644 --- a/docs/resources/ui-building-blocks/pages/pages-configuration.md +++ b/docs/resources/ui-building-blocks/pages/pages-configuration.md @@ -3,7 +3,7 @@ title: Page Configurations sidebar_position: 1 --- -# Property Panel +# Properties Panel In FlutterFlow, the properties panel located on the right side of the interface @@ -22,6 +22,10 @@ hold values which can be passed between pages. For example, you might pass a user ID from a list page to a detail page to display specific information about that user. +:::info[LEARN MORE] +Learn more about passing data between pages [**here**](../../../ff-concepts/navigation-routing/passing-data). +::: + ### Route Settings In FlutterFlow, Route Settings are essential for defining how pages within your @@ -30,6 +34,10 @@ customize the URL paths for web and mobile deep linking, set meaningful Page Names as unique identifiers, integrate dynamic parameters into your routes, and set access restrictions based on user authentication. +:::info[LEARN MORE] +Learn more about Routing [**here**](../../../ff-concepts/navigation-routing/overview). +::: + ## Advanced Configurations For more advanced customization and functionality within your FlutterFlow