플러터 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'
)
)
Author And Source
이 문제에 관하여(플러터 TextField 스타일주는법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@ein214/플러터-TextField-스타일주는법저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)