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