flutter - 如何在彩色矩形内制作透明圆圈

Question

我是新来的。我想在半透明矩形旁边制作透明圆形。如下图，

我不知道。所以请帮助我制作这种类型的小部件。

标签： flutterdartflutter-layoutflutter-dependencies

Answer 1

使用 ColorFiltered 和 Stack 您可以实现这一点。（我接受了评论中提到的答案并根据您的需要进行了编辑）

@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,
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }