Flutter SearchBar

Flutter SearchBar 모든 요소 상세 설명

Flutter의 SearchBar 위젯은 검색 기능을 구현하는 데 유용한 위젯으로, 직관적인 검색 UI를 제공합니다.

1. 생성자 및 주요 속성 (Constructor & Properties)

1.1. SearchBar 생성자

SearchBar({
  super.key,
  this.controller,
  this.focusNode,
  this.hintText,
  this.hintStyle,
  this.leading,
  this.trailing,
  this.onChanged,
  this.onSubmitted,
  this.onTap,
  this.onEditingComplete,
  this.enabled = true,
  this.shape,
  this.backgroundColor,
  this.padding,
  this.textStyle,
  this.keyboardType,
  this.textInputAction,
  this.autofocus = false,
})

---

2. 속성 (Properties) 상세 설명

1) controller (텍스트 컨트롤러)

• 타입: TextEditingController?
• 설명:
  • 검색창의 입력 값을 제어하는 컨트롤러입니다.
  • 사용자가 입력한 텍스트를 가져오거나 수정할 수 있습니다.
• 예제: TextEditingController searchController = TextEditingController(); SearchBar( controller: searchController, );

2) focusNode (포커스 노드)

• 타입: FocusNode?
• 설명:
  • 검색바의 포커스를 제어합니다.
  • 포커스를 감지하거나 강제로 포커스를 줄 수 있습니다.
• 예제: FocusNode searchFocusNode = FocusNode(); SearchBar( focusNode: searchFocusNode, );

3) hintText (힌트 텍스트)

• 타입: String?
• 설명:
  • 검색창에 아무 입력도 없을 때 표시되는 힌트 텍스트입니다.
• 예제: SearchBar( hintText: "검색어를 입력하세요", );

4) hintStyle (힌트 텍스트 스타일)

• 타입: TextStyle?
• 설명:
  • 힌트 텍스트의 스타일을 정의합니다.
• 예제: SearchBar( hintText: "검색어 입력", hintStyle: TextStyle(color: Colors.grey, fontSize: 16), );

5) leading (왼쪽 아이콘)

• 타입: Widget?
• 설명:
  • 검색창의 왼쪽에 표시할 위젯을 지정합니다.
  • 보통 검색 아이콘을 사용합니다.
• 예제: SearchBar( leading: Icon(Icons.search), );

6) trailing (오른쪽 아이콘)

• 타입: List<Widget>?
• 설명:
  • 검색창의 오른쪽에 여러 개의 아이콘을 추가할 수 있습니다.
  • 주로 검색 취소 버튼을 넣습니다.
• 예제: SearchBar( trailing: [ IconButton( icon: Icon(Icons.clear), onPressed: () { print("검색어 삭제"); }, ), ], );

7) onChanged (텍스트 변경 시 실행)

• 타입: ValueChanged<String>?
• 설명:
  • 사용자가 검색어를 입력할 때마다 호출되는 콜백 함수입니다.
• 예제: SearchBar( onChanged: (value) { print("입력된 값: $value"); }, );

8) onSubmitted (입력 완료 시 실행)

• 타입: ValueChanged<String>?
• 설명:
  • 사용자가 키보드의 ‘완료’ 버튼을 눌렀을 때 실행되는 콜백 함수입니다.
• 예제: SearchBar( onSubmitted: (value) { print("검색 실행: $value"); }, );

9) onTap (탭 시 실행)

• 타입: VoidCallback?
• 설명:
  • 사용자가 검색창을 터치했을 때 실행됩니다.
• 예제: SearchBar( onTap: () { print("검색창이 클릭됨"); }, );

10) onEditingComplete (편집 완료 시 실행)

• 타입: VoidCallback?
• 설명:
  • 사용자가 입력을 마치고 엔터를 눌렀을 때 실행됩니다.
• 예제: SearchBar( onEditingComplete: () { print("입력 완료"); }, );

11) enabled (활성화 여부)

• 타입: bool
• 설명:
  • false로 설정하면 검색창이 비활성화됩니다.
• 예제: SearchBar( enabled: false, );

12) shape (검색창 모양)

• 타입: OutlinedBorder?
• 설명:
  • 검색창의 모양을 변경할 수 있습니다.
• 예제: SearchBar( shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(20), ), );

13) backgroundColor (배경 색상)

• 타입: MaterialStateProperty<Color?>?
• 설명:
  • 검색창의 배경 색상을 설정할 수 있습니다.
• 예제: SearchBar( backgroundColor: MaterialStateProperty.all(Colors.blue.shade100), );

14) padding (내부 여백)

• 타입: MaterialStateProperty<EdgeInsetsGeometry?>?
• 설명:
  • 내부 여백을 설정합니다.
• 예제: SearchBar( padding: MaterialStateProperty.all(EdgeInsets.all(10)), );

15) textStyle (텍스트 스타일)

• 타입: MaterialStateProperty<TextStyle?>?
• 설명:
  • 입력 텍스트의 스타일을 정의합니다.
• 예제: SearchBar( textStyle: MaterialStateProperty.all( TextStyle(fontSize: 18, color: Colors.black), ), );

16) keyboardType (키보드 타입)

• 타입: TextInputType?
• 설명:
  • 숫자 키패드, 이메일 키보드 등 다양한 키보드 유형을 지정할 수 있습니다.
• 예제: SearchBar( keyboardType: TextInputType.text, );

17) textInputAction (키보드 버튼 동작)

• 타입: TextInputAction?
• 설명:
  • 키보드의 “완료”, “검색”, “다음” 등의 동작을 설정할 수 있습니다.
• 예제: SearchBar( textInputAction: TextInputAction.search, );

18) autofocus (자동 포커스 여부)

• 타입: bool
• 설명:
  • 화면이 열릴 때 검색창에 자동으로 포커스를 줄지 결정합니다.
• 예제: SearchBar( autofocus: true, );

---

🔹 정리

위 속성들을 조합하여, Flutter의 SearchBar를 더욱 유용하게 활용할 수 있습니다!