Pinkesh/navigation

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:
 
 <figure>
-    ![img.png](img.png)
+    ![img.png](imgs/img.png)
   <figcaption class="centered-caption">Deep and Dynamic link flow</figcaption>
 </figure>
 
@@ -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.
 
 <figure>
-    ![img_5.png](img_5.png)
+    ![img_5.png](imgs/img_5.png)
   <figcaption class="centered-caption">Adding parameter on page</figcaption>
 </figure>
 
@@ -386,7 +387,7 @@ To pass custom data with the link, you need to have the following:
 
 
 <figure>
-   ![img_6.png](img_6.png) 
+   ![img_6.png](imgs/img_6.png) 
   <figcaption class="centered-caption">Including a parameter in the route</figcaption>
 </figure>
 

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

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:<webpage URL link>`
+
+`https:<webpage URL link>`
+
+#### 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:<phone-number>`
+
+#### 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:<phone_number>`
+
+#### 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:<email_address>?subject=<subject>&body=<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)

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).
+
+:::