[Flutter/TextField] decoration, text, hint

✍ TextField - Text decoration

TextField 에서 텍스트 폰트, 색상 등 스타일을 지정하는 것은 style 인자의 TextStyle() 를 참고한다.

[Flutter] Text()

 

 

 

😶 텍스트 방향 (textDirection)

언어마다 읽는 방향이 다를 수 있으므로 방향을 설정해준다. 

• TextDirection.rlt : 오른쪽에서 왼쪽
• TextDirection.ltr : 왼쪽에서 오른쪽

TextField(
  textDirection: textDirection: TextDirection.rtl
);

 

 

 

😶 텍스트 가로 정렬 (textAlign)

입력할 때 글자가 정렬되는 방향을 설정해준다.

• TextAlign.left  : 왼쪽 정렬
• TextAlign.right : 오른쪽 정렬
• TextAlign.start : textDirection 의 시작 방향(rlt 이면 오른쪽)
• TextAlign.end : textDirection 의 끝 방향(rlt 이면 왼쪽)
• TextAlign.center : 가운데 정렬

TextField(
  textDirection: textDirection: TextDirection.rtl,
  textAlign: TextAlign.center,
);

 

 

 

😶 텍스트 세로 정렬 (textAlignVertical)

입력할 때 글자가 세로로 정렬되는 방향을 설정해 준다.

• TextAlignVertical.top : 위쪽으로 정렬
• TextAlignVertical.center : 가운데 정렬
• TextAlignVertical.bottom : 아래쪽으로 정렬

 

Container(
  height: 500,
  width: 300,
  child: TextField(
    decoration: InputDecoration(
      border: InputBorder.none,
      filled: true,
      fillColor: Colors.greenAccent,
    ),
    expands: true,
    maxLines: null,
    textAlignVertical: TextAlignVertical.top,
  ),
);

 

 

 

 

😶 자동 대문자 설정(textCapitalization)

영어를 입력할 때 단어의 첫 글자는 무조건 대문자, 문장의 첫 글자는 무조건 대문자 등 대문자로 자동으로 부여하는 것을 설정해 준다.

• TextCapitalization.words : 단어의 첫 글자마다 대문자로 한다.
• TextCapitalization.sentences : 문장의 첫 글자마다 대문자로 한다.
• TextCapitalization.characters : 모든 영어 단어는 대문자로 한다.

 

TextField(
  textCapitalization: TextCapitalization.characters,
);

 

 

✍ TextField - decoration

TextField 를 데코레이션을 하려면 InputDecoration() 클래스를 사용한다.

 

 

😶 border / focusedBorder

TextField 의 border 를 설정할 수 있다. InputBorder 타입으로 해야하는데 이 타입을 가진 InputBorder 를 소개하면 다음과 같다. focusedBorder 는 TextField 가 focus 가 잡혔을 때의 border 를 말한다.

• OutlineInputBorder() : 외곽선이 있는 테두리
• UnderlineInputBorder() : 밑줄 모양

 

예시)

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    Padding(
      padding: const EdgeInsets.symmetric(horizontal: 16.0),
      child: TextField(
        decoration: InputDecoration(
            border: OutlineInputBorder(
              borderRadius: BorderRadius.circular(15.0),
              borderSide: BorderSide(
                  color: Colors.black,
                  width: 2.0,
                  strokeAlign: StrokeAlign.outside),
            ),
            focusedBorder: OutlineInputBorder(
                borderRadius: BorderRadius.circular(15.0),
                borderSide: BorderSide(color: Colors.red, width: 1.0))),
      ),
    ),
    const SizedBox(height: 10.0),
    Padding(
      padding: const EdgeInsets.symmetric(horizontal: 16.0),
      child: TextField(
        decoration: InputDecoration(
          border: UnderlineInputBorder(
            borderSide: BorderSide(
              color: Colors.black,
              width: 5.0,
            ),
          ),
          focusedBorder: UnderlineInputBorder(
            borderSide: BorderSide(color: Colors.red, width: 5.0),
          ),
        ),
      ),
    ),
  ],
);

 

 

 

😶 바탕색(fillColor, focusColor, filled)

filled 가 ture 일 때 바탕색 fillColor 를 입힐 수 있다.

TextField(
  decoration: InputDecoration(
    filled: true,
    fillColor: Colors.green,
  ),
)

 

 

😶 hint

hintText 로 사용자가 입력하기 전 힌트 텍스트를 보여줄 수 있다. hintStyle 로 힌트 텍스트만 따로 스타일을 적용할 수 있다.

 

TextField(
  decoration: InputDecoration(
    hintText: "힌트힌트",
    hintStyle: TextStyle(
      color: Colors.blueAccent
    ),
    border: OutlineInputBorder()
  ),
)

 

 

 

😶 expands

expands 를 true 로 설정하면 TextField 의 위젯 높이(height)를 부모 위젯 전체로 늘릴 수 있다. expands 가 true 일 때는 maxLines 와 minLines 가 null 이어야 한다.

Container(
  height: 500,
  width: 300,
  child: TextField(
    decoration: InputDecoration(
      border: InputBorder.none,
      filled: true,
      fillColor: Colors.greenAccent,
    ),
    expands: true,
    maxLines: null,
    minLines: null,
    textAlignVertical: TextAlignVertical.top,
  ),
);

 

 

 

😶 maxLines, maxLength

maxLines 최대 라인수를 설정한다. 여러 줄을 입력가능할 때 최대 몇 줄까지 가능한지 정할 수 있다. maxLength 는 최대 글자수를 설정한다. 글자 수를 초과하면 입력할 수 없다.

TextField(
  maxLines: 3,
  maxLength: 100
)

 

 

 

😶 contentpadding

textField 의 padding 값을 설정할 수 있다.

 

TextField(
  style: const TextStyle(color: Colors.black87),
  decoration: InputDecoration(
    border: OutlineInputBorder(
      borderRadius: BorderRadius.circular(15.0),
      borderSide: BorderSide(
        color: Colors.black,
        width: 2.0,
        strokeAlign: StrokeAlign.outside,
      ),
    ),
    contentPadding: EdgeInsets.symmetric(vertical: 30.0, horizontal: 20.0),
  ),
  textAlignVertical: TextAlignVertical.top,
),