Display dialog using a Raised Button

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(),
        )
    );