Search code examples
flutterkeyboardtextfield

Is there a way to keep keyboard focus?


I have a TextField widget to add players in a List. But I want the keyboard to stay focus when I add players, and on submit, my keyboard keeps loosing focus.. Any Idea ?

Here is my TextField widget:

TextField(
          textCapitalization: TextCapitalization.words,
          onChanged: (val) => playerName = val.trim(),
          onSubmitted: (val) {
            if (playerName != null && playerName != '') {
              Provider.of<PlayerProvider>(context, listen: false).addPlayer(playerName);
              HapticFeedback.lightImpact();
            }
          },
          maxLength: 19,
          autocorrect: false,
          decoration: new InputDecoration(
              counterText: "",
              border: new OutlineInputBorder(
                borderSide: BorderSide.none,
                borderRadius: const BorderRadius.all(
                  const Radius.circular(30.0),
                ),
              ),
              filled: true,
              contentPadding: EdgeInsets.symmetric(vertical: 0, horizontal: 20),
              hintStyle: GoogleFonts.rubik(color: Colors.grey[500], fontWeight: FontWeight.bold),
              hintText: AppLocalizations.of(context).translate('player_selection_page_hint'),
              fillColor: Colors.white),
        )

By the way, the autofocus: true works but it kinda unFocus the keyboard and give the focus back instantly... So it's not nice to watch. So If you have another idea please.


Solution

  • I think you should try using FocusNode.

    class MyCustomForm extends StatefulWidget {
      @override
      _MyCustomFormState createState() => _MyCustomFormState();
    }
    
    // Define a corresponding State class.
    // This class holds data related to the form.
    class _MyCustomFormState extends State<MyCustomForm> {
      // Define the focus node. To manage the lifecycle, create the FocusNode in
      // the initState method, and clean it up in the dispose method.
      FocusNode myFocusNode;
    
      @override
      void initState() {
        super.initState();
    
        myFocusNode = FocusNode();
      }
    
      @override
      void dispose() {
        // Clean up the focus node when the Form is disposed.
        myFocusNode.dispose();
    
        super.dispose();
      }
    
      @override
      Widget build(BuildContext context) {
        return TextField(
              focusNode: myFocusNode
              textCapitalization: TextCapitalization.words,
              onChanged: (val) => playerName = val.trim(),
              onSubmitted: (val) {
                if (playerName != null && playerName != '') {
                  Provider.of<PlayerProvider>(context, listen: false).addPlayer(playerName);
                  HapticFeedback.lightImpact();
                }
                myFocusNode.requestFocus();
              },
              maxLength: 19,
              autocorrect: false,
              decoration: new InputDecoration(
                  counterText: "",
                  border: new OutlineInputBorder(
                    borderSide: BorderSide.none,
                    borderRadius: const BorderRadius.all(
                      const Radius.circular(30.0),
                    ),
                  ),
                  filled: true,
                  contentPadding: EdgeInsets.symmetric(vertical: 0, horizontal: 20),
                  hintStyle: GoogleFonts.rubik(color: Colors.grey[500], fontWeight: FontWeight.bold),
                  hintText: AppLocalizations.of(context).translate('player_selection_page_hint'),
                  fillColor: Colors.white),
            );
      }
    }