flutter(기초 팀프로젝트) : 검색 기능

 

쇼핑몰 앱을 만드는 프로젝트에서 여려웠던 기능 몇가지를 정리 하려고 합니다. 첫번째는 바로 검색 기능입니다.

검색을 하는데 있어서 사용하는 정보는 아래의 코드의 형식으로 리스트 페이지에 정의 되어있습니다.

 

List<Album> album = [
  Album(
      imagePath: 'assets/images/peppertones.jpg',
      song: '행운을 빌어요',
      artist: '페퍼톤스',
      price: 30000,
      description: ''),
      ];

 

검색을 하는데 이용하는 위젯은 아래의 코드입니다.

//검색바 위젯
Padding search_bar() {
    return Padding(
        padding: EdgeInsets.all(20),
        child: SearchBar(
          hintText: "검색어를 입력하세요", // 기본으로 띄우는 글씨 설정
          trailing: [Icon(Icons.search)], // 검색 아이콘 표시
          shape: WidgetStatePropertyAll<RoundedRectangleBorder>(
            RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(15.0),
            ),
          ),
          backgroundColor: WidgetStatePropertyAll(Colors.white),
          side: WidgetStateProperty.all(
              BorderSide(color: Colors.black, width: 5)),
          onSubmitted: (value) { //검색을 할 때 실행되는 코드
            setState(() => inputText = value); // 검색한 단어를 inputText에 넘김
          },
        ));
  }

 

검색을 할 때 순서는 검색할 단어를 검색바에서 입력받습니다. 이후에 전달받은 단어를 통해서 정보를 필터링 해서 보여주게 되는 겁니다.

 

위에서 받은 inputText를 아래의 코드로 전해집니다.

위의 코드는 홈페이지의 가장 위에 선언한 코드입니다. 검색바에서 받은 키워드를 정의한 inputText로 전달합니다.

그리고 아래 부분에서 정보를 필터링 하게 됩니다.

List<Album> filteredAlbums = album.where((a) {
      return a.song.toLowerCase().contains(inputText.toLowerCase()) ||
          a.artist.toLowerCase().contains(inputText.toLowerCase());
    }).toList();

 

우선 정의 되어있는 album의 정보를 where함수로 필터링 하는데 where함수는 return 문에 안에 조건에 따라서 정보를 수정하는 역할 을 합니다. 지금 보면 검색을 하는 영역을 song, artist로 한정하고 ||로 둘중 하나만 포함해도 검색 되도록 하고있습니다. 그리고 toLoswerCase문으로 저장되어있는 정보를 모두 소문자로 만들고 소문자로 만드는 검색어를 포함한것인지를 확인하게 됩니다. 이런 방식을 이용하면 검색어로 필터링 된 정보만을 리스트 fliteredAlbums에 보내주게 됩니다. toLowerCase는 소문자로 만드는 함수인데 한글을 이용할때는 그냥 넘어가고 영어에서만 작동하니 사용해주어야합니다. 그래야 대소문자를 상관하지 않게 됩니다.

 

 

 

이번 검색 기능의 핵심은 where절로 정보를 필터하는 것입니다. 문법을 잘 알고 있다면 바로 시도 해볼 수 있었는데 몰라서 꽤 해매었는데 문법을 잘 공부해야하는 이유인 것 같습니다.