Flutter Table

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Table(
            columnWidths: const {
              0: FractionColumnWidth(0.3), // 첫 번째 컬럼 30%
              1: FractionColumnWidth(0.7), // 두 번째 컬럼 70%
            },
            border: const TableBorder(
              top: BorderSide(width: 2, color: Colors.black),    // 위쪽 선
              bottom: BorderSide(width: 2, color: Colors.black), // 아래쪽 선
              horizontalInside: BorderSide(width: 1, color: Colors.grey), // 행 구분선
            ),
            children: [
              _buildTableRow('Row 1, Col 1', 'Row 1, Col 2'),
              _buildTableRow('Row 2, Col 1', 'Row 2, Col 2'),
              _buildTableRow('Row 3, Col 1', 'Row 3, Col 2'),
            ],
          ),
        ),
      ),
    );
  }

  /// 각 행을 쉽게 만들기 위한 함수
  TableRow _buildTableRow(String text1, String text2) {
    return TableRow(
      children: [
        Padding(
          padding: const EdgeInsets.all(8.0),
          child: Text(text1, textAlign: TextAlign.center),
        ),
        Padding(
          padding: const EdgeInsets.all(8.0),
          child: Text(text2, textAlign: TextAlign.center),
        ),
      ],
    );
  }
}

columnWidths 속성 추가
{0: FractionColumnWidth(0.3), 1: FractionColumnWidth(0.7)}

  • 첫 번째 열 30%
  • 두 번째 열 70%

horizontalInside: BorderSide(width: 1, color: Colors.grey)
각 행 사이에 구분선 추가_buildTableRow() 함수 추가
중복 코드 제거 & 행 추가 쉽게 만들기TextAlign.center 추가
텍스트를 중앙 정렬

TableBorder(top: BorderSide(...), bottom: BorderSide(...))를 사용하여 위와 아래에만 선을 추가

TableRow 내부의 Padding을 사용해 텍스트 정렬을 조정

Leave a Reply

Your email address will not be published. Required fields are marked *