플러터 TextField 스타일주는법

양옆에 아이콘 넣을 때 Icon: 파라미터

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

icon 파라미터 대신 prefixIcon:, suffixIcon: 파라미터도 있음.

border 주려면 enabledBorder: 파라미터

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

커서 찍혔을 때, 에러일 때 등 테두리 관련 파라미터

• border:
• focusedBorder:
• disabledBorder:
• errorBorder:
• focusedErrorBorder:

border를 하단만 주려면

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

• OutlineInputBorder() : 상하좌우 테두리
• UnderlineInputBorder() : 하단 테두리
• InputBorder.none : 테두리 없앰.

borderRadius

TextField(
	decoration: InputDecoration(
		enabledBorder: OutlineInputBorder(
			borderRadius: BorderRadius.circular(30)
		)
	)
)

border 없애기, 배경색 입히기

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

근처에 hint 띄우기

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