Text in TextField scrolls up after opening the keyboard

[SergeiMikhailovskii]

Hello, I faced with the following problem after adding your keyboard: when I open the keyboard text in TextField scrolls up and isn't shown until I close the keyboard. Here are the screenshots:

Before opening of the keyboard:

After opening:

Text in textfield didn't disappear but it only scrolled up that it's not visible now, unfortunately I can't show it. So, here's the way how I implemented keyboard to my widget:

class InputGoalWidget extends StatefulWidget {
  final bool isValid = true;

  final String title;
  final String hint;
  final TextInputType tit;
  final String emoji;
  final TextEditingController controller;

  InputGoalWidget({this.title, this.hint, this.emoji, this.controller, this.tit});

  @override
  _InputGoalWidgetState createState() => _InputGoalWidgetState();
}

class _InputGoalWidgetState extends State<InputGoalWidget> with SingleTickerProviderStateMixin {
  AnimationController animationController;
  Animation<double> animation;
  FocusNode _node = FocusNode();

  KeyboardActionsConfig _buildConfig(BuildContext context) {
    return KeyboardActionsConfig(
      keyboardActionsPlatform: KeyboardActionsPlatform.ALL,
      keyboardBarColor: Colors.white,
      nextFocus: false,
      actions: [
        KeyboardAction(
          focusNode: _node,
          displayCloseWidget: true,
        ),
      ],
    );
  }

  @override
  void initState() {
    super.initState();
    animationController = AnimationController(
      vsync: this,
      duration: Duration(milliseconds: 600),
    )..addListener(() => setState(() {}));

    animation = Tween<double>(
      begin: 50.0,
      end: 120.0,
    ).animate(CurvedAnimation(
      parent: animationController,
      curve: Interval(0.8, 1.0, curve: Curves.fastOutSlowIn),
    ));

    animationController.forward();
  }

  @override
  Widget build(BuildContext context) {
    return buildContainer(context);
  }

  Container buildContainer(BuildContext context) {
    return Container(
      margin: EdgeInsets.only(top: 3),
      color: Color(AppColors.white),
      child: Padding(
        padding: const EdgeInsets.only(top: 15, bottom: 10),
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Padding(
              padding: const EdgeInsets.only(left: 20.0, right: 16),
              child: Text(
                widget.emoji,
                textAlign: TextAlign.justify,
                style: TextStyle(fontSize: 32),
              ),
            ),
            Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Text(widget.title, style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
                Container(
                  height: MediaQuery.of(context).size.height * 0.06,
                  width: MediaQuery.of(context).size.width * 0.7,
                  child: Center(
                    child: Padding(
                      padding: const EdgeInsets.only(bottom: 0),
                        child: FormKeyboardActions(
                          config: _buildConfig(context),
                          child: TextField(
                            textCapitalization: TextCapitalization.sentences,
                            focusNode: _node,
                            style: TextStyle(
                              fontSize: 18,
                              color: Color(AppColors.brandViolet),
                              fontWeight: FontWeight.w500,
                            ),
                            keyboardType: widget.tit,
                            inputFormatters: widget.tit == TextInputType.number ? [WhitelistingTextInputFormatter.digitsOnly] : null,
                            decoration: InputDecoration(
                              hintText: widget.hint,
                              border: InputBorder.none,
                            ),
                            controller: widget.controller,
                          ),
                        ),
                    ),
                  ),
                )
              ],
            )
          ],
        ),
      ),
    );
  }
}

And here's the way how this widgets are used in the screen:

 Flexible(
            flex: 1,
            child: ListView(
              children: <Widget>[
                _nameWidget,
                _calorieWidget,
                _stepsWidget,
                _waterWidget,
              ],
            ),
          ),

So. _nameWidget, _calorieWidget, _stepsWidget and _waterWidget are InputGoalWidgets. Why such issue can happen? Thanks in advance for any help!

[diegoveloper]

Could you add a gif about the issue?

…

On Mon, Nov 25, 2019, 6:24 AM Sergei Mikhailovskii ***@***.***> wrote: Hello, I faced with the following problem after adding your keyboard: when I open the keyboard text in TextField scrolls up and isn't shown until I close the keyboard. Here are the screenshots: Before opening of the keyboard: [image: Screen Shot 2019-11-25 at 14 17 42] <https://user-images.githubusercontent.com/33265881/69536148-820ec480-0f8e-11ea-9476-a815cfde7c74.png> After opening: [image: Screen Shot 2019-11-25 at 14 18 21] <https://user-images.githubusercontent.com/33265881/69536191-994db200-0f8e-11ea-840d-4a538b49e0e9.png> Text in textfield didn't disappear but it only scrolled up that it's not visible now, unfortunately I can't show it. So, here's the way how I implemented keyboard to my widget: class InputGoalWidget extends StatefulWidget { final bool isValid = true; final String title; final String hint; final TextInputType tit; final String emoji; final TextEditingController controller; InputGoalWidget({this.title, this.hint, this.emoji, this.controller, this.tit}); @OverRide _InputGoalWidgetState createState() => _InputGoalWidgetState(); } class _InputGoalWidgetState extends State<InputGoalWidget> with SingleTickerProviderStateMixin { AnimationController animationController; Animation<double> animation; FocusNode _node = FocusNode(); KeyboardActionsConfig _buildConfig(BuildContext context) { return KeyboardActionsConfig( keyboardActionsPlatform: KeyboardActionsPlatform.ALL, keyboardBarColor: Colors.white, nextFocus: false, actions: [ KeyboardAction( focusNode: _node, displayCloseWidget: true, ), ], ); } @OverRide void initState() { super.initState(); animationController = AnimationController( vsync: this, duration: Duration(milliseconds: 600), )..addListener(() => setState(() {})); animation = Tween<double>( begin: 50.0, end: 120.0, ).animate(CurvedAnimation( parent: animationController, curve: Interval(0.8, 1.0, curve: Curves.fastOutSlowIn), )); animationController.forward(); } @OverRide Widget build(BuildContext context) { return buildContainer(context); } Container buildContainer(BuildContext context) { return Container( margin: EdgeInsets.only(top: 3), color: Color(AppColors.white), child: Padding( padding: const EdgeInsets.only(top: 15, bottom: 10), child: Row( crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[ Padding( padding: const EdgeInsets.only(left: 20.0, right: 16), child: Text( widget.emoji, textAlign: TextAlign.justify, style: TextStyle(fontSize: 32), ), ), Column( crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[ Text(widget.title, style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)), Container( height: MediaQuery.of(context).size.height * 0.06, width: MediaQuery.of(context).size.width * 0.7, child: Center( child: Padding( padding: const EdgeInsets.only(bottom: 0), child: FormKeyboardActions( config: _buildConfig(context), child: TextField( textCapitalization: TextCapitalization.sentences, focusNode: _node, style: TextStyle( fontSize: 18, color: Color(AppColors.brandViolet), fontWeight: FontWeight.w500, ), keyboardType: widget.tit, inputFormatters: widget.tit == TextInputType.number ? [WhitelistingTextInputFormatter.digitsOnly] : null, decoration: InputDecoration( hintText: widget.hint, border: InputBorder.none, ), controller: widget.controller, ), ), ), ), ) ], ) ], ), ), ); } } And here's the way how this widgets are used in the screen: ``` Flexible( flex: 1, child: ListView( children: [ _nameWidget, _calorieWidget, _stepsWidget, _waterWidget, ], ), ), So. `_nameWidget`, `_calorieWidget`, `_stepsWidget` and `_waterWidget `are `InputGoalWidget`s. Why such issue can happen? Thanks in advance for any help! — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#48?email_source=notifications&email_token=ABFL3UDPOG3OP5Q5GTYR3BTQVOYVXA5CNFSM4JRHNGNKYY3PNVWWK3TUL52HS4DFUVEXG43VMWVGG33NNVSW45C7NFSM4H3Y7PGQ>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABFL3UDVS4JETIJ3WCEOOBTQVOYVXANCNFSM4JRHNGNA> .

[SergeiMikhailovskii]

Sure, here it is

[diegoveloper]

Try adding mainAxisSize: MainAxisSize.min, to your Column widget

…

On Tue, Nov 26, 2019, 2:34 AM Sergei Mikhailovskii ***@***.***> wrote: Sure, here it is [image: keyboard] <https://user-images.githubusercontent.com/33265881/69608306-37e21d80-1038-11ea-9029-edac4a8fd40d.gif> — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#48?email_source=notifications&email_token=ABFL3UBQ75DTOZ6B7ORJMBDQVTGOTA5CNFSM4JRHNGNKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEFFAVSY#issuecomment-558500555>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABFL3UGZ5HNUGNCKHUM3EPDQVTGOTANCNFSM4JRHNGNA> .

[SergeiMikhailovskii]

I modified it in this way:

Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                Text(widget.title, style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
                Container(
                  height: MediaQuery.of(context).size.height * 0.06,
                  width: MediaQuery.of(context).size.width * 0.7,
                  child: Center(
                    child: Padding(
                      padding: const EdgeInsets.only(bottom: 0),
                        child: FormKeyboardActions(
                          config: _buildConfig(context),
                          child: TextField(
                            textCapitalization: TextCapitalization.sentences,
                            focusNode: _node,
                            style: TextStyle(
                              fontSize: 18,
                              color: Color(AppColors.brandViolet),
                              fontWeight: FontWeight.w500,
                            ),
                            keyboardType: widget.tit,
                            inputFormatters: widget.tit == TextInputType.number ? [WhitelistingTextInputFormatter.digitsOnly] : null,
                            decoration: InputDecoration(
                              hintText: widget.hint,
                              border: InputBorder.none,
                            ),
                            controller: widget.controller,
                          ),
                        ),
                    ),
                  ),
                )
              ],
            )

But it still doesn't work. Or I didn't understand you in the right way

[diegoveloper]

Try adding a minimum sample code to reproduce the issue here.

…

On Wed, Nov 27, 2019, 2:08 AM Sergei Mikhailovskii ***@***.***> wrote: I modified it in this way: Column( crossAxisAlignment: CrossAxisAlignment.start, mainAxisSize: MainAxisSize.min, children: <Widget>[ Text(widget.title, style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)), Container( height: MediaQuery.of(context).size.height * 0.06, width: MediaQuery.of(context).size.width * 0.7, child: Center( child: Padding( padding: const EdgeInsets.only(bottom: 0), child: FormKeyboardActions( config: _buildConfig(context), child: TextField( textCapitalization: TextCapitalization.sentences, focusNode: _node, style: TextStyle( fontSize: 18, color: Color(AppColors.brandViolet), fontWeight: FontWeight.w500, ), keyboardType: widget.tit, inputFormatters: widget.tit == TextInputType.number ? [WhitelistingTextInputFormatter.digitsOnly] : null, decoration: InputDecoration( hintText: widget.hint, border: InputBorder.none, ), controller: widget.controller, ), ), ), ), ) ], ) But it still doesn't work. Or I didn't understand you in the right way — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#48?email_source=notifications&email_token=ABFL3UAPRAJ4TU5CPJOBH3TQVYMFFA5CNFSM4JRHNGNKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEFIQ3QQ#issuecomment-558960066>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABFL3UABTICU5GYYLUEZD6LQVYMFFANCNFSM4JRHNGNA> .

[ShrutiThakur01]

Hello All,

any update about this?
I am facing same problem. i have already posted my problem in detail on Stack Overflow.

https://stackoverflow.com/questions/59353957/textfield-shrinking-scrolling-when-keyboard-appears-using-keyboard-actions-packa

Thanks in advance

[diegoveloper]

Could you add a minimum sample code to reproduce the issue?

…

On Mon, Dec 16, 2019, 6:21 AM ShrutiThakur01 ***@***.***> wrote: Hello All, any update about this? I am facing same problem. i have already posted my problem in detail on Stack Overflow. https://stackoverflow.com/questions/59353957/textfield-shrinking-scrolling-when-keyboard-appears-using-keyboard-actions-packa <http://url> Thanks in advance — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#48?email_source=notifications&email_token=ABFL3UFT6YKOGDP3SDG7E33QY5QCXA5CNFSM4JRHNGNKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEG6MNPY#issuecomment-566019775>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABFL3UBC6PKFJZ3VRDIAUD3QY5QCXANCNFSM4JRHNGNA> .

[EricBichara]

I'm also seeing this issue, will try to create a sample soon

[edblocker]

I'm experiencing the same behaviour

[sergeatoma]

Same here

[diegoveloper]

Please add a quick/small sample that I could run on my own to reproduce it.

…

On Tue, Mar 10, 2020, 10:48 AM sergeatoma ***@***.***> wrote: Same here — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#48?email_source=notifications&email_token=ABFL3UBTPTPIMYYO6URMWSLRGZOOLA5CNFSM4JRHNGNKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEOL7EYA#issuecomment-597160544>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABFL3UDVQUO2M5KKNLMYP2TRGZOOLANCNFSM4JRHNGNA> .

[sergeatoma]

@diegoveloper you can easily paste code below as is, and check. Thanks!

import 'package:flutter/material.dart';
import 'package:keyboard_actions/keyboard_actions.dart';
import 'package:keyboard_actions/keyboard_actions_config.dart';

class KeyboardTestScreen extends StatefulWidget {
  @override
  _KeyboardTestScreenState createState() => _KeyboardTestScreenState();
}

class _KeyboardTestScreenState extends State<KeyboardTestScreen> {
  final FocusNode _amountFocusNode = FocusNode();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Keyboard test"),
      ),
      body: _rootWidgetBuilder(context),
    );
  }

  Widget _rootWidgetBuilder(BuildContext context) {
    return ListView(
      children: <Widget>[
        Container(
          height: 100.0,
          color: Colors.grey,
        ),
        _problemSection(context),
        Container(
          height: 100.0,
          color: Colors.black54,
        ),
      ],
    );
  }

  KeyboardActionsConfig _buildKeyboardActions(BuildContext context) {
    return KeyboardActionsConfig(
        keyboardActionsPlatform: KeyboardActionsPlatform.IOS,
        actions: [
          KeyboardAction(
            focusNode: _amountFocusNode,
            displayArrows: false,
            displayDoneButton: true,
          )
        ]);
  }

  Widget _problemSection(BuildContext context) {
    const TextStyle sampleTextStyle = TextStyle(
      fontSize: 24.0,
      color: Colors.red,
      letterSpacing: 1.0,
      fontWeight: FontWeight.w600,
    );
    return Container(
      height: 120.0,
      padding: EdgeInsets.only(
        left: 24.0,
        right: 24.0,
      ),
      child: KeyboardActions(
        config: _buildKeyboardActions(context),
        child: Row(
          children: <Widget>[
            Container(
              width: 72.0,
              height: 72.0,
              margin: EdgeInsets.only(right: 24.0),
              child: Icon(Icons.access_alarm),
            ),
            Expanded(
              child: TextFormField(
                focusNode: _amountFocusNode,
                keyboardType: TextInputType.numberWithOptions(
                    signed: false, decimal: true),
                style: sampleTextStyle,
                decoration: InputDecoration(
                  contentPadding: EdgeInsets.only(top: 0.0),
                  labelText: "Label",
                  labelStyle: TextStyle(
                      fontSize: 16.0,
                      color: Colors.grey,
                      fontWeight: FontWeight.w500),
                  helperStyle: TextStyle(
                      fontSize: 12.0,
                      color: Colors.grey,
                      fontWeight: FontWeight.w500),
                  helperText: "Long description",
                  prefixText: "\$",
                  alignLabelWithHint: true,
                  prefixStyle: sampleTextStyle.copyWith(height: 1.8),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

[diegoveloper]

@sergeatoma use KeyboardActions as a parent of your ListView

  Widget _rootWidgetBuilder(BuildContext context) {
    return KeyboardActions(
      config: _buildKeyboardActions(context),
      child: ListView(
        children: <Widget>[
          Container(
            height: 100.0,
            color: Colors.grey,
          ),
          _problemSection(context),
          Container(
            height: 100.0,
            color: Colors.black54,
          ),
        ],
      ),
    );
  }

[luckymehndiratta]

After Update Flutter version we face this issue and App Hang
/InputMethodManager(19541): Starting input: tba=com.example.mannforce_hcm ic=io.flutter.plugin.editing.InputConnectionAdaptor@9f4eb0d mNaviBarColor -855310 mIsGetNaviBarColorSuccess true , NavVisible : true , NavTrans : false
D/InputMethodManager(19541): startInputInner - Id : 0