Flutter DataTable 스크롤 가능하도록 구현

 PC 웹브라우저상에 DataTable에 View의 사이즈를 넘는 데이터들이 삽입되어도 스크롤이 가능할 줄 알았는데 개발 당시 적은 양의 데이터로 테스트 할땐 문제가 없었으나 웹브라우저 사이즈를 줄이거나 데이터가 많아지니 문제가 생겼다. 하지만 간단히 SingleChildScrollView로 해결할 수 있었다. 모바일 상에서도 이와 같은 처리를 해야 하는지는 확인해보진 않았다.

 

import 'package:flutter/material.dart';

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

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Test',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: Scaffold(
          appBar: AppBar(
            title: const Text(
              'Flutter Web',
              style: TextStyle(
                fontSize: 22,
                fontWeight: FontWeight.bold,
              ),
            ),
          ),
          body: DataTableExample()),
    );
  }
}

class DataTableExample extends StatelessWidget {
  DataTableExample({super.key});

  final List<List<dynamic>> data = [
    ['Sarah', 19, 'Student'],
    ['Jannie', 43, 'Professor'],
    ['Willian', 27, 'Cleaner'],
    ['Claire', 23, 'Make-up artist'],
    ['Jesse', 35, 'Interpreter'],
    ['Tami', 17, 'Baker'],
    ['Colin', 44, 'Interior'],
    ['Mindy', 19, 'Historian'],
    ['Jillian', 29, 'Carpenter'],
    ['Kurt', 37, 'Author'],
    ['Shane', 25, 'Business consultant'],
    ['Kenny', 36, 'Anthropologist'],
  ];

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: DataTable(
        columns: const <DataColumn>[
          DataColumn(
            label: Expanded(child: Text('Name', style: TextStyle(fontStyle: FontStyle.italic))),
          ),
          DataColumn(
            label: Expanded(child: Text('Age', style: TextStyle(fontStyle: FontStyle.italic))),
          ),
          DataColumn(
            label: Expanded(child: Text('Role', style: TextStyle(fontStyle: FontStyle.italic))),
          ),
        ],
        rows: data
            .map((e1) => DataRow(
                  cells: e1.map((e2) => DataCell(Text('$e2'))).toList(),
                ))
            .toList(),
      ),
    );
  }
}