模糊对话框颤动背后的背景？

Question

我想在SimpleDialog课堂上的对话框后面实现模糊背景。我正在寻找与此类似的东西，但用于颤振。

Github 安卓项目

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

Answer 1

把你的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

Answer 2

我使用 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 3

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

您可以使用快捷方式“双移”在“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'的值。

屏幕截图：模糊对话框