Screen is reloading every element/api inside when keyboard opens/closes inside a show dialog

Question

I have a screen, which contains a button, when tapping on that button, a showDialog function is been called, which displays a popup with a textfield, whenever the keyboard appears or disappears, the whole screen reloads, even the api calls, as if I'm calling setState, the class is a StatefulWidget Button trigger:

CustomButton(buttonName: defaultLanguage == "en" ? "Settings" : "Ajustes", backgroundColor:
    appVioletColor, onPress: () {
            PopupScreen().displayDialog(context, isLargeScreen);
     
    }, isLanguage: true, style: Styles.generateWeightFont(Colors.white, isLargeScreen ? 18 : 9, FontWeight.w400),
        image: new AssetImage('assets/Settings/setting.png'), isLargeScreen: isLargeScreen ,),

PopupScreen code:

class PopupScreen {
  final pinCodeReader = TextEditingController();
  Future displayDialog(BuildContext context, bool isLargeScreen) {
    return
      showDialog(
        barrierDismissible: true,
        useSafeArea: false,
          context: context,
        builder: (BuildContext context) =>
            Material(
                type: MaterialType.transparency,
                child: Center(
                  child:
                      Padding(
                        padding: EdgeInsets.only(
                            bottom: MediaQuery.of(context).viewInsets.bottom),
                        child:
                    Container(
                    color: Colors.white,
                    height: MediaQuery.of(context).size.height / 2,
                    width: MediaQuery.of(context).size.width / 1.5,
                    child:
                    ListView(
                      children:[
                  Column(
                    children: [
                      Container(
                        alignment: Alignment.topCenter,
                        height: 12,
                        width: 411,
                        decoration: BoxDecoration(
                            image: DecorationImage(
                              image: AssetImage("assets/WelcomeScreen/purple-top-rec.png"),
                            )
                        ),
                      ),
                      const SizedBox(height: 24,),
                      Container(
                        width: 200,
                        height: 100,
                        decoration: BoxDecoration(
                          image: DecorationImage(
                            image: AssetImage("assets/WelcomeScreen/pin_icon.png"),
                          )
                        ),
                      ),
                      const SizedBox(height: 17,),
                      Container(
                        padding: EdgeInsets.only(left: 25),
                        alignment: Alignment.topLeft,
                        child: Text("Please enter security pin", style:
                        Styles.generateWeightFont(Colors.black, 24, FontWeight.w400),),
                      ),
                      const SizedBox(height: 15,),
                      Container(
                        padding: EdgeInsets.only(left: 25, right: 25),
                        child: buildCommonTextField("", pinCodeReader, whiteGrey, TextInputType.number),
                      ),
                      const SizedBox(height: 12,),
                      Container(
                        alignment: Alignment.center,
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.center,
                          crossAxisAlignment: CrossAxisAlignment.center,
                          children: [
                            Container(
                              width: 100,
                              height: 50,
                              alignment: Alignment.center,
                              decoration: BoxDecoration(
                                border: Border.all(color: greyColor, width: 1)
                              ),
                              child: Text("Cancel", style: Styles.generateWeightFont(greyColor, 18, FontWeight.w700),),

                            ),
                            const SizedBox(width: 10,),
                            Container(
                              width: 114,
                              height: 48,
                              alignment: Alignment.center,
                              decoration: BoxDecoration(
                                color: appVioletColor,
                                  border: Border.all(color: greyColor, width: 1)
                              ),
                              child: Text("Done", style: Styles.generateWeightFont(Colors.white, 18, FontWeight.w700),),

                            ),
                          ],
                        ),
                      )

                    ],
                  ),
                      ],
                ),

                  ),
                )
            )
            )
    );
  }
}

Anyone has an idea what's going on? thanks

Answer 1

When the keyboard appears or disappears, it is an animation that can last for a little while. During this, the available screen area for your app is constantly changing: on opening the keyboard it shrinks, on closing the keyboard it grows.

Whenever you use MediaQuery.of(context) in your code, Flutter engine will keep notifying your widget about media changes, causing rebuilds. So in your case the widget is rebuilt on every animation frame caused by opening or closing the keyboard.

This is an intended behaviour, for example if the user rotates the screen, the available MediaQuery.of(context).size will change, and it should result in a rebuild. If you'd like to avoid this, organize you code in a way that it calls MediaQuery.of(context) only in those parts where you want to get updates about media parameters constantly.