플러터 사용자입력 글자입력란 TextField에 스타일주는 법

TextField() 위젯에 스타일줄 때가 있을 텐데

뭔가 복잡한 요소들이 많을테니 그림으로 정리해드립니다.

일단 TextField() 위젯 안에 decoration: InputDecoration() 여시고 거기 안에 여러가지 스타일 넣으면 됩니다. 

 

 

 

 

TextField 양옆에 아이콘 넣고 싶으면 icon: 파라미터 

 

 

TextField(
  decoration: InputDecoration(
    icon: Icon(Icons.star),
  ),
), 

icon: 파라미터 대신

prefixIcon:

suffixIcon:

이런 파라미터도 있습니다.

 

 

 

 

 

(참고) ThemeData파일에다가 넣고 싶으면 

ThemeData( 
  inputDecorationTheme: InputDecorationTheme(
    icon: Icon(Icons.star),
  )
) 

inputDecorationTheme: InputDecorationTheme() 열고

거기 안에 집어넣으면 됩니다. 이러면 우리 앱의 모든 TextField에 스타일줄 수 있겠군요. 

 

 

 

 

 

 

 

border 주려면 enabledBorder: 파라미터

 

 

TextField(
  decoration: InputDecoration(

    enabledBorder: OutlineInputBorder(
      borderSide: BorderSide(
        color: Colors.green,
        width: 1.0,
      ),
    ),

  ),
), 

커서찍혔을 때, 에러일 때 등 테두리를 변경하고 싶으면 enabledBorder: 뿐만 아니라 

border:

focusedBorder:

disabledBorder:

errorBorder:

focusedErrorBorder:

이런 파라미터를 더 넣어보시길 바랍니다. 

 

 

 

 

 

 

 

border를 하단만 주려면 

 

 

TextField(
  decoration: InputDecoration(
    enabledBorder: UnderlineInputBorder(),
  ),
), 

OutlineInputBorder() 위젯은 상하좌우 테두리를 주고 

UnderlineInputBorder() 위젯은 하단 테두리만 주고

InputBorder.none 위젯 쓰면 테두리를 없애줍니다. 

이 위젯들 안에서 border 두께, 색상 이런거 커스터마이징하면 됩니다. 

언제나 자동완성을 활용합시다. 

 

 

 

 

 

 

테두리 둥글게 하고 싶으면 borderRadius :

 

 

TextField(
  decoration: InputDecoration(

    enabledBorder: OutlineInputBorder(
      borderRadius: BorderRadius.circular(30),
    ),

  ),
), 

OutlineInputBorder() 안에 넣을 수 있습니다.

 

 

 

 

 

 

 

border 없애기 & 배경색 입히기

 

 

TextField(
  decoration: InputDecoration(

    filled: true,
    fillColor: Colors.blue.shade100,
    enabledBorder: OutlineInputBorder(
      borderSide: BorderSide.none,
    )

  ),
), 

borderSide: BorderSide.none 이건 테두리 선을 없애줍니다. 

 

 

 

 

 

 

 

 

근처에 힌트 띄우고 싶으면

 

 

TextField(
  decoration: InputDecoration(
    hintText: 'hint',
    helperText: 'helper',
    labelText: 'label',
    counterText: 'counter'
  ),
), 

4개 중 원하는 것만 고르면 됩니다.

이 글자들 스타일주고 싶으면 

hintStyle: TextStyle(color: Colors.green), 

이런 파라미터를 더해주면 됩니다.