[플러터] TextEditingController 로 input 관리하기

✔️ input에 데이터를 넣어서 관리하는 방법을 찾다가 TextEditingController 라는 걸 알게 되었답니다 

 

 

공식문서 

https://docs.flutter.dev/cookbook/forms/retrieve-input

Retrieve the value of a text field

 

이게 웹 프론트 하는 분들을 이해하실 것 같은데, 한 페이지 안에 input이 너무 많아서 처음에는 일일히 변수를 다 만들어서 setState를 마치 React의 useState 인양 이용해서 사용했지만, 그렇게 하면 코드가 굉장히 지저분해지고 관리가 되지 않아요 ㅠㅠ 그래서 요 아이가 필요하답니다. 

 

1. TextEditingController 만들어주기

이미 만들어져있는 내부 기능이기때문에 따로 무언가 할 필요없이 이런식으로 선언해주면 됩니다. 

 

 

2. 선언해준 TextEditingController 적용하기

아래와 같이 input를 관리하기 위해서 TextFormField를 적용해주시고 그 곳에 해당 controller를 적용해줍니다. 

 

 

3. 데이터를 담아서 넘기기

textFormField에 담은 것들을 어딘가로 보내야할 때 아래와 같이 선언한 textEditingController에 .text를 더해서 string으로 담을 수 있답니다.