플러터 showSearch 위젯으로 강력한 검색 기능 구현하기

 

Flutter는 모바일 애플리케이션에서 강력한 검색 기능을 쉽게 구현할 수 있도록 다양한 도구를 제공합니다.

그중 showSearch 위젯은 사용자가 입력한 검색어에 따라 데이터를 필터링하고, 결과를 보여주는 데 유용한 기능을 제공합니다.

오늘은 showSearch 위젯의 기본 사용법과 다양한 옵션을 살펴보겠습니다.

showSearch 위젯이란?

showSearch는 Flutter에서 검색 인터페이스를 쉽게 구현할 수 있도록 도와주는 함수입니다.

사용자가 검색어를 입력하면, 관련된 검색 결과를 보여주는 페이지를 표시합니다.

이를 통해 앱에서 복잡한 검색 로직을 간단하게 처리할 수 있습니다.

기본 사용법

showSearch 위젯은 검색 결과를 반환할 데이터 소스를 제공해야 합니다.

이를 위해 검색 로직을 SearchDelegate 클래스를 확장하여 정의합니다.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter showSearch Example'),
        actions: [
          IconButton(
            icon: Icon(Icons.search),
            onPressed: () {
              showSearch(
                context: context,
                delegate: MySearchDelegate(),
              );
            },
          ),
        ],
      ),
      body: Center(child: Text('Search for items!')),
    );
  }
}

class MySearchDelegate extends SearchDelegate {
  List<String> searchResults = [
    'Apple',
    'Banana',
    'Cherry',
    'Date',
    'Eggfruit',
    'Fig',
    'Grape',
    'Honeydew',
  ];

  @override
  List<Widget> buildActions(BuildContext context) {
    return [
      IconButton(
        icon: Icon(Icons.clear),
        onPressed: () {
          query = '';
        },
      ),
    ];
  }

  @override
  Widget buildLeading(BuildContext context) {
    return IconButton(
      icon: Icon(Icons.arrow_back),
      onPressed: () {
        close(context, null);
      },
    );
  }

  @override
  Widget buildResults(BuildContext context) {
    List<String> results = searchResults
        .where((element) => element.toLowerCase().contains(query.toLowerCase()))
        .toList();

    return ListView.builder(
      itemCount: results.length,
      itemBuilder: (context, index) {
        return ListTile(
          title: Text(results[index]),
        );
      },
    );
  }

  @override
  Widget buildSuggestions(BuildContext context) {
    List<String> suggestions = searchResults
        .where((element) => element.toLowerCase().startsWith(query.toLowerCase()))
        .toList();

    return ListView.builder(
      itemCount: suggestions.length,
      itemBuilder: (context, index) {
        return ListTile(
          title: Text(suggestions[index]),
          onTap: () {
            query = suggestions[index];
            showResults(context);
          },
        );
      },
    );
  }
}

주요 메소드 설명

• buildActions: 검색창 우측에 표시될 액션 버튼을 정의합니다. 주로 'clear' 아이콘을 사용해 검색어를 지우는 데 사용됩니다.
• buildLeading: 검색창 좌측에 표시될 버튼을 정의합니다. 보통 '뒤로가기' 아이콘을 사용해 검색을 종료하고 이전 화면으로 돌아갑니다.
• buildResults: 사용자가 검색어를 입력한 후 '검색'을 눌렀을 때 표시될 결과를 보여주는 위젯을 빌드합니다.
• buildSuggestions: 사용자가 검색어를 입력할 때 실시간으로 표시될 제안을 정의합니다.

showSearch의 다양한 옵션

query

query는 사용자가 입력한 검색어를 나타내며, SearchDelegate 클래스에서 이를 사용해 검색 결과를 필터링할 수 있습니다.

onQueryChanged

onQueryChanged는 사용자가 검색어를 입력할 때마다 호출되는 콜백입니다. 이를 통해 검색어 변경 시 실시간으로 데이터를 필터링하거나 추가 로직을 실행할 수 있습니다.

searchFieldLabel

검색창의 힌트 텍스트를 지정할 수 있습니다. 기본값은 'Search'입니다.

showSearch(
  context: context,
  delegate: MySearchDelegate(),
  query: 'Initial Query',
  searchFieldLabel: 'Search Fruits',
);

close(context, result)

검색을 종료하고 showSearch 함수 호출 이전 상태로 돌아가게 합니다. result는 검색 결과를 반환할 때 사용할 수 있습니다.

showResults(context)

buildSuggestions에서 사용하여 사용자가 특정 제안을 탭했을 때 결과 화면으로 전환할 수 있습니다.

마무리

Flutter의 showSearch 위젯을 사용하면 복잡한 검색 기능을 손쉽게 구현할 수 있습니다.

SearchDelegate를 확장하여 검색 인터페이스를 커스터마이징할 수 있으며, 다양한 옵션을 활용해 사용자 경험을 개선할 수 있습니다.

 

이 블로그가 여러분의 Flutter 프로젝트에 도움이 되길 바랍니다! 질문이나 추가적인 설명이 필요하면 댓글로 알려주세요.

앞으로도 더 많은 Flutter 관련 팁과 트릭을 공유할 예정이니, 블로그 구독을 잊지 마세요!

 

 

Starting Google Play App Distribution! "Tester Share" for Recruiting 20 Testers for a Closed Test.

Tester Share [테스터쉐어] - Google Play 앱