[flutter] 플러터 Table 위젯에서 테이블에서 검색하기

15 Dec 2023

flutter

플러터(Table)[https://api.flutter.dev/flutter/material/Table-class.html] 위젯을 사용하여 테이블을 표시하고, 해당 테이블에서 특정 항목을 검색하는 방법에 대해 설명하겠습니다.

Table 위젯 사용하기

플러터에서 Table 위젯은 행과 열의 표 형식으로 데이터를 표시하는 데 사용됩니다. 각 셀마다 위젯을 지정하여 테이블을 생성할 수 있습니다.

다음은 Table 위젯을 사용하여 간단한 테이블을 만드는 예제입니다.

Table(
  children: [
    TableRow(
      children: [
        Text('항목 1'),
        Text('항목 2'),
        Text('항목 3'),
      ],
    ),
    TableRow(
      children: [
        Text('데이터 1'),
        Text('데이터 2'),
        Text('데이터 3'),
      ],
    ),
  ],
)

테이블에서 검색하기

테이블에서 특정 항목을 검색하기 위해서는 검색 기능을 구현해야 합니다. 사용자가 입력한 검색어와 일치하는 항목을 찾아내는 방법을 구현할 수 있습니다.

다음은 테이블에서 검색 기능을 구현하는 예제 코드입니다.

List<List<String>> tableData = [
  ['이름', '나이', '성별'],
  ['홍길동', '30', '남'],
  ['김철수', '25', '남'],
  ['박영희', '28', '여'],
  // ... 추가 데이터
];

List<List<String>> filteredData = [];

String searchKeyword = '홍길동';

tableData.forEach((row) {
  if (row.contains(searchKeyword)) {
    filteredData.add(row);
  }
});

// filteredData를 사용하여 화면에 검색 결과를 표시

위 예제에서는 tableData에 테이블 데이터가 있고, 사용자가 입력한 searchKeyword와 일치하는 항목을 filteredData에 추가하는 방법을 보여줍니다.

마치며

이제 여러분은 플러터의 Table 위젯을 사용하여 테이블을 표시하고, 해당 테이블에서 검색 기능을 구현하는 방법에 대해 알게 되었습니다. 필요에 따라 이를 응용하여 더 다양한 기능을 구현해보세요.