How to Create a Custom Dialog Box with a Close Icon Using Flutter

Learn how to design a custom dialog box with a close icon in Flutter with this comprehensive article. Follow the step-by-step guide and implement your own personalized dialog box effortlessly. Get started with the implementation today!

main.dart

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'),
            ),
        ),
        );
    }
    }

custom_dialog.dart

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),
                    ),
                ),
                ),
            ),
            ],
        ),
        );
    }
    }

You can also try another approach such as Fancy Dialog.

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);
}

After the implementation, I hope, you will reach your goal. If you face any problems. Please contact me without any hesitation. Thanks for your time. Happy coding