'How to increase the width of getx default dialog in flutter
I am new to flutter and I am using Getx package for state management and route management. I have tried many ways to give get default dialog full-screen width but nothing happens. I have searched too much for this but still found nothing. If anyone knows about this please do share the solution. Thanks.
Here is the code:
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(),
)),
));
Solution 1:[1]
It'll be easier for you to achieve this by using the native showDialog()
method instead of the one provided by GetX
One way to display a fullscreen dialog is the following
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"),
),
);
},
),
),
);
Solution 2:[2]
You can wrap your content into a Container() or a SizedBox() widgets with the property width of your choice, can be via MediaQuery
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)),
],
),
],
),
),
);
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|---|
Solution 1 | FDuhen |
Solution 2 | Quique Garcia |