플러터(flutter)에서 shift+enter로 줄넘김(new line) 구현하기

채팅 앱 등을 만들 때 기존 서비스들 처럼 

Shift키와 enter키를 같이 누르면 줄넘김(new line)이 되고

enter키만 누르면 전송(기존 로직)이 되도록 하는 방법

 

1. ininState()에서 focusNode를 설정한다.

class ChatScreenState extends State<ChatScreen> {
final FocusNode _focusNode = FocusNode();

@override
  void initState() {
    super.initState();
    textController = TextEditingController();

    _focusNode.onKeyEvent = (node, event) {
      if (event is KeyDownEvent) {
        final isShiftPressed = HardwareKeyboard.instance.logicalKeysPressed
            .contains(LogicalKeyboardKey.shiftLeft);

        if (event.logicalKey == LogicalKeyboardKey.enter && isShiftPressed) {
          // 줄바꿈 처리
          final text = textController.text;
          final selection = textController.selection;
          final newText =
              text.replaceRange(selection.start, selection.end, '\n');
          textController.value = TextEditingValue(
            text: newText,
            selection: TextSelection.collapsed(
              offset: selection.start + 1,
            ),
          );
          debugPrint('Shift + Enter pressed');
          return KeyEventResult.handled;
        }
      }
      return KeyEventResult.ignored;
    };
  }

HardwareKeyboard의 instance에서 logicalkeyspressed로 접근 shiftLeft가 눌렸는지 여부를 isShiftPressed에 저장한다

그후 if 조건문을 통해 enter가 눌렸는지 확인 후 shift도 눌렸을 때의 조건문을 작성한다.

기존 textController에 적혀있는 내용 뒤에 \n을 붙여서 줄넘김을 구현한다.

만약 shift와 enter가 같이 눌리지 않는다면 위 내용은 무시되어 기존 enter키가 눌렸을 때의 로직이 작동된다.

2. TextField의 focusNode와 onSubmitted를 작성한다.

TextField(
	onSubmitted: (String userMessage) {
    	if (userMessage.trim().isNotEmpty) {
        	_sendMessage(messageService, userMessage);
            _scrollToBottom();
    	}
    },
    textInputAction: TextInputAction.none,
    keyboardType: TextInputType.multiline,
    controller: textController,  
	focusNode: _focusNode,