在颤振中在容器上添加模糊

Question

早上好。我正在尝试向将接收标签的容器添加模糊。在阅读了一些关于 BackdropFilter 的内容后，我能够将它添加到容器中。但它有那个方面。是否可以在模糊中添加半径？

我尝试如下创建，但没有达到预期效果。

Container(
  decoration: BoxDecoration(
    color: Colors.transparent,
    borderRadius: BorderRadius.all(Radius.circular(50))
  ),
  child: Stack(
    children: <Widget>[
      Positioned(
        top: 0,
          child: BackdropFilter(
          filter: ImageFilter.blur(sigmaX: 15, sigmaY: 15),
          child: Container(
            decoration: BoxDecoration(
              color: Colors.white54,
              borderRadius: BorderRadius.all(Radius.circular(50))
            ),
            width: 90,
            height: 45,
          ),
        ),
      ),
      Padding(
        padding: const EdgeInsets.fromLTRB(15, 10, 15, 10),
        child: Row(
          children: <Widget>[
            Icon(Icons.timer, color: Colors.white),
            Text(
              '11:50',
            ),
          ],
        ),
      )
    ],
  ),
);

Answer 1

您可以通过将 Container 包裹在嵌套在与 Container 大小相同的 SizedBox 中的 ClipRRect 中来摆脱阴影：

SizedBox(
  width: 90,
  height: 45,
  child: ClipRRect(
           borderRadius: BorderRadius.circular(50.0),
            child: Stack(
              children: <Widget>[
                Positioned(
                  top: 0,
                    child: BackdropFilter(
                    filter: ImageFilter.blur(sigmaX: 15, sigmaY: 15),
                    child: Container(
                      decoration: BoxDecoration(
                        color: Colors.white54,
                        borderRadius: BorderRadius.all(Radius.circular(50))
                      ),
                      width: 90,
                      height: 45,
                    ),
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.fromLTRB(15, 10, 15, 10),
                  child: Row(
                    children: <Widget>[
                      Icon(Icons.timer, color: Colors.white),
                      Text('11:50',),
                    ],
                  ),
                )
              ],
            ),
          ),
        );

我还删除了父项 Container，因为它不再需要了。

在颤振中在容器上添加模糊

Add blur on container in flutter

containers

blur

flutter-layout