Introduction to Pages
In FlutterFlow, a Page represents a single screen in your app. Under-the-hood pages use a Scaffold, a foundational widget from Flutter that provides a structured layout for a screen within your app. The Scaffold offers essential elements like the AppBar and Body, allowing you to easily build screens.
Pages are composed of various UI elements, or widgets. Widgets are added to a page when they are added to the page's Widget Tree.
The Widget Tree is a structural representation of how widgets are organized within a Page. To learn more, check out the Widget Overview documentation.
In FlutterFlow, pages are automatically configured to handle routing. Additionally, pages can have input parameters and state variables.
For more details on how to use Scaffold and the various Page Elements in FlutterFlow, see the dedicated Page Elements guide.
Creating a Page
In FlutterFlow, you can seamlessly craft a page tailored to your needs and design preferences. Whether you're starting from scratch, using a template, or leveraging AI tools, there are several pathways to achieve the desired functionality and aesthetic of your desired Page.
When you create a page in FlutterFlow, a Widget class and a corresponding Model class are automatically generated. You can view these in the Code Viewer. To explore the details of the generated Model class, take a closer look at the code.
FlutterFlow allows you to easily create new pages using the Add Page, Component, or Flow button, which is available from the Page Selector tab in the Navgation Menu. This will help you quickly start and add new pages to your app.
Create an empty page
When creating your page in FlutterFlow, one option is to start with an empty page, providing you with a blank canvas. This approach allows you to build your UI from the ground up by composing widgets and components together according to your specific design vision and functional requirements.
To create an empty FlutterFlow Page from scratch, follow the steps:
Create a page from a popular template
FlutterFlow simplifies the process of page creation by offering a variety of popular template use cases. These templates provide a basic structure for your pages, which you can quickly customize with your own styling, widgets, and text.
To utilize a template from FlutterFlow, follow these steps:
Create an AI generated page
FlutterFlow's AI Gen feature allows you to generate various elements, including pages, from a prompt. This can be particularly useful when you're unsure where to start. Once the page is generated, you can preview it with different color schemes, in both light and dark themes, and add new UI elements as desired.
To create an AI Generated page, follow the steps: