ios 使用Flutter在容器中添加模糊效果

js5cn81o  于 2023-06-25  发布在  iOS
关注(0)|答案(1)|浏览(126)

我是Flutter的新手,我试图模糊背景。我使用了下面的函数:

Widget loginContainer() {
    return Container(
        decoration: BoxDecoration(
          color: Colors.white70,
          borderRadius: BorderRadius.circular(10),
        ),
        child: BackdropFilter(
            filter: ImageFilter.blur(
              sigmaX: 5.0,
              sigmaY: 5.0,
            ),
            child: getLoginContainer()));
  }

  Widget getLoginContainer() {
    return Column(
      children: [
        space(20),
        emailTextField(),
        space(10),
        passwordTextField(),
        space(10),
        forgotPassword(),
        space(20),
        loginButton(),
        space(10),
        signUpTextLine(),
        space(30),
        copyrightTextLine(),
        space(10),
      ],
    );
  }

但整个屏幕都在变模糊。我看到我可以使用ClipRect,但我现在不知道容器的确切大小。我只想让我的容器,那个有盒子装饰的容器,变蓝。所以它不是透明的,而是模糊的。
在所附的图片,你可以看到容器,其中有输入文本等一个。我想有这个容器模糊,而不是整个屏幕

你知道吗?
谢谢

mrzz3bfm

mrzz3bfm1#

您可以使用ClipRRect而不是ClipRect

child: ClipRRect(
  borderRadius: BorderRadius.circular(10),
  child: BackdropFilter(
    filter: ImageFilter.blur(
      sigmaX: 5.0,
      sigmaY: 5.0,
    ),
    child: getLoginContainer(),
  ),
),

相关问题