Question

嗨，我想在SimpleDialog类的对话后面实现模糊背景吗？我正在寻找的与此类似的东西，只是颤振。 Github Android project

编辑： 我已经检查了这个问题，但这是关于对话框的，我想在SimpleDialog

上实现它

Answer 1

我使用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,
);

Answer 2

在扑朔迷离中，对话框和底部工作表后面的调光效果是使用名为'ModalBarrier'的类完成的。因此，您可以做的只是在背景变暗的地方修改代码。

您可以使用快捷方式'Double shift'

在'IntelliJ'中轻松搜索文件

首先，您需要

import 'dart:ui' show ImageFilter;

然后在构建方法中更改（第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'的值。

屏幕截图：Blurred Dialog

Answer 3

只需将对话框包装在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

Answer 4

尝试实现此代码

 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

  }
 }

对话框抖动后的背景模糊吗？

4 个答案: