flutter 實現玻璃擬態效果

效果：

實現思路：

PhysicalModel 設置裁剪形狀（矩形或圓形；自定義路徑可用 PhysicalShape)，設置層次與背景陰影效果，BackdropFilter 設置背景模糊。Container 的 LinearGradient 設置填充色透明度。

代碼：

Scaffold(
      backgroundColor: Colors.white12,
      appBar: AppBar(
        title: Text("Flutter Demo"),
      ),
      body: Center(
        child: SizedBox(
          height: 200,
          width: 200,
          child: PhysicalModel(
            shape: BoxShape.rectangle,
            color: Colors.transparent,
            shadowColor: Color(0x33000000),
            elevation: 1.0,
            child: Stack(
              alignment: Alignment.center,
              children: [
                BackdropFilter(
                  filter: ImageFilter.blur(
                    sigmaX: 12,
                    sigmaY: 12,
                  ),
                  child: Container(
                    color: Colors.transparent,
                  ),
                ),
                Container(
                  decoration: BoxDecoration(
                    gradient: LinearGradient(
                      colors: [Color(0x66FFFFFF), Color(0x1AFFFFFF)],
                      begin: Alignment.topLeft,
                      end: Alignment(0.80, 0.80),
                    ),
                  ),
                  child: FlutterLogo(
                    size: 200,
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );