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

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

Upvotes: 0

Answers (4)

Cla boh

Reputation: 11

You have to add SingleChildView inside the content of the extension ExtensionBottomSheet on GetInterface you can find it with Ctrl+click .defaultDialog() (for me is line 238)

Widget baseAlertDialog = AlertDialog(
  titlePadding: titlePadding ?? const EdgeInsets.all(8),
  contentPadding: contentPadding ?? const EdgeInsets.all(8),

  backgroundColor: backgroundColor ?? theme.dialogBackgroundColor,
  shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.all(Radius.circular(radius))),
  title: Text(title, textAlign: TextAlign.center, style: titleStyle),
  content: SingleChildScrollView(
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.center,
      mainAxisSize: MainAxisSize.min,
      children: [
        content ??
            Text(middleText,
                textAlign: TextAlign.center, style: middleTextStyle),
        const SizedBox(height: 16),
        ButtonTheme(
          minWidth: 78.0,
          height: 34.0,
          child: Wrap(
            alignment: WrapAlignment.center,
            spacing: 8,
            runSpacing: 8,
            children: actions,
          ),
        )
      ],
    ),
  ),
  // actions: actions, // ?? <Widget>[cancelButton, confirmButton],
  buttonPadding: EdgeInsets.zero,
);

Upvotes: 1

ConnieMnemonic

Reputation: 234

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!

Upvotes: 0

Prajun Lungeli

Reputation: 147

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.

Upvotes: 1

Maciej Szakacz

Reputation: 594

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

Upvotes: 0

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

Answers (4)

Related Questions