Flutter 5. ToDo 앱 만들기. (5) 검색 메소드 구현하기.

Flutter로 간단한 ToDo앱을 만들어보는 프로젝트입니다.

 

처음 시작화면 구성부터 내용 추가, 삭제, 검색 기능을 메소드로 구현해 보겠습니다.

 

이 편은 스플래시 시작화면 구성하는 방법을 설명합니다.

 

이 프로젝트는 macOS 에서 VScode를 사용했스며, iPhone 14 Pro Max 시뮬레이터를 사용했습니다.

 

github : https://github.com/tjdwns4712/flutterToDoApp

 

깃허브에서 프로젝트 전체 소스코드를 확인할 수 있습니다.

 

중요한 내용만을 요약했기에 전체 코드를 읽으며 이해하는 것을 추천합니다.

 

이 글은 앞선 ToDo프로젝트 설명과 이어집니다.

 

https://miacoder.tistory.com/5

Flutter 4. ToDo 앱 만들기. (4) 추가, 삭제, 변경 메소드 만들기.

 

위 글에 이어 이번 글에서는 검색을 구현하는 메소드를 알아보겠습니다.

 

검색기능은 아래와 같이 구현됩니다.

 

 

위와 같이 리스트 중 검색어 결과에 맞는 내용만을 보여주는 기능을 구현합니다.

 

 

1. 검색 메소드.

 

 void runFilter(String enterKeyword) {
    List<ToDo> results = [];
    if (enterKeyword.isEmpty) {
      results = todoList;
    } else {
      results = todoList
          .where((item) =>
              item.todoText!.toLowerCase().contains(enterKeyword.toLowerCase()))
          .toList();
      // where메소드를 이용하여 item객체의 todoText 속성 값이 endterKeyword를 포함하는것만 걸러냄
      //검색 기능상 대소문자를 구분하지 않기 위해 .toLowerCase를 사용
      //.contains는 검색어인 enterKeyword를 포함하는지
    }
    setState(() {
      _foundToDo = results;
      //검색 결과를 저장하는 _foundToDo에 results 값을 저장.
    });
  }

 

우선 검색결과 만을 보여주는 새로운 리스트를 선언합니다.

 

if문을 사용해서 검색어가 입력된 경우와 입력되지 안은 경우를 나누어 조건을 줍니다,

 

if(enterkeyword,isEmpty) 즉 검색어가 비어있는 경우에는 result = todoList; 새로 선언한 result 리스트에

기존의 todoList를 넣으라는 의미입니다.

 

results = todoList

.where((item) =>

item.todoText!.toLowerCase().contains(enterKeyword.toLowerCase()))

.toList();

그렇지 않은 경우에는 todoList의 todoText내용을 소문자로 바꾸어 입력갑을 소문자로 바꾼 리스트와 비교하여

같은 것만을 리스트의 형태로 보여달라는 의미입니다.

 

모든 문자를 소문자로 바꿈으로서 검색의 편의기능을 더했습니다.

 

TODO라는 입력값이 있다면 todo로 검색해도 찾을 수 있는 것입니다.

 

 

2. 메소드 활용

 child: TextField(
                    onChanged: (value) => runFilter(value),
                    decoration: const InputDecoration(
                      contentPadding: EdgeInsets.all(0),
                      prefixIcon: Icon(
                        Icons.search,
                        color: Colors.black,
                        size: 20,
                      ),
                      prefixIconConstraints: BoxConstraints(
                        maxHeight: 20,
                        maxWidth: 25,
                      ),
                      border: InputBorder.none,
                      hintText: 'Search',
                      hintStyle: TextStyle(
                        color: Colors.grey,
                      ),
                    ),
                  ),

텍스트를 편집하는 TextField위젯의 어떤 변경을 할 지 나타내는 onChanged에 활용하는 예시가 있습니다.

 

Flutter을 이용한다면, isEmpty,  toLowerCase, contains등 기능을 활용하여 복잡하지 않은 방법으로

어려워 보이는 검색 메소드를 구현할 수 있습니다.

 

이런 검색 메소드는 앱에서 결제내역, 구매내역 등의 검색을 기능을 구현하고 싶을 때 사용하기 좋으며

약간의 수정을 거쳐 날짜검색, 시간으로 검색 등의 기능을 구현하여 활용할 수 도 있습니다.