feat: Recalculate layout

[hernandazevedozup]

How yoga works with beagle flutter

Today to use Yoga, we have the classes
YogaLayout (MultiChildWidgets)-> that is rendered by RenderYoga
YogaNode (single child widgets) -> That wraps the widgets to represent a leaf for the yoga tree.

The process is as following:

1- We need to create a yoga tree with all the widgets flex attributes (_attachNodesFromWidgetsHierarchy)
2- We need to call the nodeProperties.calculateLayout(maxWidth, maxHeight); on the root node.
3- Read the sizes and apply to the widgets with child.layout(childConstraints, parentUsesSize: true); (_applyLayoutToWidgetsHierarchy)
4- Set the size for the root node reading the width/height calculated by yoga.

The problem of recalculate layouts

When using a widget with yoga, if the size of the widget changes during the rendering we need to recalculate the yoga width/height . For that the current implementation is marking the nodeProperties as dirty and deleting the nodes to let the performLayout method inside the RenderYoga re-create the yoga tree

Current implementation in draft

• for this implementation we are wrapping child widgets with MeasureSize widget that can check if the widget size chages, and call method void _recalculateLayout

void _recalculateLayout(AbstractNode? targetParent) {
    if (targetParent is RenderYoga) {
      //FIXME Trigger rebuild if we have more than one container ancestor. example Container(container( image) ) )
        targetParent.nodeProperties.dirtyAllDescendants();
        targetParent.nodeProperties.removeAllChildren();
    }
  }

#23
Below some screenshots of the current code working with image example without fixed sizes

Image starting to render starting with size 0

Image finishing to render and its size is calculated

Known issues for this implementation

The error is below

Currently if we have the example as it is on https://github.com/Orangestack-com/beagle-backend-kotlin/tree/feaeture/recalculate-layout it works. But if we wrap the bff code with one more BeagleContainer, for some reason the image is rendering small, need some more investigation to know if the BeagleContainer is not being recalculated, or the image is being calculated with small(older) BoxConstraints and its small because of that.

Container(children = listOf(Container(
            children = listOf(
                buildText(title),
                Image(Remote(this.imagePath), mode).setStyle {
                    flex = Flex(
                        alignSelf = AlignSelf.CENTER
                    )
//                size = Size(
//                    width = UnitValue.real(150),
//                    height = UnitValue.real(130)
//                )
                }
            )
        )))

How to Configure for local development

Download yoga repository inside the beagle flutter's repository root folder for local development
Change beagle's pubspec .yaml to point to the local development yoga as following
yoga_engine:
path: ../yoga/flutter

[Beagle Flutter]
https://github.com/Orangestack-com/beagle-flutter

Yoga
https://github.com/ZupIT/yoga/tree/feature/recalculate-layout
[BFF]
https://github.com/Orangestack-com/beagle-backend-kotlin/tree/feaeture/recalculate-layout

• Download yoga repository inside the beagle flutter's repository root folder for local development
• Change beagle's pubspec .yaml to point to the local development yoga as following
  yoga_engine:
  path: ../yoga/flutter

[Beagle Flutter]
https://github.com/Orangestack-com/beagle-flutter
Yoga
https://github.com/ZupIT/yoga/tree/feature/recalculate-layout
[BFF]
https://github.com/Orangestack-com/beagle-backend-kotlin/tree/feaeture/recalculate-layout