[flutter] DataTable에서 특정 행만 보여주고 나머지는 숨기는 방법

18 Dec 2023

flutter

어떻게 하면 Flutter에서 DataTable의 특정 행을 보여주고 다른 행들을 숨길 수 있을까요? 이를 위해 데이터 테이블에 표시할 데이터를 동적으로 변경하여 특정 행을 숨기거나 보여줄 수 있습니다.

아래의 방법으로 DataTable의 특정 행을 숨기거나 보여줄 수 있습니다.

Flutter 코드 예시

아래는 Flutter에서 DataTable의 특정 행을 숨기는 예제 코드입니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Hide DataTable Row Example'),
        ),
        body: MyDataTable(),
      ),
    );
  }
}

class MyDataTable extends StatefulWidget {
  @override
  _MyDataTableState createState() => _MyDataTableState();
}

class _MyDataTableState extends State<MyDataTable> {
  List<DataColumn> columns = [
    DataColumn(label: Text('Column 1')),
    DataColumn(label: Text('Column 2')),
  ];

  List<DataRow> rows = [
    DataRow(cells: [
      DataCell(Text('Data 1')),
      DataCell(Text('Data 2')),
    ]),
    DataRow(cells: [
      DataCell(Text('Data 3')),
      DataCell(Text('Data 4')),
    ]),
    DataRow(cells: [
      DataCell(Text('Data 5')),
      DataCell(Text('Data 6')),
    ]),
  ];

  bool showRow = true;

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Column(
        children: [
          DataTable(
            columns: columns,
            rows: showRow ? rows : <DataRow>[],
          ),
          RaisedButton(
            onPressed: () {
              setState(() {
                showRow = !showRow;
              });
            },
            child: Text(showRow ? 'Hide Row' : 'Show Row'),
          ),
        ],
      ),
    );
  }
}

위의 예제 코드는 DataTable을 사용하여 몇 개의 데이터를 표시하고, “Show Row” 버튼을 통해 특정 행을 보여주거나 숨기는 방법을 보여줍니다.

이를 통해 Flutter에서 DataTable의 특정 행을 동적으로 숨기거나 보여주는 방법을 알아보았습니다.

이러한 방법을 통해 특정한 조건에 따라 DataTable의 특정 행을 숨기는 기능을 구현할 수 있습니다.

결론

Flutter에서 DataTable의 특정 행을 숨기고 보여주는 방법을 알아보았습니다. 위의 예제 코드를 통해 실제로 구현해보시고 필요에 따라 수정하여 사용하시면 됩니다.