Skip to content

showGeneralDialog实现一个全局确认弹框,背景虚化+透明

dart
void showFullScreenDialog(BuildContext context) {
  showGeneralDialog(
    context: context,
    barrierDismissible: true,
    barrierLabel: MaterialLocalizations.of(context).modalBarrierDismissLabel,
    // 不透明度
    barrierColor: const Color(0xFF333438).withOpacity(0.5),
    transitionDuration: const Duration(milliseconds: 100),
    pageBuilder: (buildContext, animation, secondaryAnimation) {
      return Center(
        child: Container(
          constraints: const BoxConstraints.expand(),
          color: Colors.transparent,
          child: BackdropFilter(
            // 背景虚化
            filter: ImageFilter.blur(sigmaX: 8.0, sigmaY: 8.0),
            child: Center(
                child: Container(
              width: 320,
              // 控制高度,包含padding在内只能有191
              constraints: const BoxConstraints.tightFor(height: 191),
              decoration: const BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.all(Radius.circular(14.0))),
              padding: const EdgeInsets.fromLTRB(15, 26, 15, 17),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  Container(
                    margin: const EdgeInsets.only(bottom: 12.0),
                    child: const Text(
                      'Delete Chat',
                      style: TextStyle(
                        fontSize: 20,
                        fontWeight: FontWeight.bold,
                        height: 28 / 20,
                      ),
                    ),
                  ),
                  Container(
                    margin: const EdgeInsets.only(bottom: 11.0),
                    child: const Text(
                      'Are you sure you want to delete this chat?',
                      textAlign: TextAlign.center,
                      style: TextStyle(
                        fontSize: 14,
                        height: 22 / 14,
                        letterSpacing: .4,
                      ),
                    ),
                  ),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      dialogButton(
                        onPressed: () {
                          Navigator.of(context).pop();
                        },
                        bgColor: Colors.white,
                        borderColor: const Color(0xFFEB3454),
                        fontColor: const Color(0xFFEB3454),
                        text: 'Cancel',
                      ),
                      dialogButton(
                        onPressed: () {
                          Navigator.of(context).pop();
                        },
                        bgColor: const Color(0xFFEB3454),
                        borderColor: const Color(0xFFEB3454),
                        fontColor: Colors.white,
                        text: 'Delete',
                      ),
                    ],
                  )
                ],
              ),
            )),
          ),
        ),
      );
    },
    transitionBuilder: (BuildContext buildContext, Animation<double> animation,
        Animation<double> secondaryAnimation, Widget child) {
      return FadeTransition(
        opacity: CurvedAnimation(
          parent: animation,
          curve: Curves.easeOut,
        ),
        child: child,
      );
    },
  );
}

// 弹框按钮
Widget dialogButton(
    {required Color bgColor,
    required Color borderColor,
    required Color fontColor,
    required String text,
    double borderRadius = 27.0,
    void Function()? onPressed}) {
  return Container(
    height: 53,
    width: 140,
    decoration: BoxDecoration(
      color: bgColor,
      borderRadius: BorderRadius.circular(borderRadius), // 设置圆角
      border: Border.all(color: borderColor),
    ),
    child: ElevatedButton(
        onPressed: onPressed,
        style: ButtonStyle(
          backgroundColor: MaterialStateProperty.all<Color>(bgColor), // 设置背景色
          elevation: MaterialStateProperty.all<double>(0), // 去除阴影
          shape: MaterialStateProperty.all<RoundedRectangleBorder>(
            RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(borderRadius), // 设置按钮圆角
            ),
          ),
        ),
        child: Text(
          text,
          style: TextStyle(fontSize: 16, color: fontColor, height: 22 / 16),
        )),
  );
}