[Flutter] Search 검색 기능 (SearchDelegate)

 

 

 

 

https://dev.to/luizeduardotj/search-bar-in-flutter-33e1

Search Bar in flutter

 

위 포스팅을 참고했다.

 

 

 

 

우선, 호출 방법부터 알아보자.

버튼을 누르면 검색을 할 수 있게끔 하자. 우선 내 코드를 가져와봤다.

final List<String> list = List.generate(10, (index) => "Text $index");

GestureDetector(
    onTap: () {
        showSearch(context: context, delegate: Search(list));
    },
    child: Icon(
        Icons.search,
    ),
)

showSearch() 함수를 이용하면 full screen search page를 보여주고, page가 닫힐 때 사용자가 선택한 검색 결과를 반환해준다고 한다.

 

 

 

 

이제 SearchDelegate를 상속받은 클래스를 하나 생성하자.

class Search extends SearchDelegate {
  @override
  List<Widget> buildActions(BuildContext context) {
    // TODO: implement buildActions
    throw UnimplementedError();
  }

  @override
  Widget buildLeading(BuildContext context) {
    // TODO: implement buildLeading
    throw UnimplementedError();
  }

  @override
  Widget buildResults(BuildContext context) {
    // TODO: implement buildResults
    throw UnimplementedError();
  }

  @override
  Widget buildSuggestions(BuildContext context) {
    // TODO: implement buildSuggestions
    throw UnimplementedError();
  }
  
}

override된 4개의 함수를 재정의해야 한다.

 

 

 

320x100

 

 

 

1. List<Widget> buildActions(BuildContext context)

@override
  List<Widget> buildActions(BuildContext context) {
    // TODO: implement buildActions
    return <Widget>[
      IconButton(
          icon: Icon(Icons.close),
          onPressed: () {
            query = "";
          })
    ];
  }

텍스트 필드 우측에 있는 위젯을 정의하는 함수이다.

아이콘 버튼 생성 후 누르면 입력한 검색어를 지우는 기능을 넣었다.

 

 

 

2. Widget buildLeading(BuildContext context)

 @override
  Widget buildLeading(BuildContext context) {
    // TODO: implement buildLeading
    return IconButton(
        icon: Icon(Icons.arrow_back),
        onPressed: () {
          Navigator.pop(context);
        });
  }

텍스트 필드 좌측에 있는 위젯을 정의하는 함수이다.

아이콘 버튼 생성 후 누르면 뒤로가기 역할을 하게끔 기능을 넣자.

 

 

 

3. Widget buildResults(BuildContext context)

  @override
  Widget buildResults(BuildContext context) {
    // TODO: implement buildResults
    return Container(
      child: Center(
        child: Text(_selectResult),
      ),
    );
  }

showResult() 함수가 호출될 때 검색 결과를 보여줄 위젯을 정의하는 함수이다.

간단하게 Container center에 선택한 텍스트를 보여주는 화면을 만들자.

 

 

 

 

 

 

4. Widget buildSuggestions(BuildContext context)

  @override
  Widget buildSuggestions(BuildContext context) {
    List<String> _suggestionList = [];
    query.isEmpty
        ? _suggestionList = _recentList
        : _suggestionList
            .addAll(_list.where((element) => element.contains(query)));

    return ListView.builder(
      itemCount: _suggestionList.length,
      itemBuilder: (context, index) {
        return ListTile(
          title: Text(_suggestionList[index]),
          leading: query.isEmpty ? Icon(Icons.access_time) : SizedBox(),
          onTap: () {
            _selectResult = _suggestionList[index];
            showResults(context);
          },
        );
      },
    );
  }

말그대로 제안된 쿼리들을 보여주는 위젯을 정의하는 함수이다.

listview로 suggestionList 요소들 중 입력한 텍스트를 포함하는 요소들이 있으면 보여주도록 하자.

 

 

 

 

※ 검색 필드에 보여지는 hint 텍스트를 변경하고 싶다면?

Search(this._list)
      : super(
            searchFieldLabel: "아무거나 검색",
            keyboardType: TextInputType.text,
            textInputAction: TextInputAction.search);

다음처럼 생성자에 추가해주면 된다.