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 'Make Responsive Layout' feature

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:
Adding rows

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:
Adding columns
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.
Main Axis and Cross Axis Properties of Row and Column
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.
Setting Main Axis and Cross Axis properties
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:
Adding stack
Copy link
On this page
Adding Responsive Layout
Using 'Make Responsive Layout' Button
Using Multi-Child Layout Widgets