flutter web multiline TextField/TextFormField cursor position 제대로 되지 않을때.

이 일로 인하여 벨로그를 시작하게 되었다. 어딘가에 Flutter 3.22 환경에서 헤딩하고 있을 또다른 사람을 위해..

1. 문제의 시작

오랜시간 동안 시간날때마다 공들여 조금씩 flutter로 만들었던 앱이 있었다. 슬슬 서비스를 런칭하려 하다가 앱 배포 준비과정에 지쳐 앱을 웹으로 변환하기로 결심했다.
firebase cloud messaging 연동 했던건 좀 많이 아쉽지만, 딱히 푸쉬알림이 중요한 건 아니었고 있다 하더라도 telegram이나 slack 연동으로 알림은 퉁치기로 마음머었다.
aws에 docker/jenkins/ssl등 몇일 동안의 쌉짓(?)을 마무리 짓고 드디어 테스트 배포를 완료하였다. 그렇게 실 테스트를 시작했고 여러 디바이스로 확인하다 매우매우 이상한 것을 발견하게 되는데..

2. 그래서 문제는..

실 개발하는 건 보여주기가 좀 그렇고.. 밑의 움짤은 flutter.dev의 온라인 ide에서 돌려본건데, 그렇다. multiline으로 선언한 TextField나 TextFormField의 cursor position에 치명적인 버그가 존재했다.
한글자만 치면 무조건 아래로 내려간다.
아 물론 android emulator/ios simulator로 앱으로 실행하면 이런 현상이 없다.

3. 해결 과정

제미나이나 gpt에게 수번 물어봤지만 해결이 되지 못했고, stackoverflow도 마찬가지였다. 결국 flutter 공식 github repository의 등록된 issue들을 하나씩 확인해봤고 나와 같은 상황에 처한 분이 올린 이슈를 확인했다.

https://github.com/flutter/flutter/issues/148271

4. 해결

5월 15일에 Google I/O 발표와 함께 버전 업된 flutter 3.22가 문제였나 보다. 다른 flutter channel로 변경해봐도 해당 문제는 해결되지 않았다.

결국 해결방법은 기존 버전인 3.19.x로 다운그레이드 하거나 canvas kit으로 빌드하는 것이다.

1) canvas kit 빌드

 flutter build web --release --web-renderer canvaskit

2) flutter downgrade

#flutter 설치위치 확인
which flutter

#설치 위치로 이동
cd [설치위치]

#3.19.5로 덮어쓰기
git checkout 3.19.5

flutter clean
flutter pub get

5. 결론

flutter web 빌드시 기본 설정인 html renderer를 사용하였다. 성능상 문제를 크기 느낄 정도로 큰 작업은 아니었기 때문에. canvas kit보다 용량이 좀 더 적기도 하고, 무엇보다 최초 로드시 한글이 깨지지 않기 때문이었다.
뭐 어쨌든 이 문제가 해결되기 전까지는 위의 두방법으로 처리하는 수 밖에 없겠다.
이것때문에 난 7시간이나 쌉짓을 했다.