TextField shrinking/scrolling when keyboard appears using keyboard_actions package flutter

Question

I am using keyboard_actions 3.1.2 https://pub.dev/packages/keyboard_actions and my text field is hiding when keyboard appears on screen . I have attached three images of my problem on iOS where you can see

1. a pop up which is asking to input number
2. when i am typing the number my text box is not visible. - keyboard appearing on screen
3. Once i click on Done , my text is appearing. - keyboard closed

pop up i have used is stateless widget. below is my code .

FocusNode _nodeText1 = FocusNode();



 KeyboardActionsConfig _buildConfig(BuildContext context) {
return KeyboardActionsConfig(
  keyboardActionsPlatform: KeyboardActionsPlatform.ALL,
  keyboardBarColor: Colors.grey[200],
  nextFocus: true,
  actions: [
    KeyboardAction(
      focusNode: _nodeText1,
      closeWidget: Padding(
        padding: EdgeInsets.all(5.0),
        child: Text(
          "CLOSE",
          style: TextStyle(color: Colors.black, fontSize: 14),
        ),
      ),
    ),
  ],
);}


Widget build(BuildContext context) {
return Dialog(
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(Consts.padding),
  ),
  elevation: 0.0,
  backgroundColor: Colors.transparent,
  child: Container(
  height: MediaQuery.of(context).size.height / 3,
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(Consts.padding),
    color: Colors.white,
  ),
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    mainAxisAlignment: MainAxisAlignment.start,
    children: <Widget>[

      Padding(
        padding: const EdgeInsets.only(left: 20.0),
        child: Container(
          width: MediaQuery.of(context).size.width / 3,
          height: 40,
          //padding: EdgeInsets.all(10.0),

          child: KeyboardActions(
            config: _buildConfig(context),
            child: TextField(
              textAlign: TextAlign.center,
              //  controller: oTPInputController,
              style: TextStyle(
                fontSize: 14.0,
                color: Theme.of(context).primaryColorDark,
                fontWeight: FontWeight.bold,
              ),
              keyboardType: TextInputType.number,
              focusNode: _nodeText1,
              decoration: InputDecoration(
                hintText: "Input Number",
                hintStyle: TextStyle(
                    fontSize: 14.0,
                    color: Theme.of(context).primaryColorDark),
                enabledBorder: UnderlineInputBorder(
                  borderSide:
                      BorderSide(color: Theme.of(context).primaryColorDark),
                ),
                focusedBorder: UnderlineInputBorder(
                  borderSide:
                      BorderSide(color: Theme.of(context).primaryColorDark),
                ),
              ),
            ),
          ),
        ),

      ),

    ],
  ),
),
);}

[1. pop up which is asking to input number][1] [2. i am typing the number my text box is not visible][2] [3. Once i click on Done , my text is appearing][3] [1]: https://i.sstatic.net/yHNw4.png
[2]: https://i.sstatic.net/PCjoV.png [3]: https://i.sstatic.net/68NRV.png

Thanks in advance.

Answer 1

That's odd. It's a current issue in the library itself. See this github issue.

My suggestions:

1. Set mainAxisSize: MainAxisSize.min in Column build method.
2. If you have an ScrollView-derived class, AnimatedList or ListView set shrinkWrap: false.
3. Set autoScroll: false in KeyboardAction, and try setting either areaToAvoid: 0 or overscroll: 0.
4. In the screen containing/showing/presenting the dialogue, try setting resizeToAvoidBottomInset : false in the Scaffold build method (Docs).

Honestly responsiveness to keyboard notifications isn't that great in Flutter. For example it's not possible to sync animation of moving some widget upwards/downwards with keyboard opening/closing animation.

Well done on the detailed question and conveying your problem correctly. HTH