Flutter custom dialogs

main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Custom Dialog Sample',
      debugShowCheckedModeBanner: false,      
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            showDialog(
              context: context,
              builder: (BuildContext context) => CustomDialog(
                title: "Some information",
                child: SampleDatatable(),
                footer: SimpleTextFooterDialog(text: "Close"),
//                 showCloseButton: false,
              ),
            );
          },
          child: const Text('show custom dialog'),
        ),
      ),
    );
  }
}

class CustomDialog extends StatelessWidget {
  final String title;
  final Widget? child;
  final Widget? footer;
  final bool? showCloseButton;

  const CustomDialog({
    required this.title,
    this.footer,
    this.child,
    this.showCloseButton = true,
  });

  @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: const EdgeInsets.only(left: 0.0, right: 0.0),
      child: Stack(
        children: <Widget>[
          Container(
            constraints: const BoxConstraints(minWidth: 200, maxWidth: 600),
            margin: const EdgeInsets.all(13.0),
            decoration: BoxDecoration(
              color: Colors.orange,
              shape: BoxShape.rectangle,
              borderRadius: BorderRadius.circular(16.0),
              boxShadow: const <BoxShadow>[
                BoxShadow(
                  color: Colors.black26,
                  blurRadius: 0.0,
                  offset: Offset(0.0, 0.0),
                ),
              ],
            ),
            child: Column(
              mainAxisSize: MainAxisSize.min,
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: <Widget>[
                const SizedBox(height: 20.0),
                Center(
                  child: Padding(
                    padding: const EdgeInsets.only(bottom: 20.0),
                    child: Text(
                      title,
                      style: const TextStyle(
                          fontSize: 20,
                          color: Colors.white,
                          fontWeight: FontWeight.bold),
                      textAlign: TextAlign.center,
                    ),
                  ), //
                ),
                if (child != null) ...[
                  child!,
                ],
                if (footer != null) ...[
                  footer!,
                ] else ...[
                  const SizedBox(height: 24.0),
                ],
              ],
            ),
          ),
          if (showCloseButton!) ...[
            Positioned(
              right: 0.0,
              child: GestureDetector(
                onTap: () {
                  Navigator.of(context).pop();
                },
                child: const MouseRegion(
                  cursor: SystemMouseCursors.click,
                  child: Align(
                    alignment: Alignment.topRight,
                    child: CircleAvatar(
                      radius: 14.0,
                      backgroundColor: Colors.white,
                      child: Icon(Icons.close, color: Colors.red),
                    ),
                  ),
                ),
              ),
            ),
          ]
        ],
      ),
    );
  }
}

class SimpleTextFooterDialog extends StatelessWidget {
  final String text;

  const SimpleTextFooterDialog({required this.text});

  @override
  Widget build(BuildContext context) {
    return InkWell(
      child: Container(
        padding: const EdgeInsets.only(top: 15.0, bottom: 15.0),
        decoration: const BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.only(
            bottomLeft: Radius.circular(16.0),
            bottomRight: Radius.circular(16.0),
          ),
        ),
        child: Text(
          text,
          style: const TextStyle(color: Colors.black, fontSize: 20.0),
          textAlign: TextAlign.center,
        ),
      ),
      onTap: () {
        Navigator.pop(context);
      },
    );
  }
}

class SampleDatatable extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.only(left: 24.0, right: 24.0),
      decoration: const BoxDecoration(
        color: Colors.white,
      ),
      child: DataTable(columns: const [
        DataColumn(
          label: Text(
            'Product',
            style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
          ),
        ),
        DataColumn(
          label: Text(
            'Number',
            style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
          ),
        ),
      ], rows: const [
        DataRow(
          cells: [
            DataCell(Text("Product one")),
            DataCell(Text("#1234")),
          ],
        ),
        DataRow(
          cells: [
            DataCell(Text("Second product")),
            DataCell(Text("#9503")),
          ],
        ),
      ]),
    );
  }
}

A simple custom dialog with extended possibilities!

See it live at dartpad