Widgets
Last updated
Last updated
In Digia Studio, you create the design of a page using things called Widgets. These Widgets are divided into four main types: Layout Widgets, Base Widgets, and Page Widgets.
Some Widgets like Text, Buttons and Images can be seen on the screen. Others, like Containers, Rows, and Columns, are not visible, but they help in putting everything in the right place on the page.
To build a page, you pick and combine different widgets from these groups. It's like putting together building blocks to create the look and feel of your app. By using these widgets in the right way, you can make the app look just the way you want it to.
Widgets are essential in creating the user interface of your app. On this page, you will learn what is a widget, Widget tree, how to work with them, and how to use widget properties.
In Digia Studio, 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.
Text, Row, Column, and Container are the most basic types of widgets. You will learn about using them to build a layout here.
When you put widgets together or place them inside another widget, they create something called a "Widget Tree." This tree can be found in the Pages and Widget Panel on the left side of your screen. It shows how many widgets are on a page and how they're connected (as a parent-child relationship). This helps you understand your app's structure and how things fit together visually.
As the complexity of a UI increases, the widget tree tends to become longer and deeper, making it challenging to locate specific widgets.
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's how 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:
Select the Widget Tree from the Widget Tree Panel (left side of your screen).
Search or select the desired widget from the popup. This will add a new widget to the widget tree and will be implemented for the canvas.
Select the widget under which you would like to add a new widget and click on the Add Widget icon ().
