最简易的对话框面板,包含一个内容组件,可指定影深、背景色、形状等属性。
Dialog基本使用
<br />【child】 : 动画图标数据 【Widget】<br />【elevation】 : 影深 【double】<br />【backgroundColor】 : 背景色 【Color】<br />【shape】 : 形状 【ShapeBorder】<br />![55.gif](https://cdn.nlark.com/yuque/0/2020/gif/326147/1589442498079-a74bd8cf-b852-4252-81a6-f2f9b1872589.gif#align=left&display=inline&height=364&margin=%5Bobject%20Object%5D&name=55.gif&originHeight=364&originWidth=310&size=253758&status=done&style=none&width=310)
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class CustomDialog extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
_buildRaisedButton(context),
_buildDialog(),
],
);
}
Widget _buildDialog() => Dialog(
backgroundColor: Colors.white,
elevation: 5,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(10))),
child: Container(
width: 50,
child: DeleteDialog(),
),
);
Widget _buildRaisedButton(BuildContext context) => RaisedButton(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(10))),
color: Colors.blue,
onPressed: () {
showDialog(context: context, builder: (ctx) => _buildDialog());
},
child: Text(
'Just Show It !',
style: TextStyle(color: Colors.white),
),
);
}
class DeleteDialog extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
_buildBar(context),
_buildTitle(),
_buildContent(),
_buildFooter(context),
],
),
);
}
Widget _buildTitle() {
return Text(
'Delete Doucument',
style: TextStyle(color: Color(0xff5CC5E9), fontSize: 24),
);
}
Widget _buildContent() {
return Padding(
padding: const EdgeInsets.all(15.0),
child: Text(
' Hi toly! If you push the conform buttom ,'
' You will lose this file. Are you sure wand to do that?',
style: TextStyle(color: Color(0xffCFCFCF), fontSize: 16),
textAlign: TextAlign.justify,
),
);
}
Widget _buildFooter(context) {
return Padding(
padding: const EdgeInsets.only(bottom: 15.0, top: 10,left: 10,right: 10),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Container(
alignment: Alignment.center,
height: 40,
width: 100,
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(30)),
color: Color(0xff73D1EE)),
child: Text('Yes',
style: TextStyle(color: Colors.white, fontSize: 16)),
),
InkWell(
onTap: ()=>Navigator.of(context).pop(),
child: Container(
alignment: Alignment.center,
height: 40,
width: 100,
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(30)),
color: Colors.orangeAccent),
child: Text('Cancle',
style: TextStyle(color: Colors.white, fontSize: 16)),
),
)
],
),
);
}
_buildBar(context) => Container(
height: 30,
alignment: Alignment.centerRight,
margin: EdgeInsets.only(right: 10, top: 5),
child: InkWell(
onTap: ()=>Navigator.of(context).pop(),
child: Icon(
Icons.close,
color: Color(0xff82CAE3),
),
),
);
}