Introduction to Pages
In FlutterFlow, each Page you create is fundamentally structured using a Scaffold, a foundational widget from Flutter that provides a structured layout for your app. The Scaffold offers essential elements like the AppBar, Floating Action Button (FAB), Drawer, and Body, allowing you to easily organize and design your pages.
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 craft a page tailored to your expertise, design preferences, or specific use case needs. 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.
FlutterFlow allows you to easily create new pages using the Page Selector button, which is available in the Widget Tree menu (Tab+2). This will help you quickly start and add new pages to your app.
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.
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: