[flutter] DataTable에서 데이터 검색 기능 추가하는 방법

18 Dec 2023

flutter

소개

DataTable 위젯은 Flutter 앱에서 테이블 형식의 데이터를 표시할 수 있는 강력한 도구입니다. 그러나 기본 DataTable에는 데이터를 신속하게 검색할 수 있는 기능이 포함되어 있지 않습니다. 이 기능을 추가하여 사용자가 테이블의 데이터를 쉽게 필터링하고 검색할 수 있도록 만들어보겠습니다.

필요 라이브러리

이 기능을 구현하기 위해 DataTable에서 제공하는 rows 리스트를 필터링하는데 사용할 수 있는 search 키워드를 사용할 수 있습니다. 또한, 사용자 입력에 의해 동적으로 데이터를 필터링하는 데 유용한 TextField 위젯을 사용할 것입니다.

아래에 필요한 라이브러리들이 명시되어 있습니다.

import 'package:flutter/material.dart';

구현

다음은 DataTable 위젯에서 데이터 검색 기능을 추가하는 간단한 예제입니다.

import 'package:flutter/material.dart';

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

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

class SearchableDataTable extends StatefulWidget {
  @override
  _SearchableDataTableState createState() => _SearchableDataTableState();
}

class _SearchableDataTableState extends State<SearchableDataTable> {
  List<DataRow> rows = [
    DataRow(cells: [DataCell(Text('Apple'))]),
    DataRow(cells: [DataCell(Text('Banana'))]),
    DataRow(cells: [DataCell(Text('Orange'))]),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Searchable DataTable'),
      ),
      body: Column(
        children: [
          TextField(
            decoration: InputDecoration(labelText: 'Search'),
            onChanged: (value) {
              setState(() {
                rows = rows.where((row) =>
                  row.cells[0].child.toString().contains(value)).toList();
              });
            },
          ),
          Expanded(
            child: DataTable(
              columns: [
                DataColumn(label: Text('Fruit')),
              ],
              rows: rows,
            ),
          ),
        ],
      ),
    );
  }
}

위의 코드를 실행하면, 검색란에 원하는 단어를 입력하면 해당 단어를 포함하는 데이터만 DataTable에 표시됩니다.

결론

이제 기본 DataTable에서 데이터 검색 기능을 추가하는 방법을 배웠습니다. 이 기능을 사용하여 Flutter 앱에서 사용자가 데이터를 쉽게 필터링하고 검색할 수 있도록 만들 수 있습니다.

참고문헌: