Widgets/UI Elements
Widgets are essential in creating the user interface of your app. On this page, you will learn what is widget, its types, how to work with them, and how to use widget options.
In FlutterFlow, The widget is the UI element that helps you build the layout of your page. Almost everything that you see on the page is a widget. You build the UI by combining the widgets in parent-child relationships.
Page layout built using widgets
When you combine multiple widgets or nest them into another widget, they form something called a widget tree. You can access the widget tree from the navigation menu (left side of your screen). It gives you a better idea of how many widgets are added to a page and how they are added (knowing the parent or child of any widget).
Widget tree
When you select any widget on canvas, the same widget also gets selected in the widget tree. If required the widget tree also scrolls down to the widget location in the widget tree. Sometimes, you might want to stop this widget tree scrolling and only select the widget. You can do so by clicking the lock icon in the widget tree.
Lock widget tree scrolling
While building your page, you might switch between the pages and widget tree views frequently. We now allow you to stack both views so that you don't need to switch the tabs and see pages and widget tree, all in one view. Using the handle, you can also resize the view if you wish to.
Stack Pages and Widget Tree views
There are three main types of widgets you can add to your page.
- 1.
- 2.
- 3.
Standard widgets are the building blocks in creating the UI of your page. Every standard widget serves a purpose. Some widgets are only used to create the layout and are not visible on the screen. In contrast, some widgets are visible and are used to display something on the screen, accept input from users, or allow users to take action.
Standard widgets are accessible from the Widgets tab inside the UI Builder.
Based on their responsibility and usage, they are sorted into five following categories:
Standard widgets
Custom widgets include the widgets that you created out of the standard widgets (called components) and the custom code widgets that you added from the pub.dev. A custom widget can be a fully featured widget and is ready to be used anywhere inside your app.
- Standard widgets are accessible from the Components tab inside the UI Builder.
Custom widgets
Templates widgets are predefined and ready-to-use widgets. This includes the UI elements that are very common in most apps and can serve as the starting point in creating the part of the user interface. You can also create your own template from the standard widget.
- Standard widgets are accessible from the Templates tab inside the UI Builder.
- Template widgets are shared across all the FlutterFlow projects.
Template widgets
In this section, you will learn how to add & remove widgets and what you can do with them. Also, how to move, reorder, and rename the widgets.
You can build the UI by adding different widgets to the canvas. You can add the widgets in two ways:
The widget tree shows a list of all the widgets added to a page. But that's not all. You can also add the new widgets (as a child widget) directly from the widget tree.
To add the widget from the widget tree:
- 1.Select the Widget Tree from the Navigation Menu (left side of your screen).
- 2.Select the widget under which you would like to add a new widget and click on the add widget icon ().
- 3.Search or select the desired widget from the popup. This will add a new widget to the widget tree and will appear on the canvas.
Adding widget from the widget tree
To add widgets from the widget panel:
- 1.Select the UI Builder from the Navigation Menu (left side of your screen).
- 2.Search or select the widget from the list, and then drag and drop it at a suitable place into the canvas area.
If you see a popup while dropping the widget, you can select the widget under which you would like to add a new widget.
Adding widget from the widget panel
When you add widgets, they are given the widget name by default. For example, if you add a Text widget, its name would be Text. For the TextField widget, it would be TextField, and so on. If you have multiple such widgets, it may create confusion in selecting the correct widget, especially while connecting them with the data. Hence it's always a good idea to rename widgets to easily recognizable names.
To rename a widget:
- 1.Select a widget from the widget tree or the canvas area.
- 2.Move to the properties panel on the right side of your screen.
- 3.Find the existing widget name and click on the edit icon ().
- 4.Enter the new name and click on the done icon ().
Renaming widgets
You can change the appearance and behavior of the widget by modifying its properties from the properties panel. This includes customizing widget, adding actions, adding backend queries, generating dynamic children, and adding animations. These properties vary based on the widget you have added.
While building the UI, you might want to move a widget to another location; For example, take it outside of its parent widget, and make it a child of another, swap its position, etc. You can move or rearrange the widgets inside the widget tree and the canvas area.
To move the widget in widget tree, select the widget, drag it upwards or downwards and drop it at the desired location.
Moving widgets in widget tree
To move the widget in the canvas area, select a widget, drag it to the desired location and drop it there. A blue line will show up when you drag the widget to indicate where it will be placed.
Moving widgets in the canvas area
The color of the bar indicates how the widget will be added.
- If you see an orange line, the target widget can accept the child widget. If you drop it there, the current widget will be placed as a child of the target widget.
- If you hold on for a couple of seconds, you'll see a purple line that means the current widget will be placed below/next to the target widget.
Moving widgets-2
You might add many widgets to your page, which may overwhelm you. To overcome this, you can always collapse or expand the widgets in the widget tree. You can use this feature to stay focused on building the specific part of the UI.
To collapse or expand the specific widget, use the arrow icon (right side of the widget name). To collapse or expand all the widgets together, use the collapse/expand view icon at the top right side of the widget tree.
Collapse/Expand widgets
Sometimes you might want to see the widget hierarchy that shows all the parent widgets till the top most widget in the widget tree. Viewing the widget hierarchy gives you an idea of how the UI is structured.
To view the widget hierarchy, select the widget from the canvas area and click on the green-colored box showing the widget name. You can also select a particular widget by clicking on its name.
View widget hierarchy
There's a good chance that in the future, you'll forget how or why a specific widget was added. Additionally, if you are a part of a team, other builders may be interested in learning more about a widget's presence/working, particularly if it is a custom widget.
By documenting a widget, you may assist future you and others in remembering why it was included and learn more about the widget. It helps you to make any change with confidence and ultimately produces fewer bugs.
To document a widget, select the widget, move to the properties panel (right side), tap the document icon (
), provide the description, and save it.
We will add the documentation inside the code as a comment.
Add widget documentation
To read the widget documentation inside the builder, open the widget tree and tap the document icon (). You can also view code to see the documentation inside the code.
Read widget documentation from widget tree
Read widget documentation inside the code
To remove the widget, select the widget from the widget tree or the canvas area and press the Backspace or Delete key on the keyboard.
Removing widget
To give you better control over sizing the widget, we allow you to resize the widget, such as Container and Image, directly inside the canvas. Simply select the widget and use the handles to resize it.
Drag to resize
In this section, you will learn how to copy-paste, duplicate, wrap, replace widgets, and more.
You can cut, copy and paste the widgets to speed up building the UI. To do so, select the widget from the widget tree or canvas area, right-click, and select the cut, copy or paste option.
Cut, Copy, Paste widget
To create a replica of any widget, you can use the duplicate widget option instead of copy-pasting the entire widget. The new widget (replica of the existing widget) will be created below/next existing widget.
To duplicate a widget, select the widget from the widget tree or the canvas area, right-click, and select the Duplicate option.
Duplicating widget
Using the wrap widget option, you can add the parent widget to the current widget. This is the opposite of adding a widget (where you add child widgets). This is useful when you want to add the widgets in between at a later stage—for example, wrapping the TextField widgets inside the Form widget after building the UI.
To wrap a widget:
- 1.Select the widget from the widget tree or the canvas area.
- 2.Right-click, and select the Wrap Widget option. This will open a popup.
- 3.Select the widget under which you would like to wrap the current widget.
Wrap widget
When you have a list of items in a scrollable view (e.g., Column, Row, ListView) and want to replace it with another scrollable view, you can use the replace widget option. The widgets you can replace are Column, Row, Wrap, ListView, GridView, and StaggeredView.
Applying this option may cause an error depending on the layout of your page.
To replace a widget:
- 1.Select the widget from the widget tree or the canvas area.
- 2.Right-click, and select the Replace Widget option. This will open a popup.
- 3.Select the widget you would like to replace with.
Replace widget
You can use this option to copy any part of your UI (built in FlutterFlow) and try it out on your local IDE or any other online code editor.
To copy the widget code:
- 1.Select the widget from the widget tree or the canvas area.
- 2.Right-click and select the Copy Widget Code option.
- 3.Open your IDE or online editor and paste the code at the desired location.
Copy widget code
We offer you a wide variety of ready-to-use widgets as a template, but you can also create your own by saving the widget as a template.
To save to the widget as a template:
- 1.Select the widget from the widget tree or the canvas area.
- 2.Right-click and select the Save as Template option. This will open a popup.
- 3.Enter the Template Name and click on the Save Template.
- 4.To see the newly created template, select the UI Builder from the navigation menu and select the Templates tab. Your template will appear inside the My templates section.
Saving widget as a template
Components are the reusable elements that you can create out of any widget in your project.
To convert the widget into a component:
- 1.Select the widget from the widget tree or the canvas area.
- 2.Right-click and select the Convert to Component option. This will open a popup.
- 3.Enter the component name and click on the + Add Component.
- 4.To see the newly created component, select the UI Builder from the navigation menu and select the Components tab. Your component will appear inside the Custom Components section.
Convert widget to component
Last modified 3mo ago