- Flutter自带的dialog一般还是能够满足一般的开发需求,但是对于我们来说肯定是不够用,这个时候我们想到的肯定是自定义,在flutter中要想创建自己的dialog还是比较简单的
- 第一步继承Dialog类
- 在build方法里面写上自己的布局
代码如下(直接上代码比较清晰)
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:me_flutter/res/colors.dart';
class SureDialog extends Dialog {
String message;
Function onCloseEvent;
Function sureEvent;
SureDialog({this.message, this.onCloseEvent, this.sureEvent});
@override
Widget build(BuildContext context) {
// TODO: implement build
return GestureDetector(
onTap: () {
Navigator.pop(context);
},
child: Material(
type: MaterialType.transparency,//设置透明的效果
child: Center( // 让子控件显示到中间
child: SizedBox( //比较常用的一个控件,设置具体尺寸
width: ScreenUtil().setWidth(600),
height: ScreenUtil().setHeight(400),
child: Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(15),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Container(
alignment: Alignment.topCenter,
margin: EdgeInsets.only(top: 61),
child: Text(
message,
style: TextStyle(
fontSize: ScreenUtil().setSp(36),
color: MyColors.app_484848),
),
),
Container(
margin: EdgeInsets.only(bottom: 13),
padding: EdgeInsets.only(left: 6, right: 6),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
OutlineButton(
onPressed: onCloseEvent,
padding: EdgeInsets.only(
left: 49, top: 14, right: 49, bottom: 14),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10)),
child: Text(
'取消',
style: TextStyle(
color: MyColors.app_22b2e1,
fontSize: ScreenUtil().setSp(36),
),
),
borderSide:
BorderSide(color: MyColors.app_22b2e1, width: 1),
),
RaisedButton(
onPressed: sureEvent,
color: MyColors.app_22b2e1,
elevation: 0.2,
highlightElevation: 0.2,
padding: EdgeInsets.only(
left: 49, top: 14, right: 49, bottom: 14),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
),
child: Text(
'确定',
style: TextStyle(
color: Colors.white,
fontSize: ScreenUtil().setSp(36)),
),
),
],
),
),
],
),
),
),
),
),
);
}
}
布局效果
BC0EC89C-507D-4CD4-8771-CFD55F416B70.png
网友评论