今天接到这样一个需求,需要自定义弹窗,所以就有了如下的代码:
通过分析,一切皆widget 所以可以这样实现:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
showDialog(
barrierDismissible: true, //表示点击灰色背景的时候是否消失弹出框
context: context,
builder: (context) {
return MyDialogWidget();
});
class MyDialogWidget extends StatelessWidget {
const MyDialogWidget({
Key key,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Material(
type: MaterialType.transparency,
child: Center(
child: Container(
height: 245.w,
width: 564.w,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(
24.w,
),
color: Colors.white,
),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Padding(
padding: EdgeInsets.only(
top: 52.w, left: 120.w, right: 120.w, bottom: 52.w),
child: Text(
'退出将不保留此次编辑',
style: TextStyle(
fontSize: 32.w,
color: Color(0xFF000000),
fontWeight: FontWeight.bold,
),
),
),
SizedBox(
width: 564.w,
height: 1.w,
child: DecoratedBox(
decoration: BoxDecoration(color: Color(0xFFDDDDDD)),
),
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
padding: EdgeInsets.only(right: 60.w),
child: FlatButton(
child: Center(
child: new Text(
'不保留',
style:
TextStyle(fontSize: 32.w, color: Color(0xFF999999)),
),
),
onPressed: () {
Navigator.of(context).pop();
Navigator.of(context).pop();
},
),
),
SizedBox(
width: 1.w,
height: 94.w,
child: DecoratedBox(
decoration: BoxDecoration(color: Color(0xFFDDDDDD)),
),
),
Container(
padding: EdgeInsets.only(
left: 60.w,
),
child: FlatButton(
onPressed: () {
Navigator.of(context).pop();
},
child: Text(
"继续编辑",
style:
TextStyle(fontSize: 32.w, color: Color(0xFF23A427)),
)),
)
],
)
],
),
)),
);
}
}