[flutter] TextField 밑줄 제거, 글자수 카운트 제거

Flutter에서 TextField 쓸 때 매번 찾아보게 되는 밑줄 제거, 글자 수 카운트 제거 방법

밑줄 제거

TextField(
  decoration: InputDecoration(
  border: InputBorder.none, // 이 부분 추가
  suffix: FlatButton(
  	child: Text("저장"),
  	textColor: AppTheme.darkText,
  	onPressed: () {
  	print('저장');
  	},
  ),
  hintText: '닉네임',
)

border로 인식 되기 때문에 이 부분을 InputBorder 옵션 중 none으로 주면 아무것도 보이지 않는다.

 

글자 수 카운트 제거

서비스 안전성을 위해 maxLength 옵션을 주면 텍스트 필드 우측 하단에 1/10 이런 식으로 꼴보기 싫은 힌트 문구가 생긴다.

이걸 보지않기 위한 방법은 2가지가 있다.

 

1. counterText를 공백으로 지정

TextField(
  maxLength: 10, //이 옵션 추가 시 힌트 메시지 출력 및 최대글자 설정 가능
  decoration: InputDecoration(
    counterText: "", // 이 옵션 추가 시 1/10 같은 글자수 힌트 텍스트 사라짐
  	suffix: FlatButton(
  		child: Text("저장"),
  		textColor: AppTheme.darkText,
  		onPressed: () {
  			print('저장');
  		},
 	 ),
  	hintText: '닉네임',
  )
)

 

이 경우에는 10글자 이상 입력 시 더 이상 글자가 입력되지 않는다.

 

2. inputFormatters에 옵션 걸어서 추가해주기

TextField(
  inputFormatters: [
    LengthLimitingTextInputFormatter(10), //이 부분 추가
  ],
  decoration: InputDecoration(
  	suffix: FlatButton(
  		child: Text("저장"),
  		textColor: AppTheme.darkText,
  		onPressed: () {
  			print('저장');
  		},
 	 ),
  	hintText: '닉네임',
  )
)

 

이 경우 예상치 못한 사이드이펙트가 발생하게 되는데, 사용자가 입력을 할 때는 제한없이 받다가 focus가 풀렸을 때 글자수 제한 10을 넘어가는 부분이 잘려버린다.

1번의 경우에는 아예 10글자 이상을 입력받지 못하게 만드는 거라면 2번은 10글자 이상 입력받은 후에 잘라버리는 방식이다.

사용자 경험을 중시하는 측면에서 생각해보자면, 1번 방법을 쓰는 게 더 나을 것 같다는 생각이 든다.