Centered Box

The Goal

One of the most frequently used layouts is a centered box. Any situation requiring showing information in the middle of the screen must follow this procedure.

Typical example of a centered box component

What We Are Going to Do

Project Structure

• View[centeredBox]

  • Container[container1]

    • Box[box1]

View[centeredBox]

1. Create a Centered Box

Preparation of a centered box is easy and intuitive, taking just a few steps.

1. Create a new View called it centeredBox.

2. Place in a new Container, name it container1,and set up properties as follows:

   1. Horizontal Alignment -> Center; Vertical Alignment -> Middle

   2. The Item Flex has to be set up on Stretch, and the rest of the responsive screens setting is Inherit from the base.

   3. Optionally, you can define Padding and Spacing attributes to Medium, for further use.

3. Put in a new Box, and name it box1.

   1. Configure its Layout properties as Background -> WHITE; Border Color -> GRAY; Border Width -> 2px; Border Radius -> 10px; Shadow -> Large

   2. Both of Width and Height are 350px for the Base and Large Screens; It can be acceptable even for Tablet setting, but Phone Screen looks better on 250px.

The Base and Large Screen 350px

The Phone Screen 250px

The Conclusion

Always remember that any layout properties have to be adapted to different screen types. Of course, unless we are developing just desktop or cell phone applications.