CODEWITHSUNDEEP
flutterflutter-layoutandroid-alertdialogflutter-getx
Usama Ali
Usama Ali

Reputation: 33

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(),
          )),
    ));

Upvotes: 1

Views: 8168

Answers (2)

Quique García Cruz
Quique García Cruz

Reputation: 306

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)),
          ],
        ),
      ],
    ),
  ),
);

Upvotes: 4

FDuhen
FDuhen

Reputation: 4836

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"),
              ),
            );
          },
        ),
      ),
    );

Upvotes: 0

Related Questions