Using the Opacity widget in Flutter (3 examples)

In Flutter, the Opacity widget is used to make its child partially or completely transparent. It can take a child widget and an opacity (a double) argument which determines the child’s alpha value.

Example 1: Different levels of transparency

Screenshot:

The code:

Scaffold(
        appBar: AppBar(
          title: const Text('Kindacode.com'),
        ),
        body: Column(
          children: [
            // Opacity = 1
            Opacity(
                opacity: 1,
                child: Container(
                  width: double.infinity,
                  height: 150,
                  color: Colors.blue,
                  alignment: Alignment.center,
                  child: const Text('Opacity = 1'),
                )),
            // Opacity = 0.6
            Opacity(
                opacity: 0.6,
                child: Container(
                  width: double.infinity,
                  height: 150,
                  color: Colors.blue,
                  alignment: Alignment.center,
                  child: const Text('Opacity = 0.6'),
                )),
            // Opacity = 0.3
            Opacity(
                opacity: 0.3,
                child: Container(
                  width: double.infinity,
                  height: 150,
                  color: Colors.blue,
                  alignment: Alignment.center,
                  child: const Text('Opacity = 0.3'),
                )),

            // This one takes place but it's invisible
            Opacity(
                opacity: 0,
                child: Container(
                  width: double.infinity,
                  height: 150,
                  color: Colors.blue,
                  alignment: Alignment.center,
                  child: const Text('Opacity = 0'),
                )),
          ],
        )
);

Example 2: Opacity & Image

Screenshot:

The code:

Scaffold(
      appBar: AppBar(
        title: const Text('Kindacode.com'),
      ),
      body: Column(
        children: [
          // Opacity = 0.5
          Opacity(
              opacity: 0.5,
              child: Image.network(
                'https://www.kindacode.com/wp-content/uploads/2020/11/my-dog.jpg',
                fit: BoxFit.cover,
              )),
          // Opacity = 0.9
          Opacity(
              opacity: 0.9,
              child: Image.network(
                'https://www.kindacode.com/wp-content/uploads/2020/11/my-dog.jpg',
                fit: BoxFit.cover,
              )),
        ],
      ),
);

Example 3: Opacity & Gradient

Screenshot:

The code:

Scaffold(
        appBar: AppBar(
          title: const Text('Kindacode.com'),
        ),
        body: Opacity(
          opacity: 0.7,
          child: Container(
            decoration: const BoxDecoration(
                gradient: LinearGradient(
                    begin: Alignment.topLeft,
                    end: Alignment.bottomRight,
                    colors: [Colors.red, Colors.blue])),
            alignment: Alignment.center,
            child: const Text(
              'Hello',
              style: TextStyle(fontSize: 50, color: Colors.white),
            ),
          ),
        )
);

References

• Opacity class (flutter.dev)
• Opacity (optics) on Wikipedia
• Opacity (developer.mozzilla.org)

Final Words

We’ve examined a few examples of using the Opacity widget to make more attractive user interfaces. If you’d like to explore more new and exciting stuff in Flutter, take a look at the following articles:

• Using Chip widget in Flutter: Tutorial & Examples
• How to create Blur Effects in Flutter
• How to make an image carousel in Flutter
• Flutter: GridPaper example
• Best Libraries for Making HTTP Requests in Flutter

You can also check out our Flutter category page or Dart category page for the latest tutorials and examples.