示例
毛玻璃組件為 BackdropFilter
BackdropFilter(
filter: ImageFilter.blur(sigmaX: 5.0, sigmaY: 5.0),//控制毛玻璃效果
// 為子組件添加毛玻璃效果
child: Container(
width: double.infinity,
height: 44,
alignment: Alignment.center,
color: Colors.white.withOpacity(0.4),
),
);
但是當 BackdropFilter 與 Stack 一起使用時卻有點問題，Stack 整個都被毛玻璃覆蓋了。
解決關鍵是使用 ClipRect 包裹 BackdropFilter
Stack(
alignment: Alignment.bottomCenter,
children: [
Container(
width: 300,
height: 300,
alignment: Alignment.center,
color: Colors.red,
),
// 這里是關鍵！
ClipRect(
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 5.0, sigmaY: 5.0),
child: Container(
width: double.infinity,
height: 44,
alignment: Alignment.center,
color: Colors.white.withOpacity(0.4),
),
),
)
],
);
