[Flutter] TextFormField 의 입력값 가져오기

TextFormField 와 값 받아오기

로그인을 위한 데이터를 전송하기 위해서는, 사용자가 입력한 값을 받아올 수 있어야 한다.

사용자의 입력은 TextFormField 위젯과 TextEditingController 를 사용하여 가져올 수 있다.

 

이를 위해서는 3가지 단계가 필요하다.

1. TextEditingController 를 생성한다.
2. 생성된 TextEditingController 를 TextFormField 에 설정한다.
3. 입력 데이터를 사용할 때, TextEditiingController 에서 값을 가져온다.

1. TextEditingController 생성

state widget 에 Controller 를 생성한다. Controller 를 생성했으니 위젯이 해제될 때 같이 사라지도록 dispose 함수에서 같이 해제시켜준다.

class LoginScreen extends StatefulWidget {
  LoginScreen({super.key});

  @override
  State<LoginScreen> createState() => _LoginScreenState();
}

// state widget 을 정의한다.
class _LoginScreenState extends State<LoginScreen> {
  final TextEditingController userIdController = TextEditingController();
  final TextEditingController userPwController = TextEditingController();
  // ID 와 PW 의 값을 가져오기 위해서 각 폼의 Controller 를 생성했다.

  @override
  void dispose() {
  	// 위젯이 해제될 때, Controller 도 같이 해제시켜준다.
    userIdController.dispose();
    userPwController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
   ...

2. Controller 를 TextFormField 에 설정해준다.

생성된 Controller 를 값을 불러오길 원하는 TextFormField 에 연결해주면 된다.

@override
  Widget build(BuildContext context) {
		...
        TextFormField(
          controller: userIdController, // ID 용 TextFormField 에는 ID 용 Controller 를 설정함.
          decoration: InputDecoration(
            contentPadding: EdgeInsets.all(18),
            hintText: "아이디를 입력하세요.", // 입력에 값이 없을 때 입력을 돕기 위한 텍스트
            border: OutlineInputBorder( // TextForm Field 를 선택했을 때의 테두리 색상을 설정함.
              borderSide:
                  BorderSide(color: Colors.blue),
            ),
          ),
        ),
        ...
        TextFormField(
          controller: userPwController, // PW 용 TextFormField 에는 PW 용 Controller 를 설정함.
          obscureText: true, // 사용자 입력한 부분이 *로 보이도록 설정해줌
          decoration: InputDecoration(
            contentPadding: EdgeInsets.all(18),
            hintText: "비밀번호를 입력하세요.", // 입력에 값이 없을 때 입력을 돕기 위한 텍스트
            border: OutlineInputBorder( // TextForm Field 를 선택했을 때의 테두리 색상을 설정함.
              borderSide:
                  BorderSide(color: Colors.blue), // Custom color
            ),
          ),
        
        ...

3. 입력된 값을 Controller 에서 불러온다.

버튼을 누르면 그 값을 알람창으로 보여주도록 하기 위해 버튼을 생성했다.

Controller 에 저장된 값은 controller.text 로 가져올 수 있다.

예를들어, userIdController 에 입력된 값은 userIdController.text 로 가져올 수 있다.

...
ElevatedButton(
    onPressed: () {
      showDialog(
        // 버튼을 누르면 웨젯에서 알림으로 그 값을 보여주도록 설정해준다. 
        context: context,
        builder: (context) {
          return AlertDialog(
            content: Text(
                "ID : ${userIdController.text}, PW :${userPwController.text}"),
          );
        },
      );
    },
    child: Text('LOGIN'),
)
...