Override nodes
You can override each UI block with a Flutter widget by mixing no-code with Flutter.
Basic properties override
UIBox(
'Button',
overrides: const [
Override(
'Label',
text: 'Click me',
color: Colors.white,
),
Override(
'Image',
image: 'https://',
),
],
),
Replace a node
You can replace an entire node within the no-code component tree using the builder function. With this method, you can still use the child and children properties of the original node.
UIBox(
'Component name',
overrides: const [
Override(
'element id',
builder: (context, node, child, children) {
return GestureDetector(
onTap: () {
debugPrint('Tapped!');
},
child: Container(
color: Colors.black,
child: child,
),
);
},
),
],
),
Child override
If in the no-code component the element to which you want to overwrite the child already has one, it will be removed and replaced with the one entered by the user via code.
You can also use the UIBox within other UIBoxes. This provides a very high degree of customization.
UIBox(
'Component name',
overrides: const [
Override('Element id', child: UIBox('Other component')),
],
),
Children override
You can also overwrite the children of an element.
UIBox(
'Component name',
overrides: const [
Override(
'Element name',
children: [
Text('Child 1'),
Text('Child 2'),
],
),
],
),
Change properties after node initialization
final override = Override('element id');
override
..setText('Click me!')
..setColor(Colors.black);
It is recommended to use only one Override per element, as only the first one is taken.
If you accidentally try to overwrite children to an element with only one child, the change by code will simply be ignored.