Flutter - A RenderFlex overflowed by 29 pixels on the right

user_12933680 0
Viewed 1091

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(),
    );
  }
dart flutter col scroll
3 Answers

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

You can wrap it with listview or SingleChildScrollViewand setscrollDirection to horizontal like this

SingleChildScrollView(
       scrollDirection: Axis.horizontal,
       child: DataTable()
),
user_126386400
user_51906250
Related