Stretched Layout in Row

The Goal

Design a Stretched Layout in one row, containing Text and Menu Button components.

One Row Stretched Layout Application

The Description

Any components sorting in rows can have their Item Flex properties; if it's required to have components responsively on both sides, the middle one has to be stretched.

The Knowledge You Will Get

1. How to set up Stretched Layout.

The Project Structure

View[MainView]

• MainView

  • Container[cntMain]

    • Container[cntRow]

      • Text[text1]

      • Spacer[spacer1]

      • Menu Button[menuButton1]

1. Desing a Stretched Layout

Stretched Layout will be separated into two Containers; one would be stretched as a Main; the second would be stretched as a Row.

1. Place in a new Container, name it cntMain, and set up its Item Flex -> Stretched; Padding -> X-Wide

2. Place in a second Container with the following setup: ID -> cntRow; Flow -> Into row; Vertical Alignment -> Middle

3. Into cntRow place three following components, keep their IDs, and configure them properly:

   1. Text -> Item Flex -> None; Value -> "Some Text Here"; Font Size -> Medium

   2. Spacer -> Item Flex -> Stretched; Foreground -> TRANSPARENT

   3. Menu Button -> Item Flex -> None; Font Size -> Medium

The Conclusion

Stretching Layout components need some practice to understand. If more than two stretched layouts are in a one-parent, they would split their space between them.

Follow up on our Stretched Layout in Row tutorial https://youtu.be/lnVZCyJBwhw