简体   繁体   中英

textfield opens keyboard flutter scaffold

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.

they advised me to manage everything in a Scaffold and then set resizeToAvoidBottomInset: false but I don't notice any improvements

I have already asked this question, and they told me to enclose everything in a scaffold. I tried but this really ruins the view, I don't see anything

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

    double splitPoint = size.height / 7;

    return Scaffold(
        resizeToAvoidBottomInset: false,
        body: Stack(
            children: [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(
                  top: size.height * .10,
                  width: size.width * .8,
                  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,
                    ),
                  ),
                ),
              ],
            );
          }),
    ]),
    );
  }
}

UPDATE: 在此处输入图像描述

I have to say you are using stack and positioned too much. There is no need to calculate everything. Rather use flutter widgets like Expanded or padding to make required space between and around widgets. I could not easily fix your code but I at least tried to write it in similar way. This code will prevent input overlay. Please check:

    import 'package:flutter/material.dart';

class TestPage extends StatefulWidget {
  @override
  _TestPageState createState() => _TestPageState();
}

class _TestPageState extends State<TestPage> {

  final Future<String> getUserData = Future<String>.delayed(
    const Duration(seconds: 2),
    () => 'Data Loaded',
  );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomInset: true,
      body: SafeArea(
        child: Padding(
          padding: const EdgeInsets.all(28.0),
          child: Column(
            children: [
              Expanded(
                child: FutureBuilder<String>(
                    future: getUserData,
                    builder: (context, AsyncSnapshot<String> 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>(
                                    Colors.yellow)),
                          ),
                        );
                      return Column(
                        children: [
                          // TITOLO
                          Text(
                            "qr",
                            style: Theme.of(context)
                                .primaryTextTheme
                                .headline5
                                .copyWith(
                                  color: Colors.green,
                                  fontWeight: FontWeight.bold,
                                ),
                          ),

                          Expanded(
                              child: Center(
                                  child: Text(
                            "something",
                          ))),
                          Container(
                            color: Colors.blue,
                            child: Padding(
                              padding: const EdgeInsets.all(1.0),
                              child: TextField(
                                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,
                                ),
                              ),
                            ),
                          ),
                        ],
                      );
                    }),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM