如何在flutter中增加getx默认对话框的宽度
How to increase the width of getx default dialog in flutter
我是 flutter 的新手,我正在使用 Getx 包进行状态管理和路由管理。我尝试了很多方法来获得默认对话框的全屏宽度,但没有任何反应。我为此搜索了太多但仍然一无所获。如果有人知道这一点,请分享解决方案。谢谢
代码如下:
Get.defaultDialog(
backgroundColor: Constants.backgroundColor,
radius: 10,
title: 'Skills',
titleStyle: const TextStyle(
color: Constants.primaryColor,
fontWeight: FontWeight.bold,
fontSize: 25),
content: SizedBox(
width: size.width,
child: Obx(() => DropdownButton(
hint: const Text(
'Select Skill',
),
onChanged: (newValue) {
resumeController.selectSkill(newValue!);
},
value: resumeController.selectedSkill.value,
items: resumeController.skillsList.map((selectedType) {
return DropdownMenuItem(
child: Text(
selectedType,
),
value: selectedType,
);
}).toList(),
)),
));
通过使用本机 showDialog()
方法而不是 GetX
提供的方法,您可以更轻松地实现这一目标
显示全屏对话框的一种方法如下
showDialog(
context: context,
builder: (_) => AlertDialog(
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.all(
Radius.circular(12.0),
),
),
content: Builder(
builder: (context) {
var height = MediaQuery.of(context).size.height;
var width = MediaQuery.of(context).size.width;
return SizedBox(
height: height - 10, //This is the important part for you
width: width - 10, //This is the important part for you
child: const Center(
child: Text("Hello SO"),
),
);
},
),
),
);
您可以使用您选择的 属性 width 将内容包装到 Container() 或 SizedBox() 小部件中,可以通过 媒体查询
Get.defaultDialog(
title: Text('payment_method'.tr).data!,
content: SizedBox(
width: 300,
child: Column(
children: [
Wrap(
spacing: 8,
children: [
Chip(label: Text('cash'.tr)),
Chip(label: Text('card'.tr)),
Chip(label: Text('qr'.tr)),
],
),
],
),
),
);
我是 flutter 的新手,我正在使用 Getx 包进行状态管理和路由管理。我尝试了很多方法来获得默认对话框的全屏宽度,但没有任何反应。我为此搜索了太多但仍然一无所获。如果有人知道这一点,请分享解决方案。谢谢
代码如下:
Get.defaultDialog(
backgroundColor: Constants.backgroundColor,
radius: 10,
title: 'Skills',
titleStyle: const TextStyle(
color: Constants.primaryColor,
fontWeight: FontWeight.bold,
fontSize: 25),
content: SizedBox(
width: size.width,
child: Obx(() => DropdownButton(
hint: const Text(
'Select Skill',
),
onChanged: (newValue) {
resumeController.selectSkill(newValue!);
},
value: resumeController.selectedSkill.value,
items: resumeController.skillsList.map((selectedType) {
return DropdownMenuItem(
child: Text(
selectedType,
),
value: selectedType,
);
}).toList(),
)),
));
通过使用本机 showDialog()
方法而不是 GetX
显示全屏对话框的一种方法如下
showDialog(
context: context,
builder: (_) => AlertDialog(
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.all(
Radius.circular(12.0),
),
),
content: Builder(
builder: (context) {
var height = MediaQuery.of(context).size.height;
var width = MediaQuery.of(context).size.width;
return SizedBox(
height: height - 10, //This is the important part for you
width: width - 10, //This is the important part for you
child: const Center(
child: Text("Hello SO"),
),
);
},
),
),
);
您可以使用您选择的 属性 width 将内容包装到 Container() 或 SizedBox() 小部件中,可以通过 媒体查询
Get.defaultDialog(
title: Text('payment_method'.tr).data!,
content: SizedBox(
width: 300,
child: Column(
children: [
Wrap(
spacing: 8,
children: [
Chip(label: Text('cash'.tr)),
Chip(label: Text('card'.tr)),
Chip(label: Text('qr'.tr)),
],
),
],
),
),
);