Beagle v1.5 is no longer actively maintained. The documented version you are viewing may contain deprecated functionality. For up-to-date documentation, see the latest version .
This property defines an element’s position on screen and its values are: top, right, bottom,left
. They behave according to the Position Type
of this element.
The element inside the Position can have 2 types of positioning:
Relative
: Elements move in a specific direction respecting each other boundaries.Absolute
: The elements move in the same direction defined by the parent element.It sets the same value for all positions:
private fun screen() :Widget{
return Container(
children = listOf(
createText(backgroundColor = "#142850", text = "1").applyFlex(
Flex(
size = Size(width = 50.unitReal(),height = 50.unitReal()),
position = EdgeValue(all = 50.unitReal())
)
),
createText(backgroundColor = "#dd7631", text = "2"),
createText(backgroundColor = "#649d66", text = "3")
)
).applyFlex(
Flex(
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 sets a spacing at the bottom of an element:
private fun screen() :Widget{
return Container(
children = listOf(
createText(backgroundColor = "#142850", text = "1").applyFlex(
Flex(
size = Size(width = 50.unitReal(),height = 50.unitReal()),
position = EdgeValue(bottom = 50.unitReal())
)
),
createText(backgroundColor = "#dd7631", text = "2"),
createText(backgroundColor = "#649d66", text = "3")
)
).applyFlex(
Flex(
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 defines a spacing on the left side of an element:
private fun screen() :Widget{
return Container(
children = listOf(
createText(backgroundColor = "#142850", text = "1").applyFlex(
Flex(
size = Size(width = 50.unitReal(),height = 50.unitReal()),
position = EdgeValue(left = 150.unitReal())
)
),
createText(backgroundColor = "#dd7631", text = "2"),
createText(backgroundColor = "#649d66", text = "3")
)
).applyFlex(
Flex(
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 defines a spacing on the right side of an element:
private fun screen() :Widget{
return Container(
children = listOf(
createText(backgroundColor = "#142850", text = "1").applyFlex(
Flex(
size = Size(width = 50.unitReal(),height = 50.unitReal()),
position = EdgeValue(right = 100.unitReal())
)
),
createText(backgroundColor = "#dd7631", text = "2"),
createText(backgroundColor = "#649d66", text = "3")
)
).applyFlex(
Flex(
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 defines a spacing on the top of an element:
private fun screen() :Widget{
return Container(
children = listOf(
createText(backgroundColor = "#142850", text = "1").applyFlex(
Flex(
size = Size(width = 50.unitReal(),height = 50.unitReal()),
position = EdgeValue(top = 100.unitReal())
)
),
createText(backgroundColor = "#dd7631", text = "2"),
createText(backgroundColor = "#649d66", text = "3")
)
).applyFlex(
Flex(
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 defines horizontal spacing at an element:
private fun screen() :Widget{
return Container(
children = listOf(
createText(backgroundColor = "#142850", text = "1").applyFlex(
Flex(
size = Size(width = 50.unitReal(),height = 50.unitReal()),
position = EdgeValue(horizontal = 150.unitReal())
)
),
createText(backgroundColor = "#dd7631", text = "2"),
createText(backgroundColor = "#649d66", text = "3")
)
).applyFlex(
Flex(
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 defines vertical spacing at an element:
private fun screen() :Widget{
return Container(
children = listOf(
createText(backgroundColor = "#142850", text = "1").applyFlex(
Flex(
size = Size(width = 50.unitReal(),height = 50.unitReal()),
position = EdgeValue(vertical = 150.unitReal())
)
),
createText(backgroundColor = "#dd7631", text = "2"),
createText(backgroundColor = "#649d66", text = "3")
)
).applyFlex(
Flex(
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.