删除颤动警报对话框的灰色背景

Question

我的 Flutter 应用程序中有一个 CupertinoAlertDialog 和 AlertDialog。每次弹出对话框时，其后面的所有内容都会变得更暗。我想删除背景。我该怎么做？

CupertinoDialogAction(
        child: Text('Delete',
                style: TextStyle(color: Colors.red),
              ),
              onPressed: () async {
                await CommentActivity.delete(postData[index]['id'])
                  .then((response) {
                  if (response) {
                    setState(() {
                      postData.removeAt(index);
                      createPageActivity();
                      renderPageActivity();
                    });
                    Navigator.of(context).pop();
                  }
                });
              }
            )
          ],
        )

Answer 1

部分解决该问题的另一种解决方案是使用几乎透明的颜色作为屏障：

showDialog<void>(
      barrierColor: Color(0x01000000),
)

Answer 2

只需使用 de navigator 启动对话框，而不是使用 showDialog() 并使用 PageRouteBuilder

Navigator.of(context).push(
                  PageRouteBuilder(
                      pageBuilder: (context, _, __) => AlertDialog(),
                      opaque: false),
);

Answer 3

我认为你正在谈论对话框背景中的黑色推子...... 是材质/库比蒂诺实现的一部分，在材质中具有固定值 Colors.black54。

您必须复制

showDialog()

代码并进行修改。

演示：

// common Dialog widget shown in both implementation. 
  Widget buildDialog(BuildContext context) {
    return CupertinoDialogAction(
      child: Text(
        'Delete',
        style: TextStyle(color: Colors.red),
      ),
      onPressed: () async {
        Navigator.of(context).pop();
      },
    );
  }

  void openDialog(BuildContext context) {
    // open custom dialog.
    openCustomDialog(context);

    // open default dialog.
//    openFlutterDialog(context);

  }

  // regular Fluter showDialog()
  void openFlutterDialog(BuildContext context) {
    showDialog(
      context: context,
      builder: (ctx) {
        return buildDialog(ctx);
      },
    );
  }

  void openCustomDialog(BuildContext context) {
    showCustomDialog(
      context: context,
      builder: (ctx) {
        return buildDialog(ctx);
      },
    );
  }

  // custom implementation of showDialog()...
  Future<T> showCustomDialog<T>({
    @required BuildContext context,
    bool barrierDismissible = true,
    WidgetBuilder builder,
  }) {
    assert(debugCheckHasMaterialLocalizations(context));
    final ThemeData theme = Theme.of(context, shadowThemeOnly: true);
    return showGeneralDialog(
      context: context,
      pageBuilder: (BuildContext buildContext, Animation<double> animation,
          Animation<double> secondaryAnimation) {
        final Widget pageChild = Builder(builder: builder);
        return SafeArea(
          child: Builder(builder: (BuildContext context) {
            return theme != null
                ? Theme(data: theme, child: pageChild)
                : pageChild;
          }),
        );
      },
      barrierDismissible: barrierDismissible,
      barrierLabel: MaterialLocalizations.of(context).modalBarrierDismissLabel,
      // KEY PART TO MODIFY, Flutter doesn't allow a transparent Color,
      // values under opacity .01 are considered transparent and will throw an error.
      // But this value is transparent enough.
      barrierColor: Colors.black.withOpacity(0.01),

            // you can modify the default FadeTransition duration here.
      transitionDuration: const Duration(milliseconds: 2000),
    );
  }

这是您要找的吗？

Answer 4

showDialog方法中具有barrierColor属性的简单解决方案，我将不透明度值设置为零并且屏障阴影消失

AlertDialog alert = AlertDialog(
    backgroundColor: Colors.transparent,
    elevation: 0,
    content: new Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Loader(),
      ],
    ),
  );
  showDialog(
    barrierColor: Colors.white.withOpacity(0),
    barrierDismissible: false,
    context: context,
    builder: (BuildContext context) {
      return WillPopScope(
            onWillPop: (){},
          child: alert);
    },
  );

Answer 5

您可以在

Dialog

类参数中添加透明颜色。

例如，如果您像这样调用自定义对话框：

showDialog(
      context: context,
      builder: (BuildContext context) {
        return HighlightDialog(); // call your custom dialog class file
      },
    );

然后您可以像这样删除自定义

Dialog

类或文件中的背景：

import 'package:flutter/material.dart';

class HighlightDialog extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Dialog(
      backgroundColor: Colors.transparent, // remove background
      child: Container(), // your custom dialog view
    );
  }
}

希望有帮助！