Create Responsive Code
In this section, we will talk about how to create a responsive code on Monday Hero and edit it.
Adding Responsive Layout
Why Use It?
When you have created a mobile app, users with different devices should experience similar things. Your app needs to respond to various screen sizes and adapt itself according to the changes. Otherwise, you may encounter overlapping components and overflow errors which cause an unpleasant user experience.
Coding responsive apps require rough calculations and long testings on different device sizes. Sometimes managing this process can be challenging and prone to errors. Fortunately, Monday Hero handles it automatically and creates apps that fit every device perfectly.
Using 'Make Responsive Layout' Button
Click the 'Widget Tree' item in the menu at the left of the screen and open the 'Make Responsive Layout' feature. With this magical button, Monday Hero guesses Rows, Columns and Stacks for you and makes the necessary arrangements to make your app ready to use on different screen sizes. If you like to edit it, you can always edit or create it manually.
Using Multi-Child Layout Widgets
You can arrange items by using multi-child layout widgets in Flutter. These widgets get multiple items as a list in their 'children' property and arrange them in the list order. Row, column, and stack are the most used examples.
Row
Row is a widget that displays its children in a horizontal array. Here is an example showing how to group multiple widgets in a row:
Column
Column is a widget that displays its children in a vertical array. Here is an example showing how to group multiple widgets in a column:
Row and column widgets align their children according to the MainAxisAlignment and CrossAxisAlignment properties as shown below.
In a column, MainAxisAlignment aligns its children vertically and CrossAxisAlignment aligns its children horizontally.
In a row, MainAxisAlignment aligns its children horizontally and CrossAxisAlignment aligns its children vertically.
MainAxisAlignment and CrossAxisAlignment have the ability to align children according to the following properties:
Start: Place the children from the start of the widget
End: Place the children from the end of the widget
Center: Place the children at the center of the widget.
Space Between: Place the space evenly between the children.
Space Around: Place the space evenly between the children. Allocates half of that space before the first child and after the last child.
Space Evenly: Place the space evenly between, before, and after each child.
You can change alignment properties while grouping the UI items on Monday Hero.
Stack
Stack positions its children relative to the edges of its box. It is useful to overlap several children in a simple way, like mixing texts, images, and buttons. Here is an example showing how to group multiple widgets in a stack:
Last updated
