llighter / yunha-ind

YUNHA INDUSTRY website
https://llighter.github.io
MIT License
1 stars 0 forks source link

content: Flutter에서 검색 구현하기 #64

Open llighter opened 4 years ago

llighter commented 4 years ago

Author: @llighter

Target publish date:

Process

Check out the web.dev writing process.

When you're ready, make a copy of this template and fill in the proposal and outline sections. When you're finished, drop a link to the doc in the 1st step below and check the box. A member of the web.dev team will assign this ticket to themselves and work as your reviewer to help you complete the remaining steps.

검색 구현하기

볼만한 링크

Implementing search in Flutter Flutter's Search Support (The Boring Flutter Development Show, Ep. 10)

우선 검색창으로 새로운 화면을 띄우고 그 화면에 검색 관련된 내용을 처리하는게 주된 기능인 것 같다. 처음에 그냥 생각하기로는 새로운 화면을 만들어서 아이콘에 라우팅을 붙여서 새로운 화면으로 이동하고 거기서 처리한 내용을 기반으로 메인화면에 돌아와 결과를 표기해주면 될 거라 생각했다. 뭐 이렇게 해도 되겠지만 ShowSearch 라는 위젯이 있는데 기왕이면 이것을 활용하는데 Best Practice에도 맞고(한글로 쓰려고 했느데 어차피 그것도 한자일것 같아서 그냥 영어로 썻다.) 버그도 적을 것 같아서 ShowSearch를 사용하려고 한다.

혹시 또 나중에 Deprecated 돼서 사용을 못하게 될지는 모르겠지만 어떤식으로 구현을 하던 이 위젯에서 구현하는 메소드들을 나름대로 구현해야 할 것 이다. 그러니 쓰도록 하자.

내가 원하는 기능은 검색을 원하면 새로운 화면이 나타나 검색 관련 내용을 처리하고 돌아와 메인 화면에 선택한 정보에 대한 결과를 보여주는 것이다. 여기서 검색어는 내가 직접 버튼을 누르고 입력창에 입력을 할 수도 있지만 그렇지 않고 공유 기능을 활용하여 데이터를 받아와서 앱을 호출함과 동시에 검색어가 세팅되어 검색 화면를 표기해주는 것도 원한다.

따라서 여기서는 query 의 초기값을 설정해줄 수 있어야 한다.

처음에는 이게 없는 줄 알고 provider 같은 것을 활용해서 따로 상태를 관리해야 하는 걸로 생각해서 실망할 뻔 했다. 그러니 미리 판단하기 전에 공식문서를 잘 살펴보고 뭘 할 수 있을지 잘 생각하자. 공식 문서를 잘 이해하는게 중요한 이유는 나쁜 코딩 버릇을 방지할 수도 있지만 그보다는 내 생각의 방향과 범위를 정하고 결정하는 것은 그렇지 않은 것과 큰 차이가 있기 때문이다.

SearchDelegate class 검색 페이지는 항상 위에 검색할 수 있는 Appbar가 있다. 그리고 검색 창 전과 후에는 버튼을 넣을 수 있다. SearchDelegate.leading(전) and SearchDelegate.actions.(후)

궁금한것은 뒤로가기나 완료된 후에는 close를 호출하는데 결과를 전달하면 어떻게 받지? 리턴 값이니까 showSearch를 해당 T로 받으면 결과가 받아질 것 같기는 하다.

검색 페이지에서 기본 힌트를 바꾸는 방법은 두 가지 정도가 있다. Flutter - Change search hint text of SearchDelegate 오버라이드 하던가 아니면 super를 쓰던가

appBarTheme method 은 여기에 예제대로 구현한다.