Flutter A RenderFlex overflowed by X pixels on the right

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: ...,
    ),
  ),
);