[Flutter] 텍스트필드(TextField) Counter 위치 변경하기

안녕하세요.

개발아빠입니다.

 

오늘은 텍스트필드 Counter에 위치를 변경하는 방법에 대해서 알아볼려고 합니다. 

텍스트 필드에 Counter는 기본적으로  maxLength를 지정하게 되면

자동적으로 텍스트필드 아래에 기본적으로 Couter가 생기게 됩니다.

 

아래를 보시면 더 이해가 잘되실 거에요.

 

TextField(
  decoration: InputDecoration(
      hintText: "전화번호",
  ),
  maxLength: 11,
),
            
         

그냥 TextField() 이렇게만 선언에도 텍스트 필드가 나오는데 

현재 hintText와 maxLength를 추가한 상태입니다.

여기서 maxLength를 추가하면 자동적으로 아래에 counter가 생성되는것을 볼 수 있는데요.

 

그런데 여기서 디자이너 분이 공유해주신 앱에서 사용할 텍스트 필드를 공유해주셨는데요. 

 

기존과 변경된 점을 알아보시겠어요? 

counter의 위치가 변경이 되었습니다. 

 

이것을 처리하기 위해서 기존것을 안보이게 처리하고 새로운 위치에 counter를 달면 될꺼같구요. 

 

하나씩 차근차근 해결해 나가보도록 하겠습니다. 

일단 해당 위치에서 카운터를 없애는 작업을 해볼께요.

 

기존 위젯에 InputDecoration에 

counterText: ""

Clear

 

새로운 위치에 Counter 달기는 여러가지 방법 (ex. Stack 활용)이 있겠지만,

간단하게 TextField에 있는 suffix를 활용해서 해당위치에 Counter를 표시해보도록 하겠습니다. 

 

상단에 해당 상수를 선언해주시고,

final int maxLength = 11;

기존의 TextField를 아래와 같이 하면

TextField(
      decoration: InputDecoration(
        hintText: "전화번호",
        counterText: "",
        suffix: Text("0 / $maxLength")
      ),
      maxLength: maxLength,
    ),

 

Counter가 이제 옆으로 달린것을 확인하였습니다.

이제 실제로 동작을 하게 수정을 몇가지를 더 추가해보겠습니다. 

 

일반 변수하나를 추가해주시구요. 

이 변수가 실제로 텍스트위젯의 값의 변화를 담은 변수이고 이 변수의 길이가 현재의 타이핑한 길이라고 생각하시면 됩니다. 

String textValue = "";

TextField(
  decoration: InputDecoration(
   	hintText: "전화번호",
    counterText: "",
    suffix: Text("${textValue.length} / $maxLength")
   ),
   maxLength: maxLength,
   onChanged: (value) {
    setState(() {
       textValue = value;
    });
   },
),

TextField에 onChange에서 콜백으로 받은 값을 갱신해주게 되면 

suffix에 textValue lenght가 변경되게 되면서 

원하는 기능 구현이 완료되게 됩니다.

 

짜잔. 기능구현이 완료되었습니다. 

현재는 위치가 suffix가 위치가 맞아보여서 구현한것이지만, 

만약에 해당 위치가 또 달라져야한다면 Stack을 활용해서 작업해보시는것도 좋아보이네요.

 

그리고 여기서 다루지는 않았지만 기존 Counter의 기본위치가 오른쪽정렬인데 이 부분을 변경하려면

buildCounter 를 통해서 기존 Counter와 동일하게 사용하면서 위치를 변경할 수 있으니 한번 참고해주세요.

단. 위치가 TextField에 아래쪽에만 위치할 수 있다는 것이 단점이니 미리 알아두세요.

 

이상입니다.

질문있으시면 댓글달아주시면 성실하게 답변드릴께요.

 

감사합니다.