Add new screens in FlutterFlow by clicking the '+' button in the Page Selector panel on the left. Every page has configurable properties: Entry Page (which page launches first), App Bar, Navigation Bar, and Page Parameters for passing data between screens. Use Normal pages for standard content, Bottom Sheet pages for slide-up panels, and Dialog pages for confirmation modals. Name pages with PascalCase and no spaces to avoid routing issues.
Pages, Screens, and Navigation in FlutterFlow
In FlutterFlow, every screen of your app is a 'Page' — a full-screen widget with its own widget tree, backend queries, and action flows. Pages are listed in the Page Selector panel on the left side of the editor. Adding a page creates a new route in your Flutter app. Understanding page properties — especially Entry Page, Page Parameters, and page type — is essential for building a coherent app flow. This tutorial covers everything from creating your first additional page to building complex navigation hierarchies with data passed between screens.
Prerequisites
- A FlutterFlow project with at least one page already created
- Basic understanding of FlutterFlow's editor layout (left panel, canvas, right Properties panel)
Step-by-step guide
Open the Page Selector and create a new page
Open the Page Selector and create a new page
Look at the left sidebar in FlutterFlow's editor. Click the pages icon (it looks like a stack of rectangles) to open the Page Selector panel. At the top of the panel, click the '+' button to create a new page. A dialog box appears asking you to name the page and choose a layout template. Type your page name in PascalCase (e.g., 'ProductDetailPage' or 'SettingsPage') — this becomes the page's route name in the generated Flutter code. Choose a template (Blank, List, Details, or others) as a starting point — you can add and remove widgets after creation. Click 'Create'. The new page appears in the Page Selector list and opens on the canvas immediately.
Expected result: The new page appears in the Page Selector list and opens on the canvas. An entry is added to the app's routing table, visible in Settings → App Details → Route.
Configure Page Properties in the right panel
Configure Page Properties in the right panel
With the new page selected on the canvas, look at the Properties panel on the right side. At the top of this panel you will see 'Page Properties'. The most important settings here are: Entry Page toggle (mark this if it should be the first page users see — only one page can be the Entry Page), App Bar toggle and configuration (enable the built-in Material AppBar with title, back button, and actions), Navigation Bar toggle (show the bottom nav bar on this page), and Page Color (the Scaffold background color). Scroll down further to find 'Page Parameters' (for receiving data from other pages) and 'Route Params' (for web URL parameters).
Expected result: The page canvas reflects your chosen settings — the App Bar appears at the top if enabled, the background color updates immediately, and the nav bar appears at the bottom if toggled on.
Add Page Parameters to receive data from other screens
Add Page Parameters to receive data from other screens
Page Parameters let you pass data to a page when navigating to it — like a product ID, user name, or a complete Firestore document. In Page Properties, scroll to the 'Page Parameters' section and click 'Add Parameter'. Give the parameter a name (e.g., 'productId'), choose its data type (String, Integer, Document — a Firestore document reference, etc.), and mark it as 'Required' if the page cannot function without it. After saving, navigate to the page that will open this page and add a Navigate To action. In that action's settings, you will now see an input field for each required parameter — bind these to the data you want to pass (e.g., the product document from a ListView item tap).
Expected result: The receiving page shows the correct data for whatever item the user tapped. Test by adding a Text widget bound to the parameter value and navigating from a list item.
Choose the right page type for your use case
Choose the right page type for your use case
FlutterFlow offers three page types, selected in the Page Properties panel. Normal pages are full-screen routes — the standard type for most screens like Home, Profile, and Product Detail. Bottom Sheet pages slide up from the bottom of the screen (like a filter panel or quick-action menu) — they appear on top of the current page and don't replace it in the navigation stack. Dialog pages appear as centered overlays (modal dialogs) for confirmations, alerts, and short forms. To show a Bottom Sheet or Dialog page, use the 'Show Bottom Sheet' or 'Show Dialog' action (not 'Navigate To') in your Action Flow. These types correctly handle the native gesture (swipe down to dismiss for sheets, tap outside to dismiss for dialogs).
Expected result: Normal pages navigate with a push animation. Bottom Sheet pages slide up from the bottom with the swipe-to-dismiss gesture. Dialog pages appear as centered overlays with a dim background.
Configure responsive breakpoints for web and tablet
Configure responsive breakpoints for web and tablet
If your app targets web or tablet in addition to mobile, use FlutterFlow's responsive features on each page. Click the device width selector at the top of the canvas (it shows a phone icon by default) and switch between Mobile (360px), Tablet (768px), and Desktop (1024px+) views. For each breakpoint, you can adjust widget properties: make columns switch from 1-column to 2-column on tablet, hide sidebar navigation on mobile, or show different images. FlutterFlow applies these breakpoint overrides at runtime using Flutter's LayoutBuilder or MediaQuery. For pages used primarily on web, also set the page's Route in Page Properties so it has a clean URL path like '/products/detail'.
Expected result: Switching the canvas to tablet or desktop view shows your layout adaptations. Pages look appropriately spaced on all three screen sizes.
Complete working example
1// navigation_example.dart2// Illustrates how FlutterFlow generates navigation code3// for different page types and parameter passing4// This is generated code — do not edit directly; manage via FlutterFlow UI56import 'package:flutter/material.dart';7import 'package:go_router/go_router.dart';89// ---- Normal Page Navigation with Parameters ----10// FlutterFlow generates this when you use Navigate To action11void navigateToProductDetail(BuildContext context, String productId) {12 context.pushNamed(13 'ProductDetailPage',14 queryParameters: {'productId': productId},15 );16}1718// ---- Bottom Sheet Page ----19// FlutterFlow generates this when you use Show Bottom Sheet action20Future<void> showFilterSheet(BuildContext context) async {21 await showModalBottomSheet(22 context: context,23 isScrollControlled: true,24 backgroundColor: Colors.transparent,25 builder: (context) => DraggableScrollableSheet(26 initialChildSize: 0.6,27 minChildSize: 0.3,28 maxChildSize: 0.95,29 builder: (_, scrollController) => Container(30 decoration: const BoxDecoration(31 color: Colors.white,32 borderRadius: BorderRadius.vertical(top: Radius.circular(20)),33 ),34 child: FilterSheetPage(scrollController: scrollController),35 ),36 ),37 );38}3940// ---- Dialog Page ----41// FlutterFlow generates this when you use Show Dialog action42Future<bool?> showConfirmDialog(BuildContext context, String message) async {43 return showDialog<bool>(44 context: context,45 barrierDismissible: true,46 builder: (context) => AlertDialog(47 title: const Text('Confirm'),48 content: Text(message),49 actions: [50 TextButton(51 onPressed: () => Navigator.pop(context, false),52 child: const Text('Cancel'),53 ),54 ElevatedButton(55 onPressed: () => Navigator.pop(context, true),56 child: const Text('Confirm'),57 ),58 ],59 ),60 );61}6263// ---- Route Configuration (go_router) ----64// FlutterFlow generates this in main.dart based on all your pages65final GoRouter appRouter = GoRouter(66 initialLocation: '/splash',67 routes: [68 GoRoute(path: '/splash', name: 'SplashPage', builder: (_, __) => const SplashPage()),69 GoRoute(path: '/home', name: 'HomePage', builder: (_, __) => const HomePage()),70 GoRoute(71 path: '/products/:productId',72 name: 'ProductDetailPage',73 builder: (context, state) => ProductDetailPage(74 productId: state.pathParameters['productId'] ?? '',75 ),76 ),77 GoRoute(path: '/settings', name: 'SettingsPage', builder: (_, __) => const SettingsPage()),78 ],79);Common mistakes when adding Screens to Your FlutterFlow Project
Why it's a problem: Naming pages with spaces or special characters (e.g., 'Product Detail Page' or 'my-page')
How to avoid: Always name pages in PascalCase with no spaces or special characters: 'ProductDetailPage', 'UserSettingsPage', 'CheckoutSuccessPage'. FlutterFlow will automatically create the URL route as '/product-detail-page' from the PascalCase name.
Why it's a problem: Setting multiple pages as the Entry Page
How to avoid: Mark only your splash or initial loading page as the Entry Page. Use conditional navigation logic (check authentication state, onboarding completion) on that single Entry Page to route users to the appropriate screen.
Why it's a problem: Passing data by storing it in App State instead of Page Parameters
How to avoid: Use Page Parameters for data specific to one navigation event (product ID, selected item). Reserve App State only for data that needs to persist across the entire session (authentication status, user preferences, shopping cart).
Why it's a problem: Using Navigate To action for Bottom Sheet pages instead of Show Bottom Sheet
How to avoid: Always use the 'Show Bottom Sheet' action for Bottom Sheet page types and 'Show Dialog' action for Dialog page types. These use the correct Flutter presentation mechanism for each type.
Best practices
- Name all pages in PascalCase with no spaces, hyphens, or special characters to prevent routing and Dart compilation issues.
- Set only one Entry Page — use conditional redirects on that page to route users based on their authentication or onboarding state.
- Use Page Parameters (not App State) for data that belongs to a specific navigation event.
- Organize related pages with consistent naming prefixes: Auth_LoginPage, Auth_RegisterPage, Products_ListPage, Products_DetailPage — this groups them visually in the Page Selector.
- Configure responsive breakpoints on every page before launch — even if you only target mobile today, adding tablet support later is significantly harder once the app is live.
- Add a 404 page (a page named 'NotFoundPage') and configure it as the app's error route for web builds so broken URLs show a helpful message.
- Test Back button behavior on Android for every navigation flow — some Navigate To configurations create unintended navigation stacks.
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I'm building a FlutterFlow app with product listing and detail pages. Explain how FlutterFlow generates navigation code using go_router for Named Routes, how Page Parameters work in the generated Dart code, and what the difference is between pushNamed (adds to stack) and goNamed (replaces stack) for bottom navigation bar tab switching.
In my FlutterFlow project I have a ProductsListPage showing a ListView of product cards. I want tapping any card to navigate to a ProductDetailPage and show that product's data. Walk me through: creating the ProductDetailPage, adding a 'product' Page Parameter of type ProductsRecord (Firestore document), setting up the Navigate To action on the card tap, and binding the parameter data to widgets on the detail page.
Frequently asked questions
How many pages can a FlutterFlow project have?
There is no hard limit on page count in FlutterFlow, but very large projects (50+ pages) can become slow to navigate in the editor. Organize pages using the folder feature in the Page Selector to keep related pages grouped.
Can I reorder pages in the Page Selector?
Yes. Click and drag pages in the Page Selector list to reorder them. The order affects how pages are listed in the panel but does not change navigation behavior — only the Entry Page setting and your Navigate To actions control which pages users see and when.
How do I delete a page I no longer need?
Right-click the page in the Page Selector and choose 'Delete'. FlutterFlow will warn you if other pages have Navigate To actions pointing to the page you are deleting. Review those actions after deletion to prevent broken navigation.
What is the difference between a Page and a Component in FlutterFlow?
A Page is a full-screen route that occupies the entire display and is navigated to. A Component is a reusable widget group (like a card or form section) that is placed inside pages. Components do not have their own route, cannot be navigated to directly, and can be reused across multiple pages.
How do I make a page only accessible to logged-in users?
Add a Conditional action to the page's initState: check if the current user is null (using the 'Authenticated User' condition). If null, navigate to your login page using Replace Route (not Push) so the user cannot go back to the protected page with the back button.
Can I set a custom URL path for web builds?
Yes. In Page Properties, scroll to the 'Route' section and set a custom path like '/products/detail'. For pages with parameters, add route parameters using the ':paramName' syntax (e.g., '/products/:productId'). This gives your web app clean URLs for SEO and sharing.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation