CODEWITHSUNDEEP
flutter
NoProgress
NoProgress

Reputation: 193

How to make a widget inside a widget transparent so that the third widget is visible

I want the first widget to be transparent and display the colors of the third widget. on the third widget there is an animation with changing colors

enter image description here

Upvotes: 1

Views: 675

Answers (2)

dumazy
dumazy

Reputation: 14445

You can use a ColorFiltered for that.

Stack(
  alignment: Alignment.center,
  children: [
    Container(
      width: 300,
      height: 300,
      color: Colors.green,
    ),
    Material(
      clipBehavior: Clip.antiAlias, // make sure the filter is restricted
      color: Colors.transparent,
      child: SizedBox(
        width: 150,
        height: 150,
        child: ColorFiltered(
          colorFilter: ColorFilter.mode(
            Colors.black, // Color of the box, must be same color as text color used below
            BlendMode.xor,
          ),
          child: Center(
            child: Text(
              'test',
              style: TextStyle(
                fontSize: 32,
                color: Colors.black, // Same color as filter color used above
              ),
            ),
          ),
        ),
      ),
    ),
  ],
);

The BlendMode.xor will cut out everything with the same color within the current canvas, which is the Material widget above it.

Upvotes: 2

stacktrace2234
stacktrace2234

Reputation: 1500

Try the opacity widget: https://api.flutter.dev/flutter/widgets/Opacity-class.html

Opacity(
  opacity: 0.5,
  child: ...,
)

Upvotes: 0

Related Questions