How to add column widget inside a flutter DataTable DataCell? - flutter

Question

The heights of widgets in a DataTable DataCell can vary:
DataCell(Text('Professor\nProfessor\nProfessor\nProfessor\nProfessor\nProfessor\n'))
But if you add the data as a Column, the cell overflows. Why? And how to fix it?
DataRow(
cells: <DataCell>[
DataCell(Text('Janine')),
DataCell(Text('43')),
DataCell(Column(mainAxisSize: MainAxisSize.min, children: [
Text("Professor"),
Text("Professor"),
Text("Professor"),
Text("Professor"),
])),
// DataCell(Text('Professor\nProfessor\nProfessor\nProfessor\nProfessor\nProfessor\n')),
],
),
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
/// This is the main application widget.
class MyApp extends StatelessWidget {
static const String _title = 'Flutter Code Sample';
#override
Widget build(BuildContext context) {
return MaterialApp(
title: _title,
home: Scaffold(
appBar: AppBar(title: const Text(_title)),
body: MyStatelessWidget(),
),
);
}
}
/// This is the stateless widget that the main application instantiates.
class MyStatelessWidget extends StatelessWidget {
MyStatelessWidget({Key key}) : super(key: key);
#override
Widget build(BuildContext context) {
return DataTable(
columns: const <DataColumn>[
DataColumn(
label: Text(
'Name',
style: TextStyle(fontStyle: FontStyle.italic),
),
),
DataColumn(
label: Text(
'Age',
style: TextStyle(fontStyle: FontStyle.italic),
),
),
DataColumn(
label: Text(
'Role',
style: TextStyle(fontStyle: FontStyle.italic),
),
),
],
rows: <DataRow>[
DataRow(
cells: <DataCell>[
DataCell(Text('Sarah')),
DataCell(Text('19')),
DataCell(Text('Student')),
],
),
DataRow(
cells: <DataCell>[
DataCell(Text('Janine')),
DataCell(Text('43')),
DataCell(Column(mainAxisSize: MainAxisSize.min, children: [
Text("Professor"),
Text("Professor"),
Text("Professor"),
Text("Professor"),
])),
// DataCell(Text('Professor\nProfessor\nProfessor\nProfessor\nProfessor\nProfessor\n')),
],
),
DataRow(
cells: <DataCell>[
DataCell(Text('William')),
DataCell(Text('27')),
DataCell(Text('Associate Professor')),
],
),
],
);
}
}

Answer 1

You need to wrap your column with SingleChildScrollView.
Here is my solution.
DataCell(Expanded(
child: SingleChildScrollView(
child: Column(mainAxisSize: MainAxisSize.min, children: [
Text("Professor"),
Text("Professor"),
Text("Professor"),
Text("Professor"),
]),
),
))