How to make Transparent Circle inside colored rectangle

Question

I am new in flutter. I want to make the transparent Circle in side the semi transparent rectangle. Look like below,

I have not idea about that. So please help me to make this type of widget in flutter.

Answer 1

Using ColorFiltered and Stack you can achieve this. (I took the answer mentioned in the comment and edited to your needs)

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        fit: StackFit.expand,
        children: [
          Image.network(
            'https://lh3.googleusercontent.com/proxy/_wrP_GRGOkGw0FLMiR3qeMzlyC-qN8Dd4sND89_xxLZMDIZh204g8PCccS-o9WaL1RKyiVOLGVS9QpodSkMMhOh8kbNh1CY492197-im-4vlFRRdsVqT2g4QbRlNgljDIg',
            fit: BoxFit.cover,
          ), //Give your Image here
          ColorFiltered(
            colorFilter: ColorFilter.mode(
              Colors.black.withOpacity(0.5),
              BlendMode.srcOut,
            ), // This one will create the magic
            child: Stack(
              fit: StackFit.expand,
              children: [
                Container(
                  decoration: BoxDecoration(
                    color: Colors.black,
                    backgroundBlendMode: BlendMode.dstOut,
                  ), // This one will handle background + difference out
                ),
                Align(
                  alignment: Alignment.center,
                  child: Container(
                    height: MediaQuery.of(context).size.width,
                    width: MediaQuery.of(context).size.width,
                    decoration: BoxDecoration(
                      color: Colors.red,
                      borderRadius: BorderRadius.circular(
                        MediaQuery.of(context).size.width / 2,
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }