具有自定义宽度且无默认填充的 Flutter 对话框

Question

我想创建一个具有自定义宽度的对话框，没有默认的水平填充，我尝试为子项添加宽度，但它不适用。

并且与 AlertDialog 不同，没有 contentPadding 属性，因此无法删除水平内容填充。

如何解决这个问题并向我的对话框添加自定义宽度？

输出：

代码

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

预期输出

Answer 1

您可以执行以下操作：

• 用

  Dialog

  包裹您的

  Center

  ，然后用

  SizedBox

  。
• 将所需的设置为

  SizedBox

  。
• 在

  Padding

  下面添加一个

  Dialog

  小部件。

代码：

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(
            ...