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
을 사용해 텍스트 정렬을 조정