[TextEditingController] 입력한 값 가져오기

TextEditingController 란

편집이 가능한 TextField에 입력된 값을 가지고 오거나 TextField에 입력된 값이 변경될 때 사용 하는 클래스

참고 ) https://api.flutter.dev/flutter/widgets/TextEditingController-class.html

TextEditingController class - widgets library - Dart API

 

TextEditingController 사용법

/* 1. TextEditingController 선언 하기 */
TextEditingController controller = TextEditingController();
TextEditingController controller2 = TextEditingController();

/* 2. ispose 메소드를 override하여 위젯이 disposed될때 controller도 dispose되도록 설정 */
@override
  void dispose() {
    // TODO: implement dispose
    controller.dispose();
    controller2.dispose();
    super.dispose();
  }
  
  /* 3. TextField에 선언된 TextEditingController 를 연결 하기  */
  TextField(
      controller: controller,
      decoration: InputDecoration(
        labelText: 'Enter "dice"',
      ),
      keyboardType: TextInputType.emailAddress,
    ),
    TextField(
      controller: controller2,
      decoration: InputDecoration(
        labelText: 'Enter "PW"',
      ),
      keyboardType: TextInputType.text,
      obscureText: true,// 문자가 표시되지 않도록 처리
    )
    
    /* 4. text를 사용하여 데이터 가지고 오기 */
    if (controller.text == 'dice' && controller2.text == '1234'){
      //Navigator.push(context, MaterialPageRoute(builder: (BuildContext context) => Dice()));
    } else if (controller.text != 'dice' && controller2.text == '1234') {
      showSnackBar(context, '로그인 정보를 다시 확인 하세요');
    } else if(controller.text == 'dice' && controller2.text != '1234') {
      showSnackBar(context, '비밀번호를 다시 확인 하세요');
    } else {
      showSnackBar(context, 'ID, PW 정보를 다시 확인 하세요');
    }

 

이번 내용도 코딩셰프 님의 강좌를 보고 직접 실습한 내용을 작성하였습니다. 

감사합니다.

 

출처 및 참고 : https://youtu.be/6-1PGcPgF9M - 

플러터(Flutter) 조금 매운맛 강좌 4| 로그인(log in)과 주사위(dice) 게임 플러터(flutter)앱 만들기 part 2