Flutter Dialog with custom width and no default padding

Question

I want to make a dialog with a custom width without the default horizontal paddings, I've tried adding width to the child but it does not apply.

and there is no contentPadding property unlike AlertDialog, so the horizontal content padding can't be removed.

how can I fix that and add a custom width to my Dialog?

Output:

Code

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

class PathNotFoundDialog extends StatelessWidget {
  const PathNotFoundDialog({super.key});

  @override
  Widget build(BuildContext context) {
    return Dialog(
      insetPadding: EdgeInsets.zero,
      backgroundColor: kWhiteColor,
      surfaceTintColor: Colors.transparent,
      clipBehavior: Clip.antiAlias,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(34.0),
      ),
      child: SizedBox(
        width: MediaQuery.of(context).size.width * 0.1,
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            SvgPicture.asset(
              "assets/icons/path_not_found_icon.svg",
              width: 28,
            ),
            const SizedBox(height: 16),
            Text(
              tr("errors.pathNotFound"),
              style: const TextStyle(
                fontSize: 18.0,
                fontWeight: FontWeight.bold,
              ),
            ),
            const SizedBox(height: 12.0),
            Text(
              tr("errors.pathNotFoundDescription"),
              textAlign: TextAlign.center,
              style: const TextStyle(
                fontSize: 12,
                color: kGreyColorTint4,
              ),
            ),
            const SizedBox(height: 42),
            GestureDetector(
              onTap: () {
                Navigator.pop(context);
              },
              child: Container(
                height: 34,
                width: 34,
                decoration: const BoxDecoration(
                  color: kGreyColorTint5,
                  borderRadius: BorderRadius.all(
                    Radius.circular(100),
                  ),
                ),
                child: Padding(
                  padding: const EdgeInsets.all(12.0),
                  child: SvgPicture.asset("assets/icons/close_icon.svg"),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Expected Output

Answer 1

You can do the following:

• Wrap your Dialog with a Center and then a SizedBox.
• Set the desired width to the SizedBox.
• Add a Padding widget below the Dialog.

Code:

Widget build(BuildContext context) {
    return Center(
      child: SizedBox(
        width: MediaQuery.of(context).size.width * 0.5,
        child: Dialog(
          insetPadding: EdgeInsets.zero,
          backgroundColor: kWhiteColor,
          surfaceTintColor: Colors.transparent,
          clipBehavior: Clip.antiAlias,
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(34.0),
          ),
          child: Padding(
            padding: const EdgeInsets.all(20.0),
            child: Column(
            ...