我想在SimpleDialog 类的对话框后面实现模糊背景。我正在寻找与此类似的东西，但用于颤振。
编辑：
我已经检查过这个问题，但这是关于对话框的，我想在SimpleDialog 上实现它。
【问题讨论】：
尝试实现此代码
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
fit: StackFit.expand,
children: <Widget>[
Image.asset('asset url', fit: BoxFit.cover),
blur(),
],
),
),
],
),
);
}
Widget blur(){
if(
//dialog pops up or is active
){
return BackdropFilter(
filter: ImageFilter.blur(sigmaX:5.0,sigmaY:5.0),
);
}
else{
return Image.asset('asset url', fit: BoxFit.cover);////if dialog not active returns an unfiltered image
}
}
【讨论】：
只需将您的Dialog 包裹在BackdropFilter 中
return new BackdropFilter(
filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
child: Dialog(
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(15.0)),
backgroundColor: Color(ColorResources.BLACK_ALPHA_65),
child: _dialogContent(),
)
);
Widget _dialogContent() {}//Your dialog view
【讨论】：
在 Flutter 中，对话框和底部工作表后面的调光效果是使用名为 'ModalBarrier' 的类完成的。所以你可以做的只是修改它使背景变暗的代码。
您可以使用快捷键'Double shift'
轻松搜索'IntelliJ'中的文件首先，你需要
import 'dart:ui' show ImageFilter;
然后在构建方法中改变(Line: 96)
child: color == null ? null : DecoratedBox(
decoration: BoxDecoration(
color: color,
),
),
进入
child: color == null ? null : BackdropFilter(
filter: new ImageFilter.blur(sigmaX: 3, sigmaY: 3),
child: Container(color: Color(0x01000000)),
),
您可以根据您的用例更改 'sigma' 的值。
【讨论】：
我使用 showGeneralDialog 方法实现了模糊背景，以使模糊过渡尽可能平滑。这是一个例子：
showGeneralDialog(
barrierDismissible: true,
barrierLabel: '',
barrierColor: Colors.black38,
transitionDuration: Duration(milliseconds: 500),
pageBuilder: (ctx, anim1, anim2) => AlertDialog(
title: Text('blured background'),
content: Text('background should be blured and little bit darker '),
elevation: 2,
actions: [
FlatButton(
child: Text('OK'),
onPressed: () {
Navigator.of(context).pop();
},
),
],
),
transitionBuilder: (ctx, anim1, anim2, child) => BackdropFilter(
filter: ImageFilter.blur(sigmaX: 4 * anim1.value, sigmaY: 4 * anim1.value),
child: FadeTransition(
child: child,
opacity: anim1,
),
),
context: context,
);
【讨论】：