Widgets
In Digia Studio, you create the design of a page using things called Widgets. These Widgets are organized into six main categories based on their functionality: Layout & Structure, Content & Display, Input & Interaction, Navigation, Scrolling, and Media & Async.
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.
For extending Digia UI with custom native Flutter components, see Custom Widgets.
What is a Widget?
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.
Widget tree
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.
Last updated