Flutter Opacity Widget
Published in
4 min readJan 28, 2020
Make your widgets transparent
If you haven’t watched the Widget of the Week video about the Opacity widget, do that now. It gives a quick overview of what the widget does.
The following article will give you the code from the video so that you can play around with it yourself. That’s the best way to learn.
The basics
Hiding a widget (full opacity)
Given a column of widgets like this
class SomeWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
final widgets = [
MyWidget(Colors.green),
MyWidget(Colors.blue),
MyWidget(Colors.yellow),
];
return Column(
children: widgets,
);
}
}
it’s easy to remove the blue one by just rebuilding without it:
final widgets = [
MyWidget(Colors.green),
// MyWidget(Colors.blue),
MyWidget(Colors.yellow),
];
But that made the yellow widget move up to take the blue widget’s place. If you want the layout to stay…