Flutter keyboard not showing up on both emulator and real devices>

Issue

What I mean is that the keyboard did show up for milliseconds and it then disappeared immediately, this is inside a Modal Bottom Sheet, but I don’t think it’s the problem of the Sheet.

Container(
  height: 50,
  width: double.infinity,
  padding: const EdgeInsets.only(left: 20),
  decoration: BoxDecoration(
    color: kAccent,
    border: Border(
      top: BorderSide(color: kBackground, width: 0.5),
    ),
  ),
  child: Container(
        alignment: Alignment.center,
        padding: const EdgeInsets.only(left: 10),
        width: hasText ? 300 : 350,
        height: 40,
        alignment: Alignment.center,
        decoration: BoxDecoration(
          color: kPrimary,
          borderRadius: BorderRadius.circular(15),
        ),
        child: TextField(
          focusNode: _komNode,
          controller: _kommentCtrl,
          decoration: InputDecoration.collapsed(
            hintText: 'Leave seme nice K-omments~',
            hintStyle: kOnPrimaryMediumText,
          ),
          maxLength: 100,
        ),
      ),
);

I saw some people says this is the bug of compile version 28, and it can be fix if you downgrade it to 27, but my project is Sound Null Safety already, and if I do the downgrade, I have to rewrite the whole app, thus, I can’t downgrade it to 27.

Can anybody help me to fix this issue? @_@

Solution

Try adding a key to the TextField,

child: TextField(
          key: ValueKey("Your unique value"),  
          focusNode: _komNode,
          controller: _kommentCtrl,
          decoration: InputDecoration.collapsed(
            hintText: 'Leave seme nice K-omments~',
            hintStyle: kOnPrimaryMediumText,
          ),
          maxLength: 100,
        ),

Update

I think the problem is that the text field loses focus when you open the modal sheet and thus the keyboard closes, so try and declare your widget outside your build method first. like this:

final _myModalSheet =  Container(
  //...
  child: Container(
        //...
        child: TextField(
          focusNode: _komNode,
          controller: _kommentCtrl,
          //...
          ),
        ),
      ),
);

and then add _myModalSheet in your build method.

Answered By – Michael Soliman

Answer Checked By – Willingham (FlutterFixes Volunteer)