文本字段打开键盘中断视图

Question

As you can see from the video I posted , I have a constraint problem regarding the textfield below. once I press, the keyboard opens but it overlaps and ruins the whole view. how can I solve and manage the problem?

The problem perhaps is that the dimensions for the qrima are badly set.

      Future<Widget> buildQrCode() async {
    Map<String, dynamic> myData = {
      'type': 1,
      'content': connection.name, //TODO check
      'display_name': "${(await contentManager.getUserInfo()).shopName}",
      //'collaborator': connection.name, //TODO check
      'mac': await Utilities.getDeviceMac(),
    };

    String encodedJson = jsonEncode(myData);
    QrCodeEncrypter.encrypt(connection.password, myData);
    Size size = MediaQuery.of(context).size;

    return QrImage(
      data: encodedJson,
      size: size.width / 1.5,
      gapless: false,
    );
  }

  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    _buttonHeight = size.height * .05;

    double splitPoint = size.height / 7;

    return FutureBuilder<UserData>(
        future: contentManager.getUserData(),
        builder: (context, AsyncSnapshot<UserData> snapUserData) {
          if (snapUserData.hasError)
            return Container(
              child: Center(
                child: Text("There was some error"),
              ),
            );
          if (snapUserData.connectionState != ConnectionState.done)
            return Container(
              child: Center(
                child: CircularProgressIndicator(valueColor: new AlwaysStoppedAnimation<Color>(appColors.yellow)),
              ),
            );
          return Stack(
            alignment: AlignmentDirectional.center,
            children: [
              // SFONDO
              Positioned(
                bottom: 0,
                child: Container(
                  height: size.height,
                  width: size.width,
                  color: appColors.primaryColor,
                ),
              ),
              // TITOLO
              Positioned(
                top: size.height * .05,
                child: Text(
                  localization.showQR,
                  style: Theme.of(context).primaryTextTheme.headline5.copyWith(
                    color: appColors.green,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ),
              Positioned.fill(
                top: size.height * .10,
                child: Align(
                  alignment: Alignment.topCenter,
                  child: qrCodeHolder,
                ),
              ),
              Positioned(
                bottom: size.height * .18,
                width: size.width * .8,
                child: AutoSizeText(
                  localization.home_subLabel,
                  textAlign: TextAlign.center,
                  maxLines: 1,
                  style: Theme.of(context).primaryTextTheme.headline5.copyWith(
                    color: appColors.green,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ),
              Positioned(
                bottom: size.height * .08,
                width: size.width * .7,
                height: size.height * .05,
                child: TextField(
                  inputFormatters: [
                    new LengthLimitingTextInputFormatter(11),
                  ],
                  decoration: InputDecoration(
                    filled: true,
                    fillColor: Colors.white,
                    focusedBorder: OutlineInputBorder(
                      borderSide: BorderSide(color: Colors.white),
                    ),
                    enabledBorder: UnderlineInputBorder(
                      borderSide: BorderSide(color: Colors.white),
                    ),
                  ),
                  textAlign: TextAlign.center,
                  style: TextStyle(
                    fontSize: 18.0,
                    //height: 2.0,
                    color: Colors.black,
                  ),
                ),
              ),
            ],
          );
        });
  }
}

Answer 1

set in your page Scaffold resizeToAvoidBottomInset: false,

If true the body and the scaffold's floating widgets should size themselves to avoid the onscreen keyboard whose height is defined by the ambient MediaQuery's MediaQueryData.viewInsets bottom property.

For example, if there is an onscreen keyboard displayed above the scaffold, the body can be resized to avoid overlapping the keyboard, which prevents widgets inside the body from being obscured by the keyboard.

Defaults to true.