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

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

CodePudding user response：

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.

CodePudding user response：

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

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