Flutter DataTable cell text not wrapping inside of a row - flutter

Question

I'm trying to put a dataTable in a row widget, but I lose the text wrapping in the individual cells when I do that.
This code works correctly:
class Testing extends StatefulWidget {
Testing({Key key}) : super(key: key);
#override
_MyDataTableState createState() => _MyDataTableState();
}
class _MyDataTableState extends State<Testing> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("DataTable"),
),
body: SingleChildScrollView( <-- Text wrapping goes away when wrapped in a Row()
padding: const EdgeInsets.all(8.0),
child: DataTable(
// columnSpacing: 100,
columns: [
DataColumn(
label: Container(
width: 100,
child: Text('Item Code'),
),
),
DataColumn(
label: Text('Stock Item'),
),
],
rows: [
DataRow(
cells: [
DataCell(
Text('Yup. text.'),
),
DataCell(
Text(
'This is a really long text. It\'s supposed to be long so that I can figure out what in the hell is happening to the ability to have the text wrap in this datacell. So far, I haven\'t been able to figure it out.'),
)
],
),
],
),
),
);
}
}
Is there a way to preserve the text wrapping inherent in a DataTable when wrapped in a row?

Answer 1

Wrap SingleChildScrollView with Expanded too.
class Testing extends StatefulWidget {
Testing({Key key}) : super(key: key);
#override
_MyDataTableState createState() => _MyDataTableState();
}
class _MyDataTableState extends State<Testing> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("DataTable"),
),
body: Row(
children: <Widget>[
//TODO: use Expanded here
Expanded(
child: SingleChildScrollView(
padding: const EdgeInsets.all(8.0),
child: DataTable(
// columnSpacing: 100,
columns: [
DataColumn(
label: Container(
width: 100,
child: Text('Item Code'),
),
),
DataColumn(
label: Text('Stock Item'),
),
],
rows: [
DataRow(
cells: [
DataCell(
Text('Yup. text.'),
),
DataCell(
Text(
'This is a really long text. It\'s supposed to be long so that I can figure out what in the hell is happening to the ability to have the text wrap in this datacell. So far, I haven\'t been able to figure it out.'),
)
],
),
],
),
),
),
],
),
);
}
}

Answer 2

I have been stuck on a similar problem since this morning.
For me, the DataColumn "label" Text wasn't wrapping. Although the text in the DataRow cell was wrapping just fine
After trying multiple variations, this is what worked for me.
Put the label text inside Expanded and set softWrap text property to true
DataTable(
columns: [
DataColumn(
label: Expanded(
child: Text(
"Very long text goes here",
softWrap: true,
),
)),
],
rows: [],
);

Answer 3

I guess it happens because of how Row naturally works. It takes as much as available horizontal axis. Although the mainAxisSize can be configured(min or max) according to the children, DataTable doesn't have initial width therefore resulting Text not being wrapped.
For quick fix you can wrap the Data Table in Container and give it a const width.
Quick test on DartPad: https://dartpad.dev/a664a29160b6e0443e9ca3bf28d5ec69
Snippet:
class Testing extends StatefulWidget {
Testing({Key key}) : super(key: key);
#override
_MyDataTableState createState() => _MyDataTableState();
}
class _MyDataTableState extends State<Testing> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("DataTable"),
),
body: Row(
children: [
Container(
width: 300, // Give the DataTable a const width.
child: DataTable(
columns: [
DataColumn(
label: Container(
width: 100,
child: Text('Item Code'),
),
),
DataColumn(
label: Text('Stock Item'),
),
],
rows: [
DataRow(
cells: [
DataCell(
Text('Yup. text.'),
),
DataCell(
Wrap(
children: [
Text(
'This is a really long text. It\'s supposed to be long so that I can figure out what in the hell is happening to the ability to have the text wrap in this datacell. So far, I haven\'t been able to figure it out.')
],
),
)
],
),
],
),
)
],
),
);
}
}