Flutter A RenderFlex overflowed by X pixels on the right - flutter

Question

I'm learning flutter and dart by creating one of our wpf apps.
However, my DataTable throws exception:
======== Exception caught by rendering library =====================================================
A RenderFlex overflowed by 10.0 pixels on the right.
Did some reasearch and there were options to use Expanded, SingleChildScrollView etc. but still nothing helps.
If I make my data row strings smaller, everything is fine.
Widget code
class WorkList extends StatefulWidget {
WorkListState createState() => new WorkListState();
}
class WorkListState extends State<WorkList> with SingleTickerProviderStateMixin {
List<DataRow> _activities = [
DataRow(
cells: <DataCell>[
DataCell(Text('William')),
DataCell(Text('27')),
DataCell(Text('Associate Professor')),
DataCell(Text('Associate Professor1')),
DataCell(Text('Associate Professor1')),
]
)
];
void initState() {
super.initState();
SystemChrome.setPreferredOrientations([
DeviceOrientation.landscapeRight,
DeviceOrientation.landscapeLeft,
]);
_controller = TabController(length: 2, vsync: this);
_controller.addListener(() {
_filterActivities();
});
}
#override
dispose(){
SystemChrome.setPreferredOrientations([
DeviceOrientation.portraitUp,
DeviceOrientation.portraitDown,
]);
super.dispose();
}
TabBar get _tabBar => TabBar(
labelColor: Colors.white,
controller: _controller,
indicator: BoxDecoration(
color: orangeBackground,
),
tabs: [
Tab(text: 'SHOW CURRENT'),
Tab(text: 'SHOW ALL')
],
);
TabController _controller;
DataTable get _dataTable => DataTable(
columns: const <DataColumn>[
DataColumn(
label: Text(
'First Name',
style: TextStyle(fontStyle: FontStyle.italic),
),
),
DataColumn(
label: Text(
'Last Name',
style: TextStyle(fontStyle: FontStyle.italic),
),
),
DataColumn(
label: Text(
'Id',
style: TextStyle(fontStyle: FontStyle.italic),
),
),
DataColumn(
label: Text(
'Time',
style: TextStyle(fontStyle: FontStyle.italic),
),
),
DataColumn(
label: Text(
'Operator',
style: TextStyle(fontStyle: FontStyle.italic),
),
),
],
rows: _activities,
);
void _filterActivities() {
setState(() {
_dataTable.rows.clear();
_activities.add(
DataRow(
cells: <DataCell>[
DataCell(Text('Some random')),
DataCell(Text('Some random1')),
DataCell(Text('Associate Professor1111111111dasdasds')),
DataCell(Text('Associate Professor1111111adssaa')),
DataCell(Text('TEEEEEEEEEEESTdsdasds')),
]
)
);
});
}
#override
Widget build(BuildContext context) {
return DefaultTabController(
length: 2,
child: Scaffold(
appBar: AppBar(
bottom: PreferredSize(
preferredSize: _tabBar.preferredSize,
child: ColoredBox(
color: midDarkBackground,
child: _tabBar,
),
),
title: Text('Worklist'),
),
body: Column(
children: <Widget>[
Expanded(
child: TabBarView(
controller: _controller,
physics: NeverScrollableScrollPhysics(), // disable swipe
children: [
_dataTable,
_dataTable
],
),
)
],
),
floatingActionButton: FloatingActionButton.extended(
label: Text('CREATE NEW PROCEDURE'),
backgroundColor: darkBackground,
foregroundColor: Colors.white,
),
),
);
}
}

Answer 1

In case you want to have a horizontal scroll for your table, just wrap the DataTable widget with SingleChildScrollView with scrollDirection: Axis.horizontal.
So your get _dataTable would be the following:
get _dataTable => SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: DataTable(
columns: const <DataColumn>[...],
rows: ...,
),
);
Result:
If you want to have a bidirectional scroll, wrap it with the second SingleChildScrollView like this:
get _dataTable => SingleChildScrollView(
scrollDirection: Axis.vertical,
child: SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: DataTable(
columns: const <DataColumn>[...],
rows: ...,
),
),
);