如何创建可指定尺寸的方形Flutter AlertDialog？

问题描述 #

我希望制作一个方形的AlertDialog，尝试了设置shape为无圆角、contentPadding与insetPadding为0，content为100×100的Container，但未能实现方形效果。还尝试将width改为margin，同样无效；使用AspectRatio虽能实现方形，但无法指定尺寸。求既能让AlertDialog成为方形又可指定尺寸的方法。

原尝试代码 #

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(home: MyHomePage());
  }
}

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

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body:  AlertDialog(
        shape: const RoundedRectangleBorder(borderRadius: BorderRadius.zero),
        alignment: Alignment.center,
        contentPadding: EdgeInsets.zero,
        insetPadding: EdgeInsets.zero,
        content: Container(
          height: 100,
          width: 100,
          color: Colors.amber,
        ),
      ),
    );
  }
}

解决方案 #

核心问题：AlertDialog默认遵循Material Design规范，带有最小宽度约束，导致手动设置content的宽高无法生效。只需通过constraints属性覆盖这个默认约束，即可实现指定尺寸的方形对话框。

修改后的代码 #

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(home: MyHomePage());
  }
}

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

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: AlertDialog(
        // 强制限定对话框的宽高为100×100
        constraints: const BoxConstraints(
          minWidth: 100,
          maxWidth: 100,
          minHeight: 100,
          maxHeight: 100,
        ),
        shape: const RoundedRectangleBorder(borderRadius: BorderRadius.zero),
        alignment: Alignment.center,
        contentPadding: EdgeInsets.zero,
        insetPadding: EdgeInsets.zero,
        content: Container(
          color: Colors.amber,
        ),
      ),
    );
  }
}

关键说明 #

• 通过BoxConstraints设置minWidth、maxWidth、minHeight、maxHeight为相同值，直接锁定对话框的尺寸，覆盖默认约束
• 保留shape属性设置无圆角，确保方形外观
• 无需再给content的Container设置宽高，对话框的约束已经限定了整体尺寸

内容的提问来源于stack exchange，提问作者sub