[flutter] ListView에 아이템 검색하기

08 Dec 2023

flutter

Flutter 앱을 개발하다보면 ListView에 표시된 아이템 중에서 특정 검색어와 일치하는 아이템을 찾고 싶은 경우가 있습니다. ListView를 사용하여 이 기능을 구현하는 방법을 알아보겠습니다.

ListView의 아이템 검색 구현하기

ListView에 아이템을 검색하는 기능을 추가하려면 다음 단계를 따릅니다.

검색 상자 추가: ListView 위에 텍스트 입력 상자를 추가합니다.
아이템 필터링: 텍스트 입력 상자에 입력된 검색어를 기준으로 ListView에 표시할 아이템을 필터링합니다.
화면 갱신: 검색 결과에 따라 ListView를 업데이트하여 검색된 아이템들을 실시간으로 표시합니다.

다음은 간단한 예시 코드로 ListView에 검색 기능을 추가하는 방법입니다.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyListView(),
    );
  }
}

class MyListView extends StatefulWidget {
  @override
  _MyListViewState createState() => _MyListViewState();
}

class _MyListViewState extends State<MyListView> {
  List<String> items = ['Apple', 'Banana', 'Cherry', 'Durian', 'Eggplant'];
  List<String> filteredItems = [];

  @override
  void initState() {
    filteredItems = items;
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: TextFormField(
          decoration: InputDecoration(labelText: 'Search'),
          onChanged: (text) {
            setState(() {
              filteredItems = items
                  .where((item) => item.toLowerCase().contains(text.toLowerCase()))
                  .toList();
            });
          },
        ),
      ),
      body: ListView.builder(
        itemCount: filteredItems.length,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text(filteredItems[index]),
          );
        },
      ),
    );
  }
}

위 코드에서는 ListView 위에 TextFormField를 추가하여 검색 상자를 만들었고, 검색어에 따라 아이템들을 필터링하여 ListView에 표시합니다.

이렇게 ListView에 아이템 검색 기능을 추가할 수 있습니다. 필요에 따라 검색 기능을 확장하거나 사용자 경험을 향상시키기 위해 디자인을 개선할 수 있습니다.

이제 ListView에 아이템을 검색하는 방법을 알아보았습니다. 정리하자면, ListView에 아이템을 검색하기 위해서는 검색 상자를 추가하고, 아이템을 필터링한 뒤 화면을 갱신하는 것이 중요합니다. 위 예시 코드를 참고하여 자신의 앱에 아이템 검색 기능을 추가해보세요.