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.
What We Are Going to Do
1. Create a Centered Box
Preparation of a centered box is easy and intuitive, taking just a few steps.
Create a new View called it
centeredBox
.Place in a new Container, name it
container1,
and set up properties as follows:Horizontal Alignment ->
Center
; Vertical Alignment ->Middle
The Item Flex has to be set up on
Stretch
, and the rest of the responsive screens setting isInherit from the base
.Optionally, you can define Padding and Spacing attributes to
Medium
, for further use.
Put in a new Box, and name it
box1
.Configure its Layout properties as Background ->
WHITE
; Border Color ->GRAY
; Border Width ->2px
; Border Radius ->10px
; Shadow ->Large
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 on250px
.
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.
Last updated