yoga_engine
A plugin that uses yoga to implements flexbox layout in Flutter.
Installation
To use this plugin, add yoga_engine
as a dependency in your pubspec.yalm
file.
Usage
First, import the dependency package:yoga_engine/yoga_engine.dart
to your dart code to be able
to use all the widgets and helpers provided by the Yoga Engine. Then, before runApp
method, call Yoga.init()
to initialize all Yoga Engine dependencies.
All that done, just configure each NodeProperties
instance to all YogaLayout
and YogaNode
widgets in your layout, to yoga calculate each widget size and position them.
Flutter layout comparison
At first, understanding how to set up the layout using yoga_engine
might seem a bit complicated.
To make building the layout more natural with the platform,
think of YogaLayout
as a Row
or Column
and the YogaNode
as a Flexible
or Expanded
.
The concept of flex that Flutter applies is very similar to the flexbox that yoga implements.
Both solutions were built in a similar way, so they can basically be thought of in the same way.
Example
Import
import 'package:yoga_engine/yoga_engine.dart';
Initialization
void main() {
Yoga.init();
}
Configuration
NodeProperties root = NodeProperties();
root.setWidth(300);
root.setHeight(300);
root.setFlexDirection(YGFlexDirection.YGFlexDirectionRow);
root.setAlignItems(YGAlign.YGAlignCenter);
NodeProperties child = NodeProperties();
Placement
YogaLayout(
nodeProperties: root,
children: [
YogaNode(
nodeProperties: child,
child: Text('Child'),
),
],
)
Yoga engine rules
YogaLayout
widgets can only have children ofYogaLayout
orYogaNode
types.YogaNode
widgets can have any type of child, except themselves.YogaNode
widgets cannot be placed outsideYogaLayout
.