Flutter Opacity Widget

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…