[Flutter] Search Module

검색 기능구현 필요.

검색에 대한 기능 처리 중 어떻게 구현을 해볼까.. 싶었음

글자를 입력할떄마다 자동으로 검색이 될수도있고, 검색하기 버튼을 누르면 검색이 될수도있음

 

요새 대세는 자동 검색인듯..?

그래서 필요한 ListBuilder를 구현, 해당 ListBuilder와 FutureBuilder는 자동으로 값이 추가되면 해당 값을 읽고

setState로 상태변경을 해주지 않아도 상태를 변경해줌

 

Flutter 에서는 검색을 위한 클래스들을 지원해준다.

SearchDelegate

 

아래 클래스를 상속받아서 Search Class를 구현해주자

기존 골격은 구현 해야하는 메소드들을 구현했고, 초기에 userId를 전달 받아서 결과에서 제외해준다.

추천 친구리스트에서도 동일하게 친구 추가를 할 수 있게 끔 세팅을 해주고 FutureBuilder를 사용했다.

StreamBuilder를 사용할 수도 있긴한데, 이는 추후 필요시에 사용하도록 하자.

import 'package:flutter/material.dart';
import 'package:goodshot/http/friend_httpapi.dart';

import '../widget/friend_item.dart';

class Search extends SearchDelegate {

  final String userId;

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

  @override
  Widget buildLeading(BuildContext context) {

    return IconButton(
      icon: Icon(Icons.arrow_back),
      onPressed: () {
        Navigator.pop(context);
      },
    );
  }
  String selectedResult = "";

  @override
  Widget buildResults(BuildContext context) {
    return Container(
      child: Center(
        child: Text(selectedResult),
      ),
    );
  }

  @override
  Widget buildSuggestions(BuildContext context) {
    return
      FutureBuilder(
          future: searchFriend(userId.toString(),query),
          builder: (context,AsyncSnapshot snapshot){
            if (snapshot.hasData) {
              return ListView.builder(
                padding: EdgeInsets.symmetric(horizontal: 20),
                itemCount: snapshot.data.length,
                itemBuilder: (BuildContext context, int index) {
                  FriendItem item = snapshot.data[index];
                  return FriendItem(
                    sourceId: userId,
                    id: item.id,
                    userId: item.userId,
                    thumbnailImageUrl: item.thumbnailImageUrl,
                    nickname: item.nickname,
                    introduce: item.introduce,
                    status: item.status,
                  );
                },);
            }
            else
            {
              return Container(
                child: Center(
                  child: Text("Loading..."),
                ),
              );
            }
          }
      );
  }
}

 

제공하는 SearchDeglate을 쓰고, 재정의 필요 메서드만 제공하면

쉽게 자동 검색에 대한 구현이 진행이 된다 (별도 이벤트 처리 안해줘도됨)

 

추가로 flutter 에서 제공해주는 serach.dart에서는 query라는 변수도 제공해주고있기 때문에

해당 변수를 사용해서 결과를 ( 나는 suggestion에서 ) 뿌려주면 된다.

 

원래 검색기라는 것을 별도로 설계할만큼 검색에 대해서는 굉장히 많은, 설계가 필요하지만 

소규모에서는 이렇게 지원해주니 편하다고 생각한다.