[flutter] 플러터 TextFormField 내용 수정할 때마다 바뀌는 Text 구현하기 / onChange 속성

숫자를 입력하면 거기에 10퍼센트 더한 계산결과를 보여주는 실시간 게산기를 구현해보고 싶다. 

첫째로, rewardCtrl라는 TextEditingController를 선언했다. 이 rewardCtrl에서부터, 사용자에게 입력받은 데이터를 뽑아올 수 있다. 

 

아래와 같이 SizedBox 내에 TextFormField를 child로 두었다. 입력창의 크기가 고정되도록 만들었다. 아래와 같은 속성을 추가하여, 사용자가 숫자 이외에는 입력할 수 없도록 설정하자.

keyboardType: TextInputType.number

onChange라는 속성을 사용할건데, '내용이 바뀔 때 마다' 시행되는 함수이다.

onChanged: (text){
      setState(() {
        _rewardCalculResert = _rewardCalcul(text, _rewardPercent);
      });
    },

코드를 해석해보면, 내용이 바뀔때마다 _rewardCalculResert라는 변수에 _rewardCalcul함수에서 리턴된 내용을 저장하고, 이것을 setState() 함수로 감싸면서 해당 변경 내용이 UI 상으로도 업로드 될 것이다. * setState() 함수는 statefulWidget을 사용할 때에만 작동하는 함수이다.

_rewardCalcul 함수는 아래와 같이 설계되어 있다. 퍼센트는 10퍼센트로 고정했고, 어떤 것도 입력받지 않은 상태에는 만원의 10퍼센트 이득인 11000원을 _basicText에 계산해서 넣어두었다. 이 _basicText는 예외 상황일 때에도 등장할텐데, 

1) 아무것도 입력받은 것이 없거나

2) 이 계산기 자체에서 에러가 발생했거나

이 두 경우에서이다.

반응형

값의 결과를 나타낼 코드는 아래와 같다. 

실제로 동작하는 모습을 보면,

기본 상태

잘 작동하며, 넣어주는 값이 바뀔때마다 실시간으로 결괏값도 바뀐다.

 

 

 

 

 

 

 

---

오류, 질문이 있으면 댓글달아주세요

구독은 항상 환영입니다 :)

---