[flutter] 플러터 Table 위젯에서 특정 행 또는 열 숨기기

15 Dec 2023

flutter

플러터의 Table 위젯을 사용하다가 특정 행이나 열을 숨기고 싶을 때가 있을 수 있습니다. 예를 들어 사용자가 선택한 옵션에 따라 다른 행이나 열을 보여주어야 하는 경우가 있을 수 있죠. 이럴 때는 어떻게 해야 할까요?

1. Table 위젯을 이용한 데이터 표시

가장 먼저, Table 위젯을 사용하여 데이터를 표시하는 예시 코드를 살펴보겠습니다.

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('Table Widget Example'),
        ),
        body: Center(
          child: Table(
            border: TableBorder.all(),
            children: [
              TableRow(
                children: [
                  Text('Row 1 Column 1'),
                  Text('Row 1 Column 2'),
                  Text('Row 1 Column 3'),
                ],
              ),
              TableRow(
                children: [
                  Text('Row 2 Column 1'),
                  Text('Row 2 Column 2'),
                  Text('Row 2 Column 3'),
                ],
              ),
              // Add more TableRow widgets as needed
            ],
          ),
        ),
      ),
    );
  }
}

위 코드는 플러터의 Table 위젯을 사용하여 간단한 표를 만드는 예시입니다.

2. 데이터 조작을 통한 행 또는 열 숨기기

행이나 열을 숨기기 위해서는 Table 위젯의 구조를 동적으로 변경해야 합니다. 이를 위해 상태 관리와 조건부 렌더링을 사용하여 원하는 행이나 열을 숨기거나 보이게 할 수 있습니다.

// Stateful widget을 사용하여 상태 관리
class TableExample extends StatefulWidget {
  @override
  _TableExampleState createState() => _TableExampleState();
}

class _TableExampleState extends State<TableExample> {
  bool isRowHidden = false;
  bool isColumnHidden = false;

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Table(
        border: TableBorder.all(),
        children: [
          if (!isRowHidden) TableRow(
            children: [
              Text('Row 1 Column 1'),
              Text('Row 1 Column 2'),
              Text('Row 1 Column 3'),
            ],
          ),
          TableRow(
            children: [
              if (!isColumnHidden) Text('Row 2 Column 1'),
              Text('Row 2 Column 2'),
              Text('Row 2 Column 3'),
            ],
          ),
          // Add more TableRow widgets as needed
        ],
      ),
    );
  }
}

위 코드에서는 상태 관리를 통해 isRowHidden 및 isColumnHidden 값을 변경하여 원하는 행이나 열을 보여주거나 숨길 수 있습니다.

결론

플러터의 Table 위젯을 사용하여 특정 행이나 열을 숨기고 싶을 때에는 상태 관리와 조건부 렌더링을 통해 해당 행이나 열을 보이거나 숨길 수 있습니다. 위 예시 코드를 참고하여 필요에 맞게 수정하여 사용해보세요.