Flutter

[Flutter] 글자 입력란 TextField에 스타일주는 법

hminor 2023. 8. 8. 16:18

글자 입력란 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: '넷 째' '// 바깥 쪽 왼쪽 아래
  ),