검색기능을 만들일이 있을지 모르겠지만, 예전에 슬쩍 봤었던, 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]),
);
},
),
),
최종 결과물은 아래와 같이 된다.
큰 필요는 없겠지만, 정규식을 활용한 입력값 제한 방식을 추가로 생각해봐야겠다.
끝.
