How to Create a Responsive Dialog in Flutter

In this article, we’ll walk through how to create a simple responsive dialog that works on any device. For demonstration purposes, we will use an ElevatedButton. When the button is pressed, a dialog will pop up.

Code Explanation:

The showSimpleDialog function utilizes the showDialog method, which is a future-based function in Flutter. It requires a BuildContext and a builder, which returns a Dialog widget.

Let’s break it down:

1. Dialog Padding:

• We provide insetPadding to set padding on all sides of the dialog. This ensures the dialog doesn’t touch the edges of the screen, making it responsive.

2. Container Settings:

• Inside the Dialog, we have a Container with its width set to double.infinity, which makes the dialog stretch across the screen width. You could customize this width based on the screen size using MediaQuery for more precise control.

• We also provide vertical padding for some spacing inside the dialog.

3. Column Widget:

• The Column is used to align the content vertically, and we set mainAxisSize to min, meaning the column will only take up as much space as needed by its children.

• The children of the column are:
  An SVG image loaded from assets using SvgPicture.asset.
  A Text widget displaying the message “Verified”.

4. Closing the Dialog:

• If you want the dialog to remain open even when the user taps outside, set barrierDismissible: false. By default, tapping outside will dismiss the dialog, as we have set barrierDismissible to true.

Full Code:

import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';

class ResponsiveDialog extends StatefulWidget {
  const ResponsiveDialog({super.key});

  @override
  State<ResponsiveDialog> createState() => _ResponsiveDialogState();
}

class _ResponsiveDialogState extends State<ResponsiveDialog> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey,
      body: SafeArea(
        child: Center(
          child: ElevatedButton(
            onPressed: (){
              showSimpleDialog();
            },
            child: const Text('Show Dialog'),
          ),
        ),
      ),
    );
  }
  showSimpleDialog() {
    showDialog(
      barrierDismissible: true,
      context: context,
      builder: (context) {
        return Dialog(
          insetPadding: const EdgeInsets.symmetric(horizontal: 12),
          child: Container(
            width: double.infinity,
            padding: const EdgeInsets.symmetric(vertical: 12),
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                SvgPicture.asset('assets/image/ic_verify_success.svg'),
                const SizedBox(
                  height: 10,
                ),
                const Text(
                  'Verified',
                  style: TextStyle(fontWeight: FontWeight.w500),
                )
              ],
            ),
          ),
        );
      },
    );
  }
}

Output:

Conclusion:

With this approach, you can easily create a responsive dialog in Flutter that adapts to different screen sizes. You can further customize the dialog by adding more widgets or controlling its width based on screen dimensions. Setting barrierDismissible to false ensures that the dialog doesn’t close when tapping outside, giving you control over its behavior.