Flutter - Search item in List and how to keep TextField from keyboard

검색기능을 사용할 때 키보드 때문에 TextField가 가려지거나

 

다른 방식으로 처리하면 붕 뜨거나 할때 가장 간단한 방법은

 

Column안에 Expanded안에 위젯을 넣고 맨 하단에 TextField사용하면

 

특별한 처리를 하지 않아도 하단에 고정이 됩니다

 

그 다음으로 List를 사용할 때 List안에 있는 값을 검색할 수 있는 기능을 추가시키고 싶을때

 

어떻게 처리해야되는지 예제를 통해 알아보겠습니다

 

Main

class SearchExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var items = Provider.of<SearchData>(context, listen: false);
    return Scaffold(
      appBar: AppBar(title: Text('Search example')),
      body: SafeArea(
        child: Container(
          padding: EdgeInsets.all(8),
          child: ListView.builder(
              itemCount: items.getLength,
              itemBuilder: (context, index) {
                var item = items.getList[index];
                return ListTile(
                    leading: CircleAvatar(child: Text(item[0])),
                    title: Text(item));
              }),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.search),
        onPressed: () {
          items.clearSearchItem();
          Navigator.push(
              context, MaterialPageRoute(builder: (context) => SearchScreen()));
        },
      ),
    );
  }
}

 

Search screen

class SearchScreen extends StatefulWidget {
  @override
  _SearchScreenState createState() => _SearchScreenState();
}

class _SearchScreenState extends State<SearchScreen> {
  TextEditingController _controller = TextEditingController();

  @override
  void dispose() {
    _controller?.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    var items = Provider.of<SearchData>(context);
    return Scaffold(
      appBar: AppBar(title: Text('Searching...')),
      body: SafeArea(
        child: Column(
          children: [
            Expanded(
                child: ListView.builder(
                    itemCount: items.getSearchLength,
                    itemBuilder: (context, index) {
                      var item = items.getSearchedList[index];
                      return ListTile(title: Text(item));
                    })),
            TextField(
                    controller: _controller,
                    decoration: InputDecoration(
                        suffixIcon: Icon(Icons.search),
                        hintText: 'Search...',
                        enabledBorder: OutlineInputBorder(
                            borderRadius: BorderRadius.all(Radius.circular(16)),
                            borderSide: BorderSide(width: 2.0)),
                        focusedBorder: OutlineInputBorder(
                            borderRadius: BorderRadius.all(Radius.circular(16)),
                            borderSide: BorderSide(width: 2.0))),
                    onChanged: (value) => items.setSearchItem(value))
          ],
        ),
      ),
    );
  }
}

 

data class

class SearchData extends ChangeNotifier {
  List<String> _list = [
    'Apple',
    'Banana',
    'Melon',
    'Orange',
    'Strawberry',
    'Grape',
    'Mango',
    'Kiwi',
  ];
  List<String> _searchedList = [];

  List<String> get getList{
    _list.sort();
    return _list;}

  int get getLength => _list.length;

  List<String> get getSearchedList => _searchedList;

  int get getSearchLength => _searchedList.length;

  void setSearchItem(String text) {
    clearSearchItem();
    _searchedList.addAll(_list
        .where((element) =>
            element.toUpperCase().contains(text) ||
            element.toLowerCase().contains(text))
        .toList());
    notifyListeners();
  }

  void clearSearchItem() {
    _searchedList?.clear();
  }
}

 

먼저 메인화면은 간단하게 Listview로 화면을 출력해주고

 

FAB을 눌렀을 때 검색할 수 있는 화면으로 이동을 합니다

(이동전에 clear를 해주는 이유는 이전에 있던 값이 있으면 초기화를 해주기 위해서 입니다)

 

List하나를 새로 만들어서 조건에 맞는 값들을 addAll을 통해 넣어주는데

 

넣어주기전에 초기화 하는 이유는 이전 검색값에서

 

여기서 조건은 _list.where((값) => 조건)) 형태가 되고 조건이 참이되면 Iterable에 값이 추가가 됩니다

 

조건 부분을 필자는 contains을 사용했는데 한글은 문제없지만 영어 처리를 할 때

 

대문자와 소문자를 고려해줘야됩니다

 

그래서 element, text를 둘다 uppercase로 바꾼 후 비교하고 있는데

 

다른 방법으로 구현을 하셔도 무방할거 같습니다