글자 입력란 TextField에 스타일주는 법
- TextField() 위젯에 스타일을 줄 때
- TextField() 위젯 안에 decoration: InputDecoration()으로 스타일을 줄 수 있다.
- TextField 양 옆에 아이콘을 넣을 때 decoration: InputDecoration()안에
- icon: Icon(Icons.???) 넣어주면 됨.
- 물론 icon 파라미터 대신
- prefixIcon
- suffixIcon 도 있음.
child: TextField( controller: inputData, style: TextStyle(fontSize: 30), decoration: InputDecoration( icon:Icon(Icons.ac_unit_sharp), // 텍스트 필드 왼쪽 밖 prefixIcon:Icon(Icons.access_alarm), // 텍스트 필드 왼쪽 안 suffixIcon:Icon(Icons.accessibility) // 텍스트 필드 오른쪽 안 ), ),
- border 를 주고자 한다면 enableborder 파라미터
- decoration: InputDecoration( enabledBorder: OutlineInputBorder() )
- 만약 Cursor로 클릭 했을 경우, 에러의 경우 등의 다양한 종류의 border로는 아래와 같다
- border:
- focusedBorder:
- disabledBorder:
- errorBorder:
- focusedErrorBorder:
- 그리고 Border를 원하는 위치에만 주려면
- 상하좌우: OutlineInputBorder()
- 하단 테두리: UnderlineInputBorder()
- 테두리 X: InputBorder.none
- 테두리를 둥글게 하려면 borderRadius 사용해서 circular() 에 값 넣어주기
TextField(
decoration: InputDecoration(
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(30),
),
),
),
- TextField의 안을 채우기 위해서는
filled: ture,
fillColor: Colors.blue.shade100
- 근처에 힌트를 띄우고 싶다면
decoration: InputDecoration(
enabledBorder: UnderlineInputBorder(),
icon:Icon(Icons.ac_unit_sharp),
hintText: "첫 째", // 안쪽 좌측
helperText: "둘 째", // 바깥쪽 아래
labelText: '셋 째', // 바깥쪽 위
counterText: '넷 째' '// 바깥 쪽 왼쪽 아래
),
'Flutter' 카테고리의 다른 글
[Flutter] Theme 파일 분리와 추가 내용 (0) | 2023.08.08 |
---|---|
[Flutter] 프로젝트 설치 & ThemeData로 스타일 분리하는 방법 (0) | 2023.08.08 |
[Flutter] null check 하는 법 & Android 앱으로 발행하기 (0) | 2023.08.07 |
[Flutter] 휴대폰에 저장된 연락처 가져오는 법 & 타입 시스템 (0) | 2023.08.07 |
[Flutter] 유저에게 앱 권한 요청하기 & A dependency may only have one source 에러 해결 (0) | 2023.08.07 |