Display dialog using a Raised Button - flutter

Question

so I'm trying to display a dialog using a raised button. But when I press it, the screen just turns black. Can anyone please tell me what's wrong with my code:
This is the code for my button:
Container(
child: SizedBox(
height: 50.0,
width: 150.0,
child: RaisedButton(
onPressed: () {
Navigator.of(context).pop();
SuccessfulDialog();
},
child: Text(
"Send Request",
style: TextStyle(
fontFamily: "Poppins",
fontSize: 17,
fontWeight: FontWeight.w500,
),
),
color: Colors.blue,
textColor: Colors.white,
),
),
),
And this is the code for my dialog which is placed in the components folder of my library
import 'package:flutter/material.dart';
import 'package:get/get.dart';
class SuccessfulDialog extends StatefulWidget {
final String title;
final String description;
final List<Widget> actions;
final String imageAsset;
const SuccessfulDialog({
Key key,
this.title,
this.description,
this.imageAsset,
this.actions,
}) : super(key: key);
#override
_SuccessfulDialogState createState() => _SuccessfulDialogState();
}
class _SuccessfulDialogState extends State<SuccessfulDialog> {
double padding = 50;
double avatarRadius = 45;
double width = Get.width;
#override
Widget build(BuildContext context) {
return Dialog(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20),
),
elevation: 0,
backgroundColor: Colors.transparent,
child: contentBox(context),
);
}
contentBox(context) {
var sidePadding = width * .17;
return Scaffold(
body: Container(
width: width,
child: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
SizedBox(
height: 38,
),
Image(
image: AssetImage('assets/images/logo.png'),
width: width,
),
SizedBox(
height: 15,
),
],
),
),
),
);
}
Widget buildAppointmentText() {
return Padding(
padding: EdgeInsets.only(left: 10, top: 10, right: 10, bottom: 10),
child:
Text(' You have added and appointment' + 'with {Exhibitor Name} on',
style: TextStyle(
color: Colors.blue,
fontFamily: "DMSans",
fontSize: 15,
)));
}
Widget buildDateText() {
return Padding(
padding: EdgeInsets.all(
10,
),
child: Text('May 27, 2021, Tuesday' + '5:30 PM',
style: TextStyle(
color: Colors.black,
)),
);
}
Widget buildViewButton() {
return Padding(
padding: EdgeInsets.only(
left: 35.0,
right: 35.0,
top: 100,
),
child: SizedBox(
width: 400.0,
height: 60.0,
child: RaisedButton(
onPressed: () {},
textColor: Colors.white,
color: Colors.blue,
child: Text(
"Reset Password",
style: TextStyle(
fontFamily: "Poppins",
letterSpacing: -0.3,
fontSize: 14.0,
),
),
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(
40.0,
),
),
),
),
);
}
Widget buildReturnText() {
return Padding(
padding: EdgeInsets.only(right: 10, left: 10, top: 10, bottom: 10),
child: Text("Return to Exhibitor's Booth",
style: TextStyle(
color: Colors.blue,
fontFamily: "Poppins",
fontSize: 14,
letterSpacing: -0.3,
)));
}
}
OR is there any other way that I can do this?

Answer 1

You can show the custom dialog with showDialog function
onPressed: () {
showDialog(context: context,
builder: (BuildContext context){
return SuccessfulDialog(
title: "Custom Dialog Title",
descriptions: "Dialog description",
);
}
);
}

Answer 2

you can use showDialog to display dialog please refer the below code
showDialog(
context: context,
builder: (_) => AlertDialog(
title: Text('Dialog Title'),
content: SuccessfulDialog(),
)
);