TextEditingController

TextEditingController

Flutter에서 텍스트 필드를 제어하는 핵심 클래스입니다. 이 클래스를 사용하면 텍스트 필드의 텍스트를 편집하고, 값을 가져오고, 상태를 변경하는 등 다양한 작업을 수행할 수 있습니다.

 

주로 로그인 화면 구현할때 자주 사용합니다. 

 

주요 기능:

• 텍스트 편집:
  • 텍스트 추가, 삭제, 변경
  • 선택 영역 설정 및 조작
  • 커서 위치 제어
• 값 가져오기:
  • 현재 입력된 텍스트 가져오기
  • 변경 사항 감지 및 리스닝
• 상태 변경:
  • 텍스트 필드 활성화/비활성화
  • 텍스트 입력 방식 설정 (숫자, 이메일 등)
  • 오류 표시 및 제거

 

사용법:

1. 생성: TextEditingController() 인스턴스를 생성합니다.
2. 연결: TextField 위젯의 controller 속성에 연결합니다.
3. 제어:
   • text 속성을 사용하여 텍스트를 설정합니다.
   • addListener() 메서드를 사용하여 값 변경 감지합니다.
   • selection 속성을 사용하여 선택 영역을 설정합니다.
   • clear() 메서드를 사용하여 텍스트를 지웁니다.

활용 예시:

• 사용자 입력 내용 검증
• 실시간 텍스트 필터링
• 자동 완성 기능 구현
• 텍스트 필드 값을 기반으로 다른 위젯 동작 제어

사용시 주의 상황

텍스트 편집 컨트롤러를 생성할 때 위젯이 필요없으면 플러터에게 컨트롤러를 지워라고 해야합니다.  

 

이것을 방지하기 위해서 dispose 를 사용합니다. 

 

TextEditingController에서 dispose를 사용해야 하는 이유

 

메모리 누수 방지

TextEditingController는 메모리 누수를 유발할 수 있는 몇 가지 리소스를 사용합니다. dispose()를 사용하지 않으면 이러한 리소스가 해제되지 않아 메모리 누수가 발생할 수 있습니다.

 

1. 텍스트 리스너:

텍스트 필드의 값이 변경될 때마다 호출되는 리스너를 추가할 수 있습니다. dispose()를 사용하지 않으면 텍스트 필드가 더 이상 사용되지 않더라도 리스너가 계속 메모리에 유지됩니다.

 

2. 스크롤 컨트롤러:

텍스트 필드가 스크롤 가능한 경우 스크롤 컨트롤러도 메모리에 유지됩니다. dispose()를 사용하지 않으면 스크롤 컨트롤러가 해제되지 않아 메모리 누수가 발생할 수 있습니다.

 

3. 포커스 노드:

텍스트 필드에 포커스가 있을 때 포커스 노드가 메모리에 유지됩니다. dispose()를 사용하지 않으면 포커스 노드가 해제되지 않아 메모리 누수가 발생할 수 있습니다.

따라서 메모리 누수를 방지하기 위해서는 텍스트 필드가 더 이상 사용되지 않을 때 dispose()를 사용하여 리소스를 해제해야 합니다.

 

사용 방법 

final controller = TextEditingController();

// ...

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

 

 

 

예시 코드 

영어 문자중 대문자를 작성하면 소문자로 전환해서 입력받는 예시 코드 

import 'package:flutter/material.dart';

/// Flutter code sample for [TextEditingController].

void main() => runApp(const TextEditingControllerExampleApp());

class TextEditingControllerExampleApp extends StatelessWidget {
  const TextEditingControllerExampleApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: TextEditingControllerExample(),
    );
  }
}

class TextEditingControllerExample extends StatefulWidget {
  const TextEditingControllerExample({super.key});

  @override
  State<TextEditingControllerExample> createState() =>
      _TextEditingControllerExampleState();
}

class _TextEditingControllerExampleState
    extends State<TextEditingControllerExample> {
  final TextEditingController _controller = TextEditingController();

  @override
  void initState() {
    super.initState();
    _controller.addListener(() {
      final String text = _controller.text.toLowerCase();
      _controller.value = _controller.value.copyWith(
        text: text,
        selection:
            TextSelection(baseOffset: text.length, extentOffset: text.length),
        composing: TextRange.empty,
      );
    });
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        alignment: Alignment.center,
        padding: const EdgeInsets.all(6),
        child: TextFormField(
          controller: _controller,
          decoration: const InputDecoration(border: OutlineInputBorder()),
        ),
      ),
    );
  }
}