FlutterFlow Docs
Search…
Advanced Functionality πŸ€–
Navigate
In order to move between two pages (e.g. travel from one page to another or back to the previous screen), you can use the Navigate Action.
Let's take a look at the different properties of the Navigate Action and how you can define this Action to any widget.

Types

There are two types of navigation action:
  • Navigate To: Provides you a dropdown menu of all the screens present in your app, you can select the one you want to be navigated to.
  • Navigate Back (pop): This allows you to move back to the previous page of the app.

Properties

The following properties are only applicable if you are using Navigate To action:
  • Allow Back Navigation: By default, this toggle remains enabled. You can disable it if you don't want the user to go back to the previous screen once navigated away from it. For example, when the Login button is pressed and the user is logged in to the app, you don't want the user to go back to the Login Screen again.
  • Transition Type: This allows you to specify an animation that will be applied while navigating away from a screen. You can choose among Default, Instant, Fade In, Slide Up, Slide Down, Slide Left, Slide Right & Scale.
  • Transition Duration: This allows you to set the transition animation duration in milliseconds.
Navigate Back action doesn't contain any extra properties.

Navigate To Action

To define a Navigate To Action on any widget, go to your project page in FlutterFlow and follow the steps below:
  1. 1.
    Select the widget on which you want to apply the action.
  2. 2.
    From the Properties panel (the right menu), click + Add under the Actions section. If you have other actions already added click Edit.
  3. 3.
    Choose the gesture that you want to use, among On Tap, On Double Tap, and On Long Press.
  4. 4.
    If it's the first action, click + Add Action button. Otherwise, click the "+" button present below the previous action tile and select Add Action.
  5. 5.
    Select the Action as Navigate To and choose the page from the dropdown.
  6. 6.
    (Optional) You can disable the Allow Back Navigation toggle to prevent the user from navigating back to this page after being navigated to the next page
  7. 7.
    (Optional) You can set a Transition Type and Transition Duration (in milliseconds).
  8. 8.
    (Optional) If the page that you are navigating to accepts any parameter, you can specify their values under the Parameters section.
Know more about passing data (as parameters) from one page to another from this page.

Navigate Back Action

To define a Navigate Back Action on any widget, go to your project page in FlutterFlow and follow the steps below:
  1. 1.
    Select the widget on which you want to apply the action.
  2. 2.
    From the Properties panel (the right menu), click + Add under the Actions section. If you have other actions already added click Edit.
  3. 3.
    Choose the gesture that you want to use, among On Tap, On Double Tap, and On Long Press.
  4. 4.
    If it's the first action, click + Add Action button. Otherwise, click the "+" button present below the previous action tile and select Add Action.
  5. 5.
    Select the Action as Navigate Back.

Code Overview

You can view the code that is generated by FlutterFlow in the background by going to the Developer Menu > View Code from the Tool Bar.
NOTE: This section is for users who might want to make some additional modifications to the generated code, or want to understand the code that is generated by FlutterFlow behind the scenes.
Adding the Navigate To Action will generate a code like the following:
1
FloatingActionButton(
2
onPressed: () async {
3
await Navigator.push(
4
context,
5
PageTransition(
6
type: PageTransitionType.bottomToTop,
7
duration: Duration(milliseconds: 300),
8
reverseDuration: Duration(milliseconds: 300),
9
child: CreateTaskPageWidget(),
10
),
11
);
12
},
13
)
Copied!
If you disable the Allow Back Navigation toggle, pushAndRemoveUntil method would be used instead of just the push method. It prevents the user from going back to the previous screen.
1
FFButtonWidget(
2
onPressed: () async {
3
await Navigator.pushAndRemoveUntil(
4
context,
5
PageTransition(
6
type: PageTransitionType.leftToRight,
7
duration: Duration(milliseconds: 300),
8
reverseDuration: Duration(milliseconds: 300),
9
child: NavBarPage(initialPage: 'myTasks'),
10
),
11
(r) => false,
12
);
13
},
14
text: 'Login',
15
)
Copied!
Adding the Navigate Back Action will generate a code like the following:
1
FFButtonWidget(
2
onPressed: () async {
3
Navigator.pop(context);
4
},
5
text: 'Mark As Complete',
6
)
Copied!

References

If you want to delay navigation to another page, check out the Wait action.
Learn how to pass data from one page of the app to another from here.
Some resources that might help you to get more information about how navigation works in Flutter and what FlutterFlow does behind the scenes to achieve the Navigate Action: