Flutter AlertDialog background resize when keyboard comes up

13 Views Asked by At

I'm new at Flutter the problem is, that I created an AlertDialog with a textfield. On the background there is a stateful widget with textfields in a SingleChildScrollView. When the keyboard comes up the background resizes. I would like to see that the background remains and just the foreground (Alertdialog layout) resizes when the keyboard comes up. Is there a way to do this?

without keyboard resized layout with keyboard

My AlertDialog:

Future<void> save() async {
    TextEditingController mcontroller = TextEditingController();
    var data = await showDialog<String>(
      context: context,
      builder: (_) => Container(
        decoration: BoxDecoration(
          color: MyColors.alertDialogBackground.withOpacity(0.3),),
        child: AlertDialog (
          insetPadding: const EdgeInsets.all(25),
          backgroundColor: MyColors.lightBlue,
          shape: const RoundedRectangleBorder(
            borderRadius: BorderRadius.all(Radius.circular(20.0)),
          ),
          content: Builder(
            builder: (context) {
              // Get available height and width of the build area of this widget. Make a choice depending on the size.
              var height = MediaQuery.of(context).size.height;
              var width = MediaQuery.of(context).size.width;
              return SizedBox(
                width: width,
                height: height / 4.0,
                child: Column(
                  children: [
                    Center(
                      child: Text(
                        "Name of calculation",
                        style: MyStyles.BoldTextStyle,
                      ),
                    ),
                    TextField(
                        controller: mcontroller,
                        style: MyStyles.TextStyle,
                        decoration: myInputDecoration),
                    Padding(
                      padding: const EdgeInsets.symmetric(vertical: 8.0),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                        mainAxisSize: MainAxisSize.max,
                        children: [
                          Expanded(
                            child: Padding(
                              padding: const EdgeInsets.only(left: 8.0, right: 8.0, top: 10.0),
                              child: TextButton(
                                onPressed: () =>
                                    Navigator.pop(context, 'Cancel'),
                                style: MyStyles.ButtonStyle(),
                                child: Padding(
                                  padding: const EdgeInsets.symmetric(horizontal: 5.0),
                                  child: Text(
                                      "Cancel",
                                      style: MyStyles.TextStyle(),
                                      textAlign: TextAlign.center),
                                ),
                              ),
                            ),
                          ),
                          Expanded(
                            child: Padding(
                              padding: const EdgeInsets.only(left: 8.0, right: 8.0, top: 10),
                              child: TextButton(
                                onPressed: () => Navigator.pop(context, 'Save'),
                                style: MyStyles.NXNButtonStyle(),
                                child: Padding(
                                  padding: const EdgeInsets.symmetric(horizontal: 5.0),
                                  child: Text("OK",
                                      style: MyStyles.TextStyle(),
                                      textAlign: TextAlign.center),
                                ),
                              ),
                            ),
                          ),
                        ],
                      ),
                    ),
                  ],
                ),
              );
            },
          ),
        ),
      ),
    );
    if (data == "Save") {
      print("Save");
      //do save
    }
  }

Background Widget:

Scaffold(
      drawer: const Drawer(),
      extendBodyBehindAppBar: true,
      resizeToAvoidBottomInset: true,
      backgroundColor: MyColors.grey,
      appBar: MyAppBar()
      body: DecoratedBox(
        decoration: const BoxDecoration(
          image: DecorationImage(
              image: AssetImage("myimageasset"),
              fit: BoxFit.cover),
        ),
        child: NotificationListener<ScrollNotification>(
          onNotification: (scrollNotification) {
            if (scrollViewController.position.userScrollDirection ==
                ScrollDirection.reverse) {
              // do something User is going down
            } else {
              if (scrollViewController.position.userScrollDirection ==
                  ScrollDirection.forward) {
                // do something User is going up
              }
            }
            return true;
          },
          child: SingleChildScrollView(
            physics: const BouncingScrollPhysics(),
            controller: scrollViewController,
            reverse: true,
            child: AnimatedContainer(
              curve: ...,
              duration: ...,
              width: ...
              height: ...
              child: Center(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    const Spacer(), //I need this spacer because of the animations in this Widget.
                    Container(...),
                    Container(...),

              ),
            ),
          ),
        ),
      ),
    );


Any help would be great! Thanks!

1

There are 1 best solutions below

0
kisstajmi On

Finally I found the answer to my own question:

I needed to set the resizeToAvoidBottomInset: true, to false at Scaffold widget