用 flutter 创建玻璃 UI

Question

正如标题所说，我想创建一个这样的 ui，但我无法获得相同的结果。

现在我正在使用这个代码：

 @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        image: DecorationImage(
          image: AssetImage('images/greydrop.jpeg'),
          fit: BoxFit.cover,
        ),
      ),
      child: BackdropFilter(
        filter: ImageFilter.blur(sigmaX: 10.0, sigmaY: 10.0),
        child: Scaffold(
          backgroundColor: Colors.white.withOpacity(0.6),
          appBar: AppBar(...),
          body : ....

我正在使用具有不同类型灰色的图像。我的结果如下：

Answer 1

因为你使用的是纯灰色图像，我猜你看不到失真的发生。

尝试在同一代码中使用像 THIS 这样的彩色背景。

用 flutter 创建玻璃 UI

Create glass UI with flutter

effect

aero-glass

flutter