This property changes an element’s position on the screen adding space on its top
, right
, bottom
, left
, vertical
, horizontal
e all
sides, which are also the property’s values. It rearranges this element’s position, but other surrounding components are not affected when a relative Position Type
is set.
The element being positioned can have 2 positioning types:
Relative
: The element moves and other elements keeps their current positions on the screen.Absolute
: The element moves exactly like the ´Relative´ one, however other elements rearrange themselves ignoring its position.It adds spacing for all element’s sides:
private fun screen() :Widget{
return Container(
children = listOf(
createText(backgroundText = "#142850", text = "1")
.setStyle {
position = EdgeValue(all = UnitValue.real(50))
},
createText(backgroundText = "#dd7631", text = "2"),
createText(backgroundText = "#649d66", text = "3")
)
).setFlex {
grow = 1.0
flexDirection = FlexDirection.ROW
justifyContent = JustifyContent.CENTER
alignItems = AlignItems.CENTER
}
}
private func screen() -> Screen {
return
Screen(
navigationBar: NavigationBar(title: "Flex"),
child:
Container(children: [
createText(backgroundColor: "#142850",text: "1").applyFlex(
Flex()
.size(Size().width(50).height(50))
.position(EdgeValue().all(50))),
createText(backgroundColor: "#dd7631",text: "2"),
createText(backgroundColor: "#649d66",text: "3")
],widgetProperties: WidgetProperties(
flex: Flex()
.grow(1)
.flexDirection(.row)
.justifyContent(.center)
.alignItems(.center)
)
)
)
}
It adds spacing at the element’s bottom:
private fun screen() :Widget{
return Container(
children = listOf(
createText(backgroundText = "#142850", text = "1")
.setStyle {
position = EdgeValue(bottom = UnitValue.real(50))
},
createText(backgroundText = "#dd7631", text = "2"),
createText(backgroundText = "#649d66", text = "3")
)
).setFlex {
grow = 1.0
flexDirection = FlexDirection.ROW
justifyContent = JustifyContent.CENTER
alignItems = AlignItems.CENTER
}
}
private func screen() -> Screen {
return
Screen(
navigationBar: NavigationBar(title: "Flex"),
child:
Container(children: [
createText(backgroundColor: "#142850",text: "1").applyFlex(
Flex()
.size(Size().width(50).height(50))
.position(EdgeValue().bottom(50))),
createText(backgroundColor: "#dd7631",text: "2"),
createText(backgroundColor: "#649d66",text: "3")
],widgetProperties: WidgetProperties(
flex: Flex()
.grow(1)
.flexDirection(.row)
.justifyContent(.center)
.alignItems(.center)
)
)
)
}
It adds spacing at the element’s left side:
private fun screen() :Widget{
return Container(
children = listOf(
createText(backgroundText = "#142850", text = "1")
.setStyle {
position = EdgeValue(left = UnitValue.real(50))
},
createText(backgroundText = "#dd7631", text = "2"),
createText(backgroundText = "#649d66", text = "3")
)
).setFlex {
grow = 1.0
flexDirection = FlexDirection.ROW
justifyContent = JustifyContent.CENTER
alignItems = AlignItems.CENTER
}
}
private func screen() -> Screen {
return
Screen(
navigationBar: NavigationBar(title: "Flex"),
child:
Container(children: [
createText(backgroundColor: "#142850",text: "1").applyFlex(
Flex()
.size(Size().width(50).height(50))
.position(EdgeValue().left(150))),
createText(backgroundColor: "#dd7631",text: "2"),
createText(backgroundColor: "#649d66",text: "3")
],widgetProperties: WidgetProperties(
flex: Flex()
.grow(1)
.flexDirection(.row)
.justifyContent(.center)
.alignItems(.center)
)
)
)
}
It adds spacing at the element’s right side:
private fun screen() :Widget{
return Container(
children = listOf(
createText(backgroundText = "#142850", text = "1")
.setStyle {
position = EdgeValue(right = UnitValue.real(50))
},
createText(backgroundText = "#dd7631", text = "2"),
createText(backgroundText = "#649d66", text = "3")
)
).setFlex {
grow = 1.0
flexDirection = FlexDirection.ROW
justifyContent = JustifyContent.CENTER
alignItems = AlignItems.CENTER
}
}
private func screen() -> Screen {
return
Screen(
navigationBar: NavigationBar(title: "Flex"),
child:
Container(children: [
createText(backgroundColor: "#142850",text: "1").applyFlex(
Flex()
.size(Size().width(50).height(50))
.position(EdgeValue().right(100))),
createText(backgroundColor: "#dd7631",text: "2"),
createText(backgroundColor: "#649d66",text: "3")
],widgetProperties: WidgetProperties(
flex: Flex()
.grow(1)
.flexDirection(.row)
.justifyContent(.center)
.alignItems(.center)
)
)
)
}
It adds spacing at the element’s top side:
private fun screen() :Widget{
return Container(
children = listOf(
createText(backgroundText = "#142850", text = "1")
.setStyle {
position = EdgeValue(top = UnitValue.real(50))
},
createText(backgroundText = "#dd7631", text = "2"),
createText(backgroundText = "#649d66", text = "3")
)
).setFlex {
grow = 1.0
flexDirection = FlexDirection.ROW
justifyContent = JustifyContent.CENTER
alignItems = AlignItems.CENTER
}
}
private func screen() -> Screen {
return
Screen(
navigationBar: NavigationBar(title: "Flex"),
child:
Container(children: [
createText(backgroundColor: "#142850",text: "1").applyFlex(
Flex()
.size(Size().width(50).height(50))
.position(EdgeValue().top(100))),
createText(backgroundColor: "#dd7631",text: "2"),
createText(backgroundColor: "#649d66",text: "3")
],widgetProperties: WidgetProperties(
flex: Flex()
.grow(1)
.flexDirection(.row)
.justifyContent(.center)
.alignItems(.center)
)
)
)
}
It adds spacing at the element’s horizontal sides:
private fun screen() :Widget{
return Container(
children = listOf(
createText(backgroundText = "#142850", text = "1")
.setStyle {
position = EdgeValue(horizontal = UnitValue.real(50))
},
createText(backgroundText = "#dd7631", text = "2"),
createText(backgroundText = "#649d66", text = "3")
)
).setFlex {
grow = 1.0
flexDirection = FlexDirection.ROW
justifyContent = JustifyContent.CENTER
alignItems = AlignItems.CENTER
}
}
private func screen() -> Screen {
return
Screen(
navigationBar: NavigationBar(title: "Flex"),
child:
Container(children: [
createText(backgroundColor: "#142850",text: "1").applyFlex(
Flex()
.size(Size().width(50).height(50))
.position(EdgeValue().horizontal(150))),
createText(backgroundColor: "#dd7631",text: "2"),
createText(backgroundColor: "#649d66",text: "3")
],widgetProperties: WidgetProperties(
flex: Flex()
.grow(1)
.flexDirection(.row)
.justifyContent(.center)
.alignItems(.center)
)
)
)
}
It adds spacing at the element’s vertical sides:
private fun screen() :Widget{
return Container(
children = listOf(
createText(backgroundText = "#142850", text = "1")
.setStyle {
position = EdgeValue(vertical = UnitValue.real(50))
},
createText(backgroundText = "#dd7631", text = "2"),
createText(backgroundText = "#649d66", text = "3")
)
).setFlex {
grow = 1.0
flexDirection = FlexDirection.ROW
justifyContent = JustifyContent.CENTER
alignItems = AlignItems.CENTER
}
}
private func screen() -> Screen {
return
Screen(
navigationBar: NavigationBar(title: "Flex"),
child:
Container(children: [
createText(backgroundColor: "#142850",text: "1").applyFlex(
Flex()
.size(Size().width(50).height(50))
.position(EdgeValue().vertical(150))),
createText(backgroundColor: "#dd7631",text: "2"),
createText(backgroundColor: "#649d66",text: "3")
],widgetProperties: WidgetProperties(
flex: Flex()
.grow(1)
.flexDirection(.row)
.justifyContent(.center)
.alignItems(.center)
)
)
)
}
For more information about Position, check out the Yoga Layout documentation.
Was this page helpful?
Glad to hear it! Please tell us how we can improve.
Sorry to hear that. Please tell us how we can improve.