[Flutter/TextField] 입력 폼 border

 

✍ 입력 폼 border

TextField(TextFormField) 의 border 에는 여러 가지 종류가 있는데 여러 가지 상황에서 border 값을 따로 설정할 수 있다. 종류는 다음 표와 같다. border 인자만 설정했을 때 기본 border 값이지만 실제로 시작하고 focus가 없는 처음 상태에서 기본 border 로 적용이 안될 때가 있다. 이때는 enabledBorder 값을 설정해 주면 enabledBorder 값으로 적용된다.

인자	설명
border	기본 border
focusBorder	focus 가 있는 상태
errorBorder	error 상태에서 focus 가 없는 상태
focusErrorBorder	error 상태에서 focus 가 있는 상태
enabledBorder	사용 가능 상태
disabledBorder	사용 불가 상태

 

TextFormField(
  decoration: InputDecoration(
    border: OutlineInputBorder(
      borderRadius: BorderRadius.circular(16.0),
      borderSide: BorderSide(width: 2, color: Colors.black87)
    ),
    enabledBorder: OutlineInputBorder(
      borderRadius: BorderRadius.circular(16.0),
      borderSide: BorderSide(width: 2, color: Colors.black87)
    ),
    focusedBorder: OutlineInputBorder(
      borderRadius: BorderRadius.circular(16.0),
      borderSide: BorderSide(width: 2, color: Colors.deepPurple)
    ),
    focusedErrorBorder: OutlineInputBorder(
      borderRadius: BorderRadius.circular(16.0),
      borderSide: BorderSide(width: 2, color: Colors.green)
    ),
    errorBorder: OutlineInputBorder(
      borderRadius: BorderRadius.circular(16.0),
      borderSide: BorderSide(width: 2, color: Colors.red)
    ),
  ),
);