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),
)),
);
}