Search code examples
flutterflutter-layoutandroid-alertdialogflutter-getx

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

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