横屏模式下如何避免内置TextField的AlertDialog出现尺寸过小问题

你遇到的横屏场景下AlertDialog尺寸过小的问题，本质是AlertDialog内置的insetPadding默认值在横屏状态下计算的可用宽度不足导致，可通过以下三种方案解决：

方案1：自定义Dialog组件（最灵活） #

放弃使用内置AlertDialog，直接使用更底层的Dialog组件自定义布局，可完全控制对话框内边距和尺寸：

showDialog(
  context: context,
  builder: (context) => Dialog(
    // 自定义对话框和屏幕边缘的边距
    insetPadding: const EdgeInsets.symmetric(horizontal: 24, vertical: 24),
    child: Padding(
      padding: const EdgeInsets.all(20.0),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          const Text("输入标题"),
          const SizedBox(height: 16),
          TextField(
            decoration: const InputDecoration(hintText: "请输入内容"),
          ),
          const SizedBox(height: 24),
          Row(
            mainAxisAlignment: MainAxisAlignment.end,
            children: [
              TextButton(
                onPressed: () => Navigator.pop(context),
                child: const Text("取消")
              ),
              TextButton(
                onPressed: () {/* 确认逻辑 */},
                child: const Text("确认")
              ),
            ],
          )
        ],
      ),
    ),
  ),
);

方案2：强制指定AlertDialog content宽度 #

如果要保留AlertDialog的原生样式，可给content套一层SizedBox主动指定最小宽度，适配横屏屏幕尺寸：

showDialog(
  context: context,
  builder: (context) => AlertDialog(
    title: const Text("输入标题"),
    content: SizedBox(
      // 宽度设为屏幕宽度的80%，可根据需求调整比例
      width: MediaQuery.of(context).size.width * 0.8,
      child: const TextField(
        decoration: InputDecoration(hintText: "请输入内容"),
      ),
    ),
    actions: [
      TextButton(
        onPressed: () => Navigator.pop(context),
        child: const Text("取消")
      ),
      TextButton(
        onPressed: () {/* 确认逻辑 */},
        child: const Text("确认")
      ),
    ],
  ),
);

方案3：全局修改Dialog主题配置 #

如果需要统一调整应用内所有AlertDialog的边距，可在MaterialApp的主题配置中修改dialogTheme：

MaterialApp(
  theme: ThemeData(
    dialogTheme: const DialogTheme(
      // 全局调整对话框和屏幕边缘的边距，扩大横屏可用宽度
      insetPadding: EdgeInsets.symmetric(horizontal: 24, vertical: 24),
    ),
  ),
  // 其他配置
)

注意：横屏场景下如果弹出软键盘，建议给页面Scaffold设置resizeToAvoidBottomInset: true，避免输入框被软键盘遮挡

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