How to Change Opacity of a Widget in Flutter

Opacity is a simple property which can have huge effects in the user interface of a mobile app. For example, a button with less opacity makes the user convince that the button is disabled. In this blog post, let’s see how the opacity of widgets are changed in Flutter.

Flutter’s Opacity widget makes its child partially transparent. You can choose a value between 0.0 and 1.0 to define the opacity of a widget.

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

Just go through the complete example of Flutter opacity.

import 'package:flutter/material.dart';

class OpacityExample extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: MainScreen()
    );
  }
}

/// This is the stateless widget that the main application instantiates.
class MainScreen extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Opacity Example'),
      ),
      body: Center(
        child: Opacity(
          opacity: 0.5,
          child: Container(
          color: Colors.red,
          width: 200,
          height: 200,
  ),
        ),

        
        
      ),
    );
  }
}

And here’s the output of flutter example.

Thank you for reading flutter tutorials.

Leave a Comment

Your email address will not be published. Required fields are marked *