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 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 from the Page Selector tab in the Navigation Menu.
Create 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 these steps:
Create Page from 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:
Generate with Designer
You can quickly create a page with FlutterFlow Designer by describing what you want in natural language. Designer uses your description along with your project context, to build the page with relevant widgets. This is especially helpful when you're starting from scratch or prototyping ideas rapidly.
Import from Figma Frame
You can quickly turn your Figma designs into functional FlutterFlow pages using Import from Figma. Simply provide a Figma Frame URL, and FlutterFlow AI will analyze the design and generate a UI layout that closely matches your mockup.
To get started, first connect your Figma account. Then, when creating a new page, select Import from Figma from the available options. Paste the Figma Frame URL and click Import.
FlutterFlow will display a preview of the selected frame. Review the preview, then click Generate to create the page. Once completed, the page will appear in the AI Generation History, where you can preview and add it to your project.
Currently, FlutterFlow doesn't support importing SVG elements from Figma frames. However, you can manually add the SVGs directly to your project assets after generation is complete, or replace them in Figma with supported image formats like PNG or JPEG.