How to put opacity for container in flutter

In this example, you will learn how to put opacity for containers in a flutter. You will learn the various methods for applying opacity in the container.

Let’s create a Container in a flutter.

Container(
            width: 100,
            height: 100,
            color: Color(0xFFE44336),
          ),

Method to add opacity for a container in a flutter

Method 1: Using Flutter Color Class

In this method, you will add color to the container with opacity. You will use this Colors(#hexcode).withOpacity(value). The value will be changed from 0 to 1. For example, I want an opacity of 50% then I will use 0.5.

Container(
              width: 200,
              height: 200,
              color: Color(0xFFE44336).withOpacity(0.5)),
        ),

Full Code

import 'package:flutter/material.dart';

class MyApp extends StatefulWidget {
  // This widget is the root of your application.
  const MyApp({Key? key}) : super(key: key);

  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // Application name
      title: 'My Flutter App',
      debugShowCheckedModeBanner: false, // Remove debug banner
      home: Scaffold(
        appBar: AppBar(
          // The title text which will be shown on the action bar
          title: Text("My Flutter App"),
        ),
        body: Center(
          child: Container(
              width: 200,
              height: 200,
              color: Color(0xFFE44336).withOpacity(0.5)),
        ),
      ),
    );
  }
}

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

Method 2: Using Flutter Opacity Widget

The other method to add opacity in the flutter container is creating a container as a child widget of the Opacity Widget. When you will run the code you will get the same result.

Opacity(
            opacity: 0.5,
            child: Container(width: 200, height: 200, color: Color(0xFFE44336)
            ),
          ),

Full Code

import 'package:flutter/material.dart';

class MyApp extends StatefulWidget {
  // This widget is the root of your application.
  const MyApp({Key? key}) : super(key: key);

  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // Application name
      title: 'My Flutter App',
      debugShowCheckedModeBanner: false, // Remove debug banner
      home: Scaffold(
        appBar: AppBar(
          // The title text which will be shown on the action bar
          title: Text("My Flutter App"),
        ),
        body: Center(
          child: Opacity(
            opacity: 0.5,
            child: Container(width: 200, height: 200, color: Color(0xFFE44336)
            ),
          ),
        ),
      ),
    );
  }
}

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