Flutter - A RenderFlex overflowed by 29 pixels on the right

Question

I have table, which is cut on right - there are some more of columns and it does not fit on the moblie screen. Of this reason I get an error: A RenderFlex overflowed by 29 pixels on the right.

How to enable scrolling horizontally?

My table looks something like this. On the right side there are other columns, e.g. ddd, eee, ff etc, which do not fit on the screen. There is cannot scroll right.

My code:

class _SimpleTableState extends State<SimpleTable> {
  @override
  Widget build(BuildContext context) {
    return DataTable(
      columns: initHeader(),
      rows: initRows(),
    );
  }

Answer 1

By wrapping 'SingleChildScrollView' widget and set 'scrollDirection' to 'Axis.horizontal.

And if you have many rows, you need vertical scroll someday.

class _SimpleTableState extends State<SimpleTable> {
  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      scrollDirection: Axis.horizontal,
      child: DataTable(
        columns: initHeader(),
        rows: initRows(),
      ),
    );
  }
...