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 a parent-child relationship.
Page layout built using widgets
When you combine multiple widgets or nest them into another widget, they form 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 a widget on the canvas, the corresponding widget is automatically highlighted and selected in the widget tree. If the widget is located outside the visible area of the widget tree, it automatically scrolls down to reveal its location.
However, there might be situations where you prefer to prevent the widget tree from scrolling and simply focus on selecting the widget. To achieve this, you can click on the lock icon present in the widget tree, which allows you to select the widget without triggering any scrolling behavior.
Lock widget tree scrolling
While constructing your page, you may find yourself switching back and forth between the Pages and Widget Tree views frequently. To enhance your workflow, we provide the ability to stack both views together, eliminating the need to switch tabs. This consolidated view allows you to simultaneously see the Pages and Widget Tree, facilitating seamless navigation and editing.
Additionally, you can adjust the size of each view using the handle to accommodate your preferred layout.
Stack Pages and Widget Tree views
Types of widgets you can add to your page.
- 1.
- 2.
- 3.
- 4.
In this section, you will learn how to add & remove widgets and what you can do with them.
You can build the UI by adding different widgets to the canvas. Here are some ways you can add widgets:
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 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 UI builder:
- 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
- 1.Open the floating widget from the canvas.
- 2.Search or select the widget from the list, and then drag and drop it at a suitable place into the canvas area.
Add widgets from floating widget palette
When you add widgets, they are automatically assigned default names based on their widget type. For instance, a Text widget would be named "Text," a TextField widget would be named "TextField," and so on.
However, when you have multiple widgets of the same type, it can become confusing to select the correct widget, particularly when connecting them to data. To avoid confusion, it is advisable to rename the widgets with more recognizable and descriptive names, making it easier to identify and manage them effectively.
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 current 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 the 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 topmost 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 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
Drag to resize
This section will teach you how to copy-paste, duplicate, wrap, replace widgets, and more.
To enhance the speed of building the UI, you have the convenient options of cutting, copying, and pasting widgets. Simply select the desired widget from either the widget tree or the canvas area. Next, right-click on the widget and choose the appropriate action: cut, copy, or paste.
Cut, copy, and paste the widget
To delete the widget, right-click on the widget from the widget tree or the canvas area and press the Delete icon.
Delete widget
To effortlessly create a replica of a widget without the need for copy-pasting the entire widget, you can utilize the convenient duplicate widget option. This feature lets you quickly generate an identical copy of an existing widget positioned below or next to the original widget.
To duplicate a widget, select the desired widget from either the widget tree or the canvas area. Next, right-click on the widget and choose the Duplicate option from the menu.
Duplicate 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
This feature allows you to quickly replace an existing widget with another widget without manually removing and adding the widgets.
For example, 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.
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 the code snippet of a selected widget 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
When you encounter an issue with any widget, you should submit a bug report. While you do so, you'll have to send us the bug report code, which you can get by right-clicking on a widget and selecting the Get Bug Report Code. This provides us the detailed information for troubleshooting and resolving the issue effectively.
Get bug report code
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 Create 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 to component
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.
Save as template
- 1.Select the widget from the widget tree or the canvas area.
- 2.Right-click and select the Save as Theme Style Widget option. This will open a popup.
- 3.Enter the Theme Widget Name and click on Create Style.
- 4.To see the newly created theme widget, navigate to Theme Settings > Theme Widgets.
Save as theme style widget
Last modified 14d ago