overflow at the bottom of the Get.defaultDialog() when the keyboard is open

Question

I am using Get.defaultDialog() with a ListView.Builder and a TextformField() at the bottom of the dialog. The issue is whenever I open the keyboard, The bottom of the dialog box is getting overflowed.

I have tried various ways, But nothing is working for me.

One of the solutions I have tried

Other solutions that I tried are all similar to the above one.

If I give double.maxFinite then the dialog box covers the whole screen. I don't want that to happen.

What I want to achieve is, The height should not exceed the content of the dialog.

This is My Code for dialog() :

    void cancelTask() {
    RxInt selectedreason = 0.obs;
    String cancelReason = kCancelReasonList[0].name;
    TextEditingController cancelReasonController = TextEditingController();
    Get.defaultDialog(
      title: kLanguageList!.value.clearTask,
      titleStyle: TextStyle(
        color: kBlack,
        fontSize: kTextScaleFactor * 18,
        fontWeight: FontWeight.bold,
      ),
      textConfirm: kLanguageList!.value.ok,
      confirmTextColor: kBlack,
      textCancel: kLanguageList!.value.cancel,
      cancelTextColor: kOrange,
      buttonColor: Colors.transparent,
      contentPadding: EdgeInsets.symmetric(
          vertical: kWidth * 0.02, horizontal: kWidth * 0.02),
      onConfirm: () {},
      content: SingleChildScrollView(
        child: Obx(
          () => AnimatedContainer(
            duration: selectedreason.value != 3
                ? const Duration(seconds: 1)
                : const Duration(milliseconds: 500),
            width: kWidth * 0.7,
            height:
                selectedreason.value != 3 ? kHeight * 0.285 : kHeight * 0.37,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                ListView.builder(
                  shrinkWrap: true,
                  itemCount: kCancelReasonList.length,
                  itemBuilder: (context, index) {
                    return RadioListTile(
                      toggleable: true,
                      title: CommonText(
                        text: kCancelReasonList[index].name.obs,
                        size: 1,
                        boldText: false,
                      ),
                      value: index,
                      groupValue: selectedreason.value,
                      onChanged: (int? reason) {
                        selectedreason.value = reason!;
                        cancelReason = kCancelReasonList[index].name;
                      },
                    );
                  },
                ),
                RadioListTile(
                  title: CommonText(
                    text: kLanguageList!.value.other.obs,
                    size: 1,
                    boldText: false,
                  ),
                  value: 3,
                  groupValue: selectedreason.value,
                  onChanged: (int? reason) {
                    selectedreason.value = reason!;
                    if (reason == 3) {
                      cancelReasonController.text = "";
                      cancelReason = "";
                    }
                  },
                ),
                Obx(() => AnimatedContainer(
                      duration: selectedreason.value == 3
                          ? const Duration(seconds: 1)
                          : const Duration(milliseconds: 500),
                      curve: Curves.fastOutSlowIn,
                      height: selectedreason.value == 3 ? kHeight * 0.085 : 0,
                      child: selectedreason.value == 3
                          ? CommonTextFormField(
                              controller: cancelReasonController,
                              onChanged: (reason) {
                                if (reason.isNotEmpty) {
                                  cancelReason = reason;
                                }
                              },
                              keyboardType: TextInputType.text,
                              focusBorderColor: kOrange,
                            )
                          : const SizedBox.shrink(),
                    ))
              ],
            ),
          ),
        ),
      ),
    );
  }

score 0 · Answer 1 · answered Sep 16 '22 at 05:25

0

Try to add resizeToAvoidBottomInset: false, property inside Scaffold widget.

answered Sep 16 '22 at 05:25

Maciej Szakacz

381
1
6

tried that but not working – Flutter Sep 16 '22 at 13:26

score 0 · Answer 2 · answered Feb 01 '23 at 14:38

I really don't know whether it will work for you or not, however, I've managed fixing this issue by editing inside the Get.defaultDialog.

Inside the Get.defaultDialog, there is a column that has to be wrapped with SingleChildScrollView and restart the app. If the issue is same like me then it should work like charm.

score 0 · Answer 3 · answered Aug 14 '23 at 15:22

For any other poor lost souls having trouble with this, I've come up with a reasonably workable solution that doesn't involve messing with the GetX source-code.

While I'm sure this could be make workable with Get.defaultDialog(), you'll give yourself a little more breathing room with Get.dialog() as you can provide your own Flutter Dialog.

Doing so gives you access to insetPadding as a property of the Dialog, which is what defines the space between the edges of the dialog and the edges of your screen.

Let's take an example new FooDialog() class.

class FooDialog extends StatelessWidget {
  late final EdgeInsets? insetPadding;

  FooDialog (
      {Key? key,
      this.insetPadding})
      : super(key: key);

  //Here's the juicy important bit
  //Passing in any default insets lets us preserve the width of any
  EdgeInsets? calculateWithKeyboard(EdgeInsets? defaultInsets, BuildContext context) {
    if (MediaQuery.of(context).viewInsets.bottom > 0) {
      if (defaultInsets != null) {
        return EdgeInsets.fromLTRB(defaultInsets.left, 0, defaultInsets.right, 0);
      } else {
        return EdgeInsets.all(0);
      }
    } else
      return defaultInsets;
  }

  @override
  Widget build(BuildContext context) {
    return Dialog( 
        insetPadding: calculateWithKeyboard(insetPadding, context), // USAGE
        child: // etc etc

In essence, the reason why the dialog is getting chomped is because once the keyboard expands up, the insetPadding actually exceeds the size of the dialog itself; there's no room for the dialog left.

You can throw out that extra padding as and when you don't need it (i.e. when the keyboard is rendered like this).

Hope this helps someone!

overflow at the bottom of the Get.defaultDialog() when the keyboard is open

3 Answers3