I’m using a stack to display 3 widgets, and I want 1 to be stacked on top of the other 2 which I have achived, but the stacked widget has a text field which when I try to use, the keyboard shoves the unstacked elements up but the stacked element stays in place making the UI inconsistent,

These are the visual representations to better understand what I’m talking,

Following is my code –

return SafeArea(
      child: Scaffold(
        // resizeToAvoidBottomInset: false,
        body: GestureDetector(
          onTap: () {
            FocusScope.of(context).requestFocus(FocusNode());
          },
          child: Stack(
            clipBehavior: Clip.hardEdge,
            children: [
              Column(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  const BrandLogoName(),
                  const PrivacyConditionsHyper(),
                ],
              ),
              Visibility(
                visible: true,
                child: Positioned(
                  top: MediaQuery.of(context).size.height * 0.2,
                  left: 0,
                  right: 0,
                  child: EnterUserDetailsWidget(),
                ),
              ),
            ],
          ),
        ),
      ),
    );

Best Regards!