[flutter] 플러터 Column을 이용한 검색 기능 구현하기

20 Dec 2023

flutter

플러터(Flutter)로 레이아웃을 구성할 때 Column은 여러 위젯을 세로로 배열하는 데 유용합니다. 이 튜토리얼에서는 Column을 사용하여 간단한 검색 기능을 구현하는 방법을 살펴보겠습니다.

1. Column 위젯을 생성

가장 먼저 Column 위젯을 생성하고, 검색 필드와 검색 버튼을 포함시킵니다.

Column(
  children: <Widget>[
    TextField(
      decoration: InputDecoration(
        labelText: '검색어를 입력하세요',
      ),
    ),
    RaisedButton(
      onPressed: () {
        // 검색 기능 구현
      },
      child: Text('검색'),
    ),
  ],
)

2. 검색 기능 구현

검색 버튼이 눌렸을 때의 동작을 구현합니다. 예를 들어, 간단한 목록에서 입력된 검색어와 일치하는 아이템을 찾아내는 기능을 추가할 수 있습니다.

String searchText = '';
List<String> items = ['Apple', 'Banana', 'Orange', 'Pineapple'];

List<String> searchItems(String query) {
  return items.where((item) => item.contains(query)).toList();
}

// RaisedButton 위젯의 onPressed 콜백 메서드
onPressed: () {
  List<String> result = searchItems(searchText);
  // 검색 결과 처리
},

3. 검색 결과 표시

검색된 결과를 표시하기 위해 ListView를 사용하여 검색 결과 목록을 표시합니다.

ListView.builder(
  itemCount: result.length,
  itemBuilder: (context, index) {
    return ListTile(
      title: Text(result[index]),
    );
  },
)

이제 여러분은 플러터 Column을 사용하여 간단한 검색 기능을 구현하는 방법을 알게 되었습니다. Column을 활용하여 여러 위젯을 세로로 배열하고, 각 위젯의 동작을 구현하는 방법을 익힐 수 있습니다.

참고자료: