How to make horizontal Scrollable Table Widget in Flutter

Question

I want to make Table Columns in Scrollable horizontal direction In Flutter. How to do achieve that? Remember Talking about Table Widget not DataTable?

Answer 1

Try this,

Scrollbar(
      
        child: <Widget>[
          SingleChildScrollView(
            scrollDirection: Axis.horizontal,
            child: Table(
...

These are some sources that might help you or any one in future, https://github.com/flutter/flutter/issues/35445 ,

Answer 2

You can try this to make the flutter table widget horizontally scrollable,

Scrollbar(
    child: ListView(
      children: [
        SingleChildScrollView(
          scrollDirection: Axis.horizontal,
          child: Table(
            defaultColumnWidth: IntrinsicColumnWidth(),
            border: TableBorder.all(color: Colors.grey.shade200, width: 5),
            children: [
              TableRow(children: [
                Padding(
                    padding:
                        EdgeInsets.symmetric(vertical: 15, horizontal: 40),
                    child: Center(
                        child: Text(
                      'Title 1',
                      style: customTextStyle,
                    ))),
                Padding(
                    padding:
                    EdgeInsets.symmetric(vertical: 15, horizontal: 40),
                    child: Center(
                        child: Text(
                          'Title 2',
                          style: customTextStyle,
                        ))),
                Padding(
                    padding:
                    EdgeInsets.symmetric(vertical: 15, horizontal: 40),
                    child: Center(
                        child: Text(
                          'Title 3',
                          style: customTextStyle,
                        ))),
                Padding(
                    padding:
                    EdgeInsets.symmetric(vertical: 15, horizontal: 40),
                    child: Center(
                        child: Text(
                          'Title 4',
                          style: customTextStyle,
                        ))),
              ]),
              TableRow(children: [
                Padding(
                    padding:
                    EdgeInsets.symmetric(vertical: 15, horizontal: 40),
                    child: Center(
                        child: Text(
                          'Value 1',
                          style: customCellTextStyle,
                        ))),
                Padding(
                    padding:
                    EdgeInsets.symmetric(vertical: 15, horizontal: 40),
                    child: Center(
                        child: Text(
                          'Value 2',
                          style: customCellTextStyle,
                        ))),
                Padding(
                    padding:
                    EdgeInsets.symmetric(vertical: 15, horizontal: 40),
                    child: Center(
                        child: Text(
                          'Value 3',
                          style: customCellTextStyle,
                        ))),
                Padding(
                    padding:
                    EdgeInsets.symmetric(vertical: 15, horizontal: 40),
                    child: Center(
                        child: Text(
                          'Value 4',
                          style: customCellTextStyle,
                        ))),
              ]),
            ],
          ),
        ),
      ],
    ),
  ),