Flutter Opacity Widget

Suragch
Flutter Community
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…

--

--