Code360 powered by Coding Ninjas X Naukri.com. Code360 powered by Coding Ninjas X Naukri.com
Last Updated: Mar 27, 2024

Flutter Opacity Widget

Leveraging ChatGPT - GenAI as a Microsoft Data Expert
Speaker
Prerita Agarwal
Data Specialist @
23 Jul, 2024 @ 01:30 PM

Introduction

From the above image, it may be clear what opacity is now. In this image, we changed the opacity of the bananas. What if we need to change the opacity of any widget in our flutter application? In this blog, we will learn to change the opacity of widgets in our application. So, let's begin.

Flutter Opacity Widget

It is a widget that makes its child partially or fully transparent. It paints its child into an intermediate buffer and then blends the child back into the scene, partially transparent.

It can be used in cases where we need to remove or add a widget on the screen on demand by just changing the opacity of that widget since it is faster than removing or adding any widget, so it also improves the performance of the application.

  • Opacity value 0.0 -> less visible
  • Opacity value 1.0 -> more visible

The value of opacity can vary from 0.0 to 1.0

This class is relatively costly for opacity values other than 0.0 and 1.0 since it needs to paint the child into an intermediary buffer.

Use

If we want to change the opacity of any widget, then we wrap it in the opacity widget as given below.

final widgets = [
 MyWidget(Colors.green),
 MyWidget(Colors.blue),
 MyWidget(Colors.yellow),
];

Source: medium

If we need to hide the blue-colored widget in the above-given widgets, we wrap it into an opacity widget and change the opacity to 0.0.

final widgets = [
 MyWidget(Colors.green),
 Opacity(
   opacity: 0.0,
   child: MyWidget(Colors.blue),
 ),
 MyWidget(Colors.yellow),
];

Source: medium

Now, if we need to adjust the opacity of a single image, it's much faster to change its opacity without using the opacity class directly.

For example:

Code1:

Container(color: Color.fromRGBO(255, 0, 0, 0.5))

Code 2:

Opacity(opacity: 0.5, child: Container(color: Colors.red))

Code 1 is much faster than Code 2 as using opacity class makes it slow.

In Code 1, the parameter 0.5 denotes the opacity, which may vary from 0.0 to 1.0. Similarly, in code 2, opacity: 0.5 denotes the image's opacity.

Properties

  • child: It is the widget below the opacity widget in the tree.
  • hashCode: It affects the hash code for this object. A hash code is a single integer representing the object's state that affects operator == comparisons.
  • keyIt controls how one widget replaces another widget in the tree.
  • opacityIt is a double value that changes the child's transparency. 1.0 is fully opaque, and 0.0 is fully transparent.

Example

We will learn to use the opacity widget through an example. We will design an app in which we will add two widgets. The first widget will have an opacity of 0.5, and the second widget will have an opacity of 0.9. This will help us to compare both widgets side by side. The source code of this example is given below. The output screenshot has also been given below the source code.

Source code

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      // Hide the debug banner
      debugShowCheckedModeBanner: false,
      title: 'Kindacode.com',
      home: HomePage(),
    );
  }
}


class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Coding Ninjas'),
      ),
      body: Column(
        children: [
          Opacity(
              opacity: 0.5,
              child: Image.network(
                'https://raw.githubusercontent.com/flutter/assets-for-api-docs/master/packages/diagrams/assets/blend_mode_destination.jpeg',
                fit: BoxFit.cover,
              )),
          Opacity(
              opacity: 0.9,
              child: Image.network(
                'https://raw.githubusercontent.com/flutter/assets-for-api-docs/master/packages/diagrams/assets/blend_mode_destination.jpeg',
                fit: BoxFit.cover,
              )),
        ],
      ),
    );
  }
}

Output

You can use the FlutLab portal to see the output of the given source code yourself.

Get the tech career you deserve, faster!
Connect with our expert counsellors to understand how to hack your way to success
User rating 4.7/5
1:1 doubt support
95% placement record
Akash Pal
Senior Software Engineer
326% Hike After Job Bootcamp
Himanshu Gusain
Programmer Analyst
32 LPA After Job Bootcamp
After Job
Bootcamp

Frequently Asked Questions

What is Flutter?

Flutter is a portable UI toolkit for crafting beautiful, natively compiled mobile, web, and desktop applications from a single codebase. Flutter works with existing code, is used by developers and organizations worldwide, and is free and open source.

Who developed Flutter?

Flutter is open-source and is developed by Google.

What are the advantages of using Flutter?

Flutter is a very useful tool that has many advantages. Some of them are given below.

  • Faster Development
  • Live and Hot Reloading
  • Good Community
  • Minimal Code
  • Documentation
  • Cross-Platform Development
  • UI Focused

What is the Opacity widget in Flutter?

It is a widget that makes its child partially or fully transparent. It paints its child into an intermediate buffer and then blends the child back into the scene, partially transparent.

What should be the opacity value to make a widget fully transparent?

Opacity 1.0 implies that the widget is fully opaque, and to make the widget transparent, the opacity value should be 0.0.

Conclusion

In this article, we have extensively discussed Flutter Expansion TileCard. We hope that this blog has helped you enhance your knowledge regarding Flutter Expansion TileCard and if you would like to learn more, check out our articles on

Refer to our carefully curated articles and videos and code studio library if you want to learn more. Refer to our guided paths on Coding Ninjas Studio to learn more about DSA, Competitive Programming, JavaScript, System Design, etc. Enroll in our courses and refer to the mock test and problems available. Take a look at the interview experiences and interview bundle for placement preparations.

Do upvote our blog to help other ninjas grow.

Happy Learning!!!

Topics covered
1.
Introduction
2.
Flutter Opacity Widget
2.1.
Use
2.2.
Properties
2.3.
Example
2.3.1.
Source code
2.3.2.
Output
3.
Frequently Asked Questions
3.1.
What is Flutter?
3.2.
Who developed Flutter?
3.3.
What are the advantages of using Flutter?
3.4.
What is the Opacity widget in Flutter?
3.5.
What should be the opacity value to make a widget fully transparent?
4.
Conclusion