[dart] Flutter의 여러 줄 텍스트 필드

다른 사람들이 이미 “TextInputType.multiline”키보드 유형을 사용할 수 있다고 언급했지만, 나는 종종 입력 동작을 모방하기를 원하기 때문에 새 줄이 입력 될 때 높이를 자동으로 조정하는 TextField 구현을 추가하고 싶었습니다. WhatsApp 및 유사 앱.

이 목적을 위해 텍스트가 변경 될 때마다 입력에서 ‘\ n’채터의 수를 분석하고 있습니다. 이것은 과잉 인 것 같지만, 안타깝게도 지금까지 Flutter에서 더 나은 가능성을 찾지 못했고 구형 스마트 폰에서도 성능 문제를 발견하지 못했습니다.

class _MyScreenState extends State<MyScreen> {
  double _inputHeight = 50;
  final TextEditingController _textEditingController = TextEditingController();

  @override
  void initState() {
    super.initState();
    _textEditingController.addListener(_checkInputHeight);
  }

  @override
  void dispose() {
    _textEditingController.dispose();
    super.dispose();
  }

  void _checkInputHeight() async {
    int count = _textEditingController.text.split('\n').length;

    if (count == 0 && _inputHeight == 50.0) {
      return;
    }
    if (count <= 5) {  // use a maximum height of 6 rows 
    // height values can be adapted based on the font size
      var newHeight = count == 0 ? 50.0 : 28.0 + (count * 18.0);
      setState(() {
        _inputHeight = newHeight;
      });
    }
  }


  // ... build method here
  TextField(
    controller: _textEditingController,
    textInputAction: TextInputAction.newline,
    keyboardType: TextInputType.multiline,
    maxLines: null,
  )