今天接到这样一个需求,需要自定义弹窗,所以就有了如下的代码:
通过分析,一切皆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: <Widget>[ 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)), )), ) ], ) ], ), )), ); } }