Flutter TextField - How to support submission on <ENTER> _and_ newline on <SHIFT-ENTER>

For what it's worth, I was able to concoct a reasonable solution that I'll post below in case anyone runs into this themselves.

I wrapped the Textfield in a keyboard listener which calls my onSend function when it see's an <Enter>. I tried this before, but I guess earlier I was missing the cast to RawKeyEventDataWeb which allowed me to capture isShiftPressed to allow for new lines on <SHFT-ENTER> without forcing a send. Unfortunately I had to add some hacky code to remove the \n that's added when pressing enter, but that's a small price to pay for functional + modern messaging.

RawKeyboardListener(
   focusNode: focusNode,
   onKey: handleKeyPress,
   child: TextField(
        controller: messageController,
        minLines: 1,
        maxLines: null,
        textInputAction: TextInputAction.done,
        style: normalTextStyle,
        keyboardType: TextInputType.multiline,
        decoration: InputDecoration(
             isDense: true,
             hintText: 'Type a message',
             hintStyle: TextStyle(
                  fontSize: 16,
                  color: Color(0xFF474749),
             ),
             border: InputBorder.none,
        ),
    ),
)

void handleKeyPress(event) {
if (event is RawKeyUpEvent && event.data is RawKeyEventDataWeb) {
  var data = event.data as RawKeyEventDataWeb;
  if (data.code == "Enter" && !event.isShiftPressed) {
    final val = messageController.value;
    final messageWithoutNewLine =
        messageController.text.substring(0, val.selection.start - 1) +
            messageController.text.substring(val.selection.start);
    messageController.value = TextEditingValue(
      text: messageWithoutNewLine,
      selection: TextSelection.fromPosition(
        TextPosition(offset: messageWithoutNewLine.length),
      ),
    );
    _onSend();
  }
}
}

This can be achieved by adding a FocusNode to the TextField. Place the focus node in your widget's state.

late final _focusNode = FocusNode(
  onKey: (FocusNode node, RawKeyEvent evt) {
    if (!evt.isShiftPressed && evt.logicalKey.keyLabel == 'Enter') {
      if (evt is RawKeyDownEvent) {
        _sendMessage();
      }
      return KeyEventResult.handled;
    }
    else {
      return KeyEventResult.ignored;
    }
  },
);

In your build function add the focus when creating the TextField.

TextField(
  autofocus: true,
  controller: _textController,
  focusNode: _focusNode,
)

The best way to have the Enter key be disabled for the input and instead send it when no ctrl key is pressed is through the focusNode directly on the input, this way you won't have to remove extra new lines.

class _InputTextState extends State<InputText> {
  late final _focusNode = FocusNode(onKey: handleKeyPress);
 
  @override
  Widget build(BuildContext context) {
    return TextField(
      focusNode: _focusNode,
    );
  }

  KeyEventResult handleKeyPress(FocusNode focusNode, RawKeyEvent event) {
    // handles submit on enter
    if (kIsWeb &&
        event.isKeyPressed(LogicalKeyboardKey.enter) &&
        !event.isControlPressed &&
        !event.isShiftPressed) {
      widget.onSubmit();
    // handled means that the event will not propagate
      return KeyEventResult.handled;
    }
    return KeyEventResult.ignored;
  }
}

This is what I am using in my TextField to support newline on enter.

class TextInputsWidget extends StatelessWidget {
  final TextEditingController chatTextFieldController = TextEditingController();
  late final _focusNode = FocusNode(
    onKey: _handleKeyPress,
  );

  KeyEventResult _handleKeyPress(FocusNode focusNode, RawKeyEvent event) {
    // handles submit on enter
    if (event.isKeyPressed(LogicalKeyboardKey.enter) && !event.isShiftPressed) {
      _sendMessage();
      // handled means that the event will not propagate
      return KeyEventResult.handled;
    }
    // ignore every other keyboard event including SHIFT+ENTER
    return KeyEventResult.ignored;
  }

  void _sendMessage() {
    if (chatTextFieldController.text.trim().isNotEmpty) {
      // Do something with your input text
      print(chatTextFieldController.text.trim());

      // bring focus back to the input field
      Future.delayed(Duration.zero, () {
        _focusNode.requestFocus();
        chatTextFieldController.clear();
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: TextField(
        keyboardType: TextInputType.multiline,
        maxLines: null,
        textInputAction: TextInputAction.newline,
        autofocus: true,
        focusNode: _focusNode,
        controller: chatTextFieldController,
        decoration: const InputDecoration(
          border: InputBorder.none,
          contentPadding: EdgeInsets.fromLTRB(8, 0, 0, 0),
          hintText: "Enter your message here",
          hintStyle: TextStyle(color: Colors.black54),
        ),
      ),
    );
  }
}

There are mainly 3 key changes

• keyboardType: TextInputType.multiline,
• textInputAction: TextInputAction.newline,
• FocusNode which can listen to keyboard events