[flutter] 플러터 Drawer에서 검색 기능을 구현하는 방법은?

07 Dec 2023

flutter

플러터에서 Drawer는 앱 내에서 네비게이션을 구성하거나 메뉴를 표시하는 데 사용되는 유용한 위젯입니다. Drawer에 검색 기능을 추가하려면 몇 가지 단계를 따라야합니다.

검색 위젯 준비: 제공된 검색 위젯을 사용하거나 직접 검색 위젯을 만들어야합니다. 예를 들어, TextField 위젯을 사용할 수 있습니다.

TextField(
  onChanged: (value) {
    // 검색어가 변경될 때마다 호출되는 콜백
    // 여기서 검색어 처리 로직을 작성합니다.
  },
  decoration: InputDecoration(
    hintText: '검색어를 입력하세요',
  ),
),

Drawer에 검색 위젯 추가: Drawer는 Scaffold 위젯의 drawer 속성을 통해 추가할 수 있습니다. 검색 위젯을 Drawer 위젯 내에 위치시키고 원하는 대로 스타일링합니다.

Scaffold(
  appBar: AppBar(
    title: Text('플러터 앱'),
  ),
  drawer: Drawer(
    child: Column(
      children: [
        ListTile(
          title: Text('메뉴 1'),
        ),
        ListTile(
          title: Text('메뉴 2'),
        ),
        // ...
        TextField( // 검색 위젯 추가
          onChanged: (value) {
            // 검색어가 변경될 때마다 호출되는 콜백
            // 여기서 검색어 처리 로직을 작성합니다.
          },
          decoration: InputDecoration(
            hintText: '검색어를 입력하세요',
          ),
        ),
      ],
    ),
  ),
  body: Container(),
),

검색 로직 구현: 검색어가 변경될 때마다 호출되는 콜백에서 검색어 처리 로직을 작성합니다. 이를 통해 검색 결과를 업데이트하거나 적절한 동작을 수행할 수 있습니다.

이제 Drawer에 검색 기능이 추가되었습니다. 사용자는 Drawer를 열고 검색어를 입력하여 원하는 항목을 검색할 수 있습니다. 이를 활용하여 플러터 앱의 네비게이션을 더 편리하게 만들 수 있습니다.

더 자세한 정보를 원하시면 Flutter 공식 문서를 참조하시기 바랍니다.