How to design Custom dialog box using close icon with flutter? - flutter

Question

I have an image of the dialog box and trying to design the same as below the image.
I tried but it's not same as above the image
I just want set cross button at the top right corner, like above the image.
i used Stack, and a placed Positioned widget at the top:0.0,right:0.0.
CODE:
customDialogBox(BuildContext context) {
return showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
backgroundColor: Colors.red,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(32.0))),
contentPadding: EdgeInsets.only(top: 10.0),
content: Stack(
children: <Widget>[
Container(
width: MediaQuery.of(context).size.width,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
SizedBox(
height: 20.0,
),
Center(
child: Padding(
padding: const EdgeInsets.all(10.0),
child: new Text("Sorry please try \n again tomorrow", style:TextStyle(fontSize: 30.0,color: Colors.white)),
)//
),
SizedBox(
height: 20.0,
width: 5.0,
),
Divider(
color: Colors.grey,
height: 4.0,
),
InkWell(
child: Container(
padding: EdgeInsets.only(top: 15.0, bottom: 15.0),
decoration: BoxDecoration(
color:Colors.white,
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(32.0),
bottomRight: Radius.circular(32.0)),
),
child: Text(
"OK",
style: TextStyle(color: Colors.blue,fontSize: 25.0),
textAlign: TextAlign.center,
),
),
onTap:(){
Navigator.pop(context);
},
),
],
),
),
Positioned(
top: 0.0,
right: 0.0,
child: FloatingActionButton(
child: Image.asset("assets/red_cross.png"),
onPressed: (){
Navigator.pop(context);
},
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(80)),
backgroundColor: Colors.white,
mini: true,
elevation: 5.0,
),
),
],
)
);
});
}
here's my Dialog Box:

Answer 1

Try this will work perfect.
import 'package:flutter/material.dart';
import 'custom_dialog.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
home: HomePage(),
);
}
}
class HomePage extends StatefulWidget {
#override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Center(
child: RaisedButton(
onPressed: () {
showDialog(context: context, builder: (BuildContext context) => CustomDialog());
},
child: Text('show custom dialog'),
),
),
);
}
}
Dialog Widget :
import 'package:flutter/material.dart';
class CustomDialog extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Dialog(
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(16.0)),
elevation: 0.0,
backgroundColor: Colors.transparent,
child: dialogContent(context),
);
}
Widget dialogContent(BuildContext context) {
return Container(
margin: EdgeInsets.only(left: 0.0,right: 0.0),
child: Stack(
children: <Widget>[
Container(
padding: EdgeInsets.only(
top: 18.0,
),
margin: EdgeInsets.only(top: 13.0,right: 8.0),
decoration: BoxDecoration(
color: Colors.red,
shape: BoxShape.rectangle,
borderRadius: BorderRadius.circular(16.0),
boxShadow: <BoxShadow>[
BoxShadow(
color: Colors.black26,
blurRadius: 0.0,
offset: Offset(0.0, 0.0),
),
]),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
SizedBox(
height: 20.0,
),
Center(
child: Padding(
padding: const EdgeInsets.all(10.0),
child: new Text("Sorry please try \n again tomorrow", style:TextStyle(fontSize: 30.0,color: Colors.white)),
)//
),
SizedBox(height: 24.0),
InkWell(
child: Container(
padding: EdgeInsets.only(top: 15.0,bottom:15.0),
decoration: BoxDecoration(
color:Colors.white,
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(16.0),
bottomRight: Radius.circular(16.0)),
),
child: Text(
"OK",
style: TextStyle(color: Colors.blue,fontSize: 25.0),
textAlign: TextAlign.center,
),
),
onTap:(){
Navigator.pop(context);
},
)
],
),
),
Positioned(
right: 0.0,
child: GestureDetector(
onTap: (){
Navigator.of(context).pop();
},
child: Align(
alignment: Alignment.topRight,
child: CircleAvatar(
radius: 14.0,
backgroundColor: Colors.white,
child: Icon(Icons.close, color: Colors.red),
),
),
),
),
],
),
);
}
}
Approach 2:
void showFancyCustomDialog(BuildContext context) {
Dialog fancyDialog = Dialog(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12.0),
),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20.0),
),
height: 300.0,
width: 300.0,
child: Stack(
children: <Widget>[
Container(
width: double.infinity,
height: 300,
decoration: BoxDecoration(
color: Colors.grey[100],
borderRadius: BorderRadius.circular(12.0),
),
),
Container(
width: double.infinity,
height: 50,
alignment: Alignment.bottomCenter,
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(12),
topRight: Radius.circular(12),
),
),
child: Align(
alignment: Alignment.center,
child: Text(
"Dialog Title!",
style: TextStyle(
color: Colors.white,
fontSize: 20,
fontWeight: FontWeight.w600),
),
),
),
Align(
alignment: Alignment.bottomCenter,
child: InkWell(
onTap: () {
Navigator.pop(context);
},
child: Container(
width: double.infinity,
height: 50,
decoration: BoxDecoration(
color: Colors.blue[300],
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(12),
bottomRight: Radius.circular(12),
),
),
child: Align(
alignment: Alignment.center,
child: Text(
"Okay let's go!",
style: TextStyle(
color: Colors.white,
fontSize: 20,
fontWeight: FontWeight.w600),
),
),
),
),
),
Align(
// These values are based on trial & error method
alignment: Alignment(1.05, -1.05),
child: InkWell(
onTap: () {
Navigator.pop(context);
},
child: Container(
decoration: BoxDecoration(
color: Colors.grey[200],
borderRadius: BorderRadius.circular(12),
),
child: Icon(
Icons.close,
color: Colors.black,
),
),
),
),
],
),
),
);
showDialog(
context: context, builder: (BuildContext context) => fancyDialog);
}

Answer 2

In order to build the custom Dialog box I had to do everything custom.
I still used stack but instead of a inbuilt DialogBox i used a Container, I also replaced the image of the icon with an actual icon, and made the ok bold, as on the expected result.
hope this fits your needs.
Stack(
alignment: Alignment.center,
children: <Widget>[
Container(
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.circular(30.0),
),
width: 500.0,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
SizedBox(
height: 20.0,
),
Center(
child: Padding(
padding: const EdgeInsets.all(10.0),
child: new Text("Sorry please try \n again tomorrow", style:TextStyle(fontSize: 30.0,color: Colors.white)),
)//
),
SizedBox(
height: 20.0,
width: 5.0,
),
Divider(
color: Colors.grey,
height: 4.0,
),
InkWell(
child: Container(
padding: EdgeInsets.only(top: 15.0, bottom: 15.0),
decoration: BoxDecoration(
color:Colors.white,
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(32.0),
bottomRight: Radius.circular(32.0)),
),
child: Text(
"OK",
style: TextStyle(color: Colors.blue,fontSize: 25.0, fontWeight: FontWeight.bold),
textAlign: TextAlign.center,
),
),
onTap:(){
Navigator.pop(context);
},
),
],
),
),
Align(
alignment: Alignment(1.05, -0.35),
child: InkWell(
onTap: () {},
child: Container(
width: 40.0,
height: 40.0,
child: Icon(Icons.close, color: Colors.red, size: 40,),
decoration: BoxDecoration(
boxShadow: [
BoxShadow(color: Colors.black,offset: Offset(0, 1), blurRadius: 2),
],
shape: BoxShape.circle,
color: Colors.white
),
),
),
),
],
),