flutterdartscrollcol

Flutter - A RenderFlex overflowed by 29 pixels on the right


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.

enter image description here

My code:

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

Solution

  • 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(),
          ),
        );
      }
    ...