Flutter Textfield 정리

Textfield 위젯을 사용하는 방법을 알아보자

 

TextField(
  cursorColor: lime_300,
  keyboardType: TextInputType.text,
  onTapOutside: (event) =>
      FocusManager.instance.primaryFocus?.unfocus(),
  style: B1_KR_Rg_16.copyWith(color: Colors.white),
  controller: _controller,
  maxLines: 1,
  focusNode: _focusNode,
  scrollPhysics: ClampingScrollPhysics(),
  decoration: InputDecoration(
    icon: Image.asset('assets/images/ic_search.png'),
    hintText: '도서관,학생회관 등',
    hintStyle: B1_KR_Rg_16.copyWith(color: gray_300),
    border: InputBorder.none,
    isCollapsed: true,
    suffixIcon: Container(
      width: 40,
      height: 40,
      margin: EdgeInsets.only(left: 10),
      child: IconButton(
        icon: SvgPicture.asset('assets/images/ic_delete.svg'),
        style: ElevatedButton.styleFrom(padding: EdgeInsets.zero),
        onPressed: () {
          _controller.clear(); // 텍스트 필드의 내용 지우기
        },
      ),
    ),
  ),
),

 

위의 코드는 아래 검색창을 구현하기 위한 코드치고는 꽤 긴편이다. 뭔가 주렁주렁 많이 달고 있는데 하나씩 알아보자.

검색창

 

cursorColor: lime_300,

• 커서의 색을 지정할 수 있다.

keyboardType: TextInputType.text,

• 키보드 타입을 지정한다. TextInputType.text 는 기본적인 타입 number는 핸드폰 다이얼, emailAddress 

 

scrollPhysics: ClampingScrollPhysics()

• 스크롤 되지 않도록 한다.

onTapOutside: (event) =>
    FocusManager.instance.primaryFocus?.unfocus(),

• Textfiled 외부를 터치했을 때 포커스가 이동하도록 해준다.

style: B1_KR_Rg_16.copyWith(color: Colors.white),

• Textfield 안의 글자 스타일을 정한다.

 

final TextEditingController _controller = TextEditingController();

• TextEditingController 클래스를 통해 컨트롤러를 얻는다.

controller: _controller,

maxLines: 1,

• 입력 가능한 최대 행 수 인트값

decoration: InputDecoration(
  icon: Image.asset('assets/images/ic_search.png'),
  hintText: '도서관,학생회관 등',
  hintStyle: B1_KR_Rg_16.copyWith(color: gray_300),
  border: InputBorder.none,
  isCollapsed: true,
  suffixIcon: Container(
    width: 40,
    height: 40,
    margin: EdgeInsets.only(left: 10),
    child: IconButton(
      icon: SvgPicture.asset('assets/images/ic_delete.svg'),
      style: ElevatedButton.styleFrom(padding: EdgeInsets.zero),
      onPressed: () {
        _controller.clear(); // 텍스트 필드의 내용 지우기
      },
    ),
  ),
),

 

 

• input값 속성을 바꾼다.