[플러터] SearchBar Widget 사용하기

검색기능을 만들일이 있을지 모르겠지만, 예전에 슬쩍 봤었던, SearchBar Widget에 뭔가 신박한 무엇인가가.. 생겼나 살펴보았다.

다짜고짜, SearchBar 위젯을 달아본다. 입력창에 별다른 제한을 두지 않으니, 그닥 큰 생각을 할 필요는 없었다.

대충 숫자를 사용해서, string list를 만들고, 필터가 걸렸을때 사용할 빈 list를 만들었다.

 

List<String> list = [

  "1",

  "2",

  //... 중간 생략

];

List<String> filteredList = [];

 

 

입력값에 제한을 둔다면 컨트롤러가 필요하겠지만, 이번엔 건드리지 않는 것으로 한다.

 

var textcontroller = TextEditingController();

 

 

복잡하지만, onChanged 이하 구문만 살펴보면 될 것이다. 입력된 값이 리스트에 있으면, 해당 값을 filteredlist에 옮겨 담는 작업이다. 숫자라서 필요는 없지만, toLowerCase로 바꿔주는 작업도 넣었다. (일반적으로 넣더라..)

 

SearchBar(

  controller: textcontroller,

  constraints: BoxConstraints.expand(height: 60),

  elevation: MaterialStateProperty.all(0),

  overlayColor: MaterialStateColor.resolveWith(

    (states) => Colors.purple.shade100,

  ),

  hintText: 'Input Number',

  hintStyle: MaterialStateProperty.all(

    const TextStyle(

      color: Colors.white,

    ),

  ),

  onChanged: (value) {

    print(value);

    // filtered list

    setState(() {

      filteredList = list

          .where((element) =>

              (element

                  .toLowerCase()

                  .contains(value.toLowerCase())) &&

              (value.isNotEmpty))

          .toList();

    });

    print(filteredList.length);

  },

  backgroundColor: MaterialStateColor.resolveWith(

      (states) => Colors.grey.shade200),

),

 

 

결과값이 보여지는 리스트는, 일단, 그냥 listTile로 처리했다.

 

filteredList.map((e) => null).toList().isEmpty

    ? const Text('no data found')

    : Expanded(

        child: ListView.builder(

          itemCount: filteredList.length,

          itemBuilder: (context, index) {

            return ListTile(

              title: Text(filteredList[index]),

            );

          },

        ),

      ),

 

 

최종 결과물은 아래와 같이 된다.

 

 

 

큰 필요는 없겠지만, 정규식을 활용한 입력값 제한 방식을 추가로 생각해봐야겠다.

 

끝.