There is a markup language for Flutter called SpWML (Simple Widget Markup Language). The specifications of SpWML are as follows. Please consider this specification when answering the following questions. # Basic structure of SpWML (type, parameter1 : value1, parameter2 : value2, ...) content text # Escape sequence of SpWML If the parameter value contains spaces, a backslash is required before each space. # Among the elements that can be set to type, an element that can store child elements is called a container. There are two types of containers. ## Single element container. Can have only one child element. - block : a container that can later be replaced with Flutter's widgets. It can also be used to set the background color of child elements. - scroll : A container that allows the element to scroll within the screen. Place elements that may exceed the screen size here. ## Multi-element container. Can have multiple child elements. - col : Used when you want to arrange child elements vertically. - row : Used when you want to arrange child elements horizontally. - span : similar to row, but used when changing text color within a row. - stack : A container whose contents overlap in the z-axis direction. Child elements are laid out in order, with the first one at the bottom and one above the other. - wrap : A container that automatically aligns child elements inside according to the width of the screen. It is like a so-called card view, and child elements that fit within its own width are automatically placed on one line, and elements that exceed the width are automatically placed on the next line. # Normal button. Of the elements that can be set to type, those related to user actions are called buttons. - btn : A normal button, you can change the appearance by setting the keyword type in the parameter. Note that the type here refers to the subtype, not the element. The button text is assigned the content text. ## Set button type - (btn) : no type setting. It becomes a text-only button. - (btn, type:outlined) : Button with outline. - (btn, type:elevated) : 3D button. # switch - switchBtn : Button for switch to set ON or OFF. It cannot have child elements. # button with child elements - checkbox : A checkbox with multiple child elements, each of which is a multi-select selection item. - radioBtn : A radio button with multiple child elements each of which is a single-choice selection item. - dropdownBtn : A button with multiple child elements each of which is a dropdown menu. Other button child elements basically use menu. ## Example with dropdownBtn (dropdownBtn) +(menu)menu1 +(menu)menu2 +(menu)menu3 # Text-related elements. Cannot have child elements. - text : general text element. - tf : Text field for user input. To write placeholders (labelText) and hints, specify parameters as follows. (tf, labelText: content of hint) (tf, hint: contents of hint) # Other elements. Cannot have child elements. - icon : Element for icon display. - img : Element for image display. - line : an element that draws a horizontal line. - vline : An element that draws a line vertically. # Indentation for hierarchical structure Containers can have child elements, and child elements are indented with a + mark. ## Single element containers block and scroll can have child elements. ### Example with singular child element (block) +(text) text content ## Containers other than block and scroll can have multiple child elements. ### Example with multiple child elements. (col) +(col) ++(text) 1st line of 1st line. ++(text) 2nd line of 1st line. ++(text) 3rd line of 1st line. +(row) ++(text) 1st column of 2nd line. ++(text) 2nd column of 2nd line. ++(text) 3rd column of 2nd line. ## Can adjust the alignment direction of child elements of col and row. - vAlign : Vertical alignment. Can be top, center, or bottom. - hAlign : Horizontal alignment. Can be left, center or right. # element size A setting for the size of the element that can be set for all elements. - w : width. Units are relative pixels. Specify Infinity to maximize to the same width as the parent element. % and auto are not allowed and must always be numeric. - h : Height. Units are relative pixels. Specify Infinity to maximize to the same height as the parent element. % and auto are not allowed and must always be numeric. # Ratio of elements in screen If set, the size of col or row's inner child elements can be set proportionally. - wt : Write the numerical value of the ratio. ## An example of setting the vertical element proportionally. In the following, the height of the three lines becomes 1:2:1. (col) +(text, wt:1) line 1 +(text, wt:2) second line +(text, wt:1) 3rd line ## An example of setting the horizontal element in proportion. Below, the width of the three columns is 1:2:1. (row) +(text, wt:1) 1st column +(text, wt:2) second column +(text, wt:1) 3rd column ## If you want to fill horizontal margins. Below, there is 300px wide text on the left, and the text on the right is sized to include all the white space on the right. (row) +(text, w:300) left text +(text, wt:1) right text ## Display in full screen. If you set wt:1 on the first container element like below, the height of the container will be maximized to the height of the screen. (row, wt: 1) +(text) 1st column +(text) second column # Margin Margins move the element you set that amount relative to other elements. Margins are valid for all elements, and there are four types of parameters. None can be auto and must always be numeric. - mL : left margin. Units are relative pixels. - mT : top margin. Units are relative pixels. - mR : right margin. Units are relative pixels. - mB : bottom margin. Units are relative pixels. - mAll : Batch specification of margins in all directions. ## Usage example. I have a margin of 12 pixels to the left and 24 pixels above the text. (text, mL:12, mT:24) Text content. # Padding Padding shifts the position of child elements of the set element in relative pixels. Padding is valid for all elements, and there are 4 types of parameters. None can be auto and must always be numeric. - pL : Left padding. Units are relative pixels. - pT : Top padding. Units are relative pixels. - pR : Right padding. Units are relative pixels. - pB : bottom padding. Units are relative pixels. - pAll : All-direction padding all at once. ## Usage example. We are padding the container with 12 pixels to the top and 12 pixels to the left. (col, pL:12, pT:12) +(text) Text content. # background color Background color settings available for the container. Set the bgColor parameter in hexadecimal notation as follows. (col) +(block, bgColor:#FF9800, w:100, h:100) # font size and font color For text elements, button elements, etc., you can set the font size (character size) and font color as follows. Below it is 12 pixels and I have set a blue font. (text, fontSize: 12, textColor: #007BFF) # font weight and typeface You can set font weight and italic for text elements, button elements, etc. The font thickness has the following variations, and the larger the number, the thicker the font. Also, the regular size that is often used is 400. 100, 200, 300, 400, 500, 600, 700, 800, 900. In the example below, the font is set to 300, thinner than normal, and italic. (text, fontWeight: 300, fontStyle: italic) # the sid of the element Elements in SpWML can be assigned sids. This is to allow programmers to manipulate it from the Dart language. sid is a unique id set as a string, and for elements that respond to user actions such as buttons, use sid as follows. (btn, type:elevated, sid:name_of_the_user_action_etc)