Visibility Widget Occupies Area In Row Widget? - flutter

Question

In my code, the third Container should not be included since it is wrapped in the Visibility widget. This is what I have tried,
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Container(...),
Container(...),
Visibility(visible:false, child: Container(...))
]
)
What it should look like:
What actually happened:

Answer 1

According to the Visibility documentation:
By default, the visible property controls whether the child is included in the subtree or not; when it is not visible, the replacement child (typically a zero-sized box) is included instead.
This shows that just because a widget is wrapped in the Visibility widget, doesn't mean it doesn't exist in the widget tree.
The best way to go about this would be to make the widget null so it isn't included in the widget tree.
bool notNull(Object o) => o != null;
bool isVisible = false;
...
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Container(...),
Container(...),
isVisible? Container(...) : null,
].where(notNull).toList(),
)
Or you could optionally create the list in a build method so that you can simply add your widget to the list if a certain condition is met.
Builder(
build: (context) {
bool isVisible = false;
List<Widget> _children = [
Container(...),
Container(...),
];
if (isVisible) {
_children.add(Container(...)); // Optional widget
}
return Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: _children,
);
}
),

Answer 2

Indeed your widget is not visible, but it does counts when calculating the spacing.
You can try using a builder
Builder(
build: (context) {
var children = [
Container(...),
Container(...),
];
if (your condition) {
childern.add(Container(...));
}
return Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: children
);
}
);