Flutter Dialog 高度铺满屏问题

需求

点击按钮，弹出弹窗进行操作

代码

简单代码

showDialog(
 context: context,
 builder: (ctx) {
   return AlertDialog(
     title: const Text("提示"),
     content: Column(
       children: [
         Text(
           "是否消耗5积分兑换海天生抽？",
         ),
         SizedBox(
           height: 10.px,
         ),
         ElevatedButton(
           onPressed: () {},
           child: const Text("确定"),
         )
       ],
     ),
   );
 },
);

运行之后，Dialog高度铺满屏幕

解决

• 方法一：在Column包裹一层Wrap

showDialog(
 context: context,
 builder: (ctx) {
   return AlertDialog(
     title: const Text("提示"),
     content: Wrap(
       children: [
         Column(
           children: [
             const Text(
               "是否消耗5积分兑换海天生抽？",
             ),
             SizedBox(
               height: 10.px,
             ),
             ElevatedButton(
               onPressed: () {},
               child: const Text("确定"),
             )
           ],
         ),
       ],
     ),
   );
 },
);

• 方法二：设置 Column mainAxisSize: MainAxisSize.min

showDialog(
  context: context,
  builder: (ctx) {
    return AlertDialog(
      title: const Text("提示"),
      content: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          const Text(
            "是否消耗5积分兑换海天生抽？",
          ),
          SizedBox(
            height: 10.px,
          ),
          ElevatedButton(
            onPressed: () {},
            child: const Text("确定"),
          )
        ],
      ),
    );
  },
);