[flutter] 플러터 Table 위젯에서 특정 셀에 텍스트 스타일 설정하기

15 Dec 2023

flutter

먼저, Table 위젯은 행과 열로 구성된 데이터를 표시하는 데 사용됩니다. 간단한 모델 데이터를 사용하여 예제를 보여드리겠습니다. 다음은 테이블을 만드는 기본 코드입니다.

import 'package:flutter/material.dart';

class CustomTable extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Table(
      children: [
        TableRow(
          children: [
            TableCell(child: Text('열 1')),
            TableCell(child: Text('열 2')),
          ],
        ),
        TableRow(
          children: [
            TableCell(child: Text('데이터 1')),
            TableCell(child: Text('데이터 2')),
          ],
        ),
      ],
    );
  }
}

특정 셀에 텍스트 스타일을 적용하려면 TableCell 위젯을 사용하여 해당 셀의 텍스트를 감싸고 스타일을 적용해야 합니다. 다음은 각 셀에 다른 스타일을 적용하는 예제 코드입니다.

import 'package:flutter/material.dart';

class CustomTable extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Table(
      children: [
        TableRow(
          children: [
            TableCell(child: _buildCell('열 1', TextStyle(fontWeight: FontWeight.bold))),
            TableCell(child: _buildCell('열 2', TextStyle(color: Colors.blue))),
          ],
        ),
        TableRow(
          children: [
            TableCell(child: _buildCell('데이터 1', TextStyle(fontSize: 18))),
            TableCell(child: _buildCell('데이터 2', TextStyle(fontStyle: FontStyle.italic))),
          ],
        ),
      ],
    );
  }

  Widget _buildCell(String text, TextStyle style) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: Text(text, style: style),
    );
  }
}

이 예제에서는 _buildCell 메서드를 사용하여 TableCell에 텍스트와 스타일을 적용했습니다. 위 코드를 사용하면 Table 위젯에서 각 셀에 원하는 스타일을 적용할 수 있습니다.

이제 이 예제를 참고하여 테이블 셀에 원하는 스타일을 적용하는 데 도움이 되기를 바랍니다.