This property defines how items will be filled according to the space available along the main axis. Flex sets values applied to each child’s property.
For that, it takes the values of all the child elements and makes the following calculation: they add and then divide by each value of the flex property applied to the child. The result should be the child’s filled space in the container.
private fun screen() :Widget{
return Container(
children = listOf(
createText(backgroundText = "#142850", text = "1")
.setFlex {
flex = 1.0
},
createText(backgroundText = "#dd7631", text = "2")
.setFlex {
flex = 2.0
},
createText(backgroundText = "#649d66", text = "3")
.setFlex {
flex = 3.0
}
)
).setFlex {
grow = 1.0
}
}
private func screen() -> Screen {
return
Screen(
navigationBar: NavigationBar(title: "Flex"),
child:
Container(children: [
createText(backgroundColor: "#142850",text: "1").applyFlex(
Flex().flex(1)),
createText(backgroundColor: "#dd7631",text: "2").applyFlex(
Flex().flex(2)),
createText(backgroundColor: "#649d66",text: "3").applyFlex(
Flex().flex(3))
],widgetProperties: WidgetProperties(
flex: Flex()
.grow(1)
)
)
)
}
For more information about Flex Margin, 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.