Vertical and Horizontal scrolling at the same time in Flutter

Question

I'm building a flutter app, it requires data to be displayed in a table format, I've done it with the help of DataTable widget, but when it was rendered, the column and row count was too high so they went out of the field of view. With list view, I was able to either move horizontally or just vertically. I'm not able to do both of them at the same time. I want a functionality to drag across like Microsoft Excel mobile app where we can freely drag and move around. Could anyone suggest to me a way to do this?

Answer 1

You Warp it with two SingleChildScrollView and one Scrollbar with give attention to ScrollOrientation, This example on how to implement it:

PS: Sorry for messy Code on DataTable but I don't have time to write formated code

import 'package:flutter/material.dart';
    
    class TestPage extends StatelessWidget {
      TestPage({Key? key}) : super(key: key);
      final ScrollController controller = ScrollController();
      final ScrollController controller2 = ScrollController();
      @override
      Widget build(BuildContext context) {
        return Scrollbar(
          controller: controller2,
          isAlwaysShown: true,
          child: SingleChildScrollView(
            controller: controller2,
            scrollDirection: Axis.horizontal,
            child: SingleChildScrollView(
              controller: controller,
              child: DataTable(
                columns: const [
                  DataColumn(label: Text('Test')),
                  DataColumn(label: Text('Test')),
                  DataColumn(label: Text('Test')),
                  DataColumn(label: Text('Test')),
                  DataColumn(label: Text('Test')),
                ],
                rows: const [
                  DataRow(
                    cells: [
                      DataCell(
                        Text('tesssssssssssssssssssssssssssssssssst'),
                      ),
                      DataCell(
                        Text('tesssssssssssssssssssssssssssssssssst'),
                      ),
                      DataCell(
                        Text('tesssssssssssssssssssssssssssssssssst'),
                      ),
                      DataCell(
                        Text('tesssssssssssssssssssssssssssssssssst'),
                      ),
                      DataCell(
                        Text('tesssssssssssssssssssssssssssssssssst'),
                      ),
                    ],
                  ),
                  DataRow(
                    cells: [
                      DataCell(
                        Text('tesssssssssssssssssssssssssssssssssst'),
                      ),
                      DataCell(
                        Text('tesssssssssssssssssssssssssssssssssst'),
                      ),
                      DataCell(
                        Text('tesssssssssssssssssssssssssssssssssst'),
                      ),
                      DataCell(
                        Text('tesssssssssssssssssssssssssssssssssst'),
                      ),
                      DataCell(
                        Text('tesssssssssssssssssssssssssssssssssst'),
                      ),
                    ],
                  ),
                  DataRow(
                    cells: [
                      DataCell(
                        Text('tesssssssssssssssssssssssssssssssssst'),
                      ),
                      DataCell(
                        Text('tesssssssssssssssssssssssssssssssssst'),
                      ),
                      DataCell(
                        Text('tesssssssssssssssssssssssssssssssssst'),
                      ),
                      DataCell(
                        Text('tesssssssssssssssssssssssssssssssssst'),
                      ),
                      DataCell(
                        Text('tesssssssssssssssssssssssssssssssssst'),
                      ),
                    ],
                  ),
                  DataRow(
                    cells: [
                      DataCell(
                        Text('tesssssssssssssssssssssssssssssssssst'),
                      ),
                      DataCell(
                        Text('tesssssssssssssssssssssssssssssssssst'),
                      ),
                      DataCell(
                        Text('tesssssssssssssssssssssssssssssssssst'),
                      ),
                      DataCell(
                        Text('tesssssssssssssssssssssssssssssssssst'),
                      ),
                      DataCell(
                        Text('tesssssssssssssssssssssssssssssssssst'),
                      ),
                    ],
                  ),
                  DataRow(
                    cells: [
                      DataCell(
                        Text('tesssssssssssssssssssssssssssssssssst'),
                      ),
                      DataCell(
                        Text('tesssssssssssssssssssssssssssssssssst'),
                      ),
                      DataCell(
                        Text('tesssssssssssssssssssssssssssssssssst'),
                      ),
                      DataCell(
                        Text('tesssssssssssssssssssssssssssssssssst'),
                      ),
                      DataCell(
                        Text('tesssssssssssssssssssssssssssssssssst'),
                      ),
                    ],
                  ),
                  DataRow(
                    cells: [
                      DataCell(
                        Text('tesssssssssssssssssssssssssssssssssst'),
                      ),
                      DataCell(
                        Text('tesssssssssssssssssssssssssssssssssst'),
                      ),
                      DataCell(
                        Text('tesssssssssssssssssssssssssssssssssst'),
                      ),
                      DataCell(
                        Text('tesssssssssssssssssssssssssssssssssst'),
                      ),
                      DataCell(
                        Text('tesssssssssssssssssssssssssssssssssst'),
                      ),
                    ],
                  ),
                  DataRow(
                    cells: [
                      DataCell(
                        Text('tesssssssssssssssssssssssssssssssssst'),
                      ),
                      DataCell(
                        Text('tesssssssssssssssssssssssssssssssssst'),
                      ),
                      DataCell(
                        Text('tesssssssssssssssssssssssssssssssssst'),
                      ),
                      DataCell(
                        Text('tesssssssssssssssssssssssssssssssssst'),
                      ),
                      DataCell(
                        Text('tesssssssssssssssssssssssssssssssssst'),
                      ),
                    ],
                  ),
                  DataRow(
                    cells: [
                      DataCell(
                        Text('tesssssssssssssssssssssssssssssssssst'),
                      ),
                      DataCell(
                        Text('tesssssssssssssssssssssssssssssssssst'),
                      ),
                      DataCell(
                        Text('tesssssssssssssssssssssssssssssssssst'),
                      ),
                      DataCell(
                        Text('tesssssssssssssssssssssssssssssssssst'),
                      ),
                      DataCell(
                        Text('tesssssssssssssssssssssssssssssssssst'),
                      ),
                    ],
                  ),
                  DataRow(
                    cells: [
                      DataCell(
                        Text('tesssssssssssssssssssssssssssssssssst'),
                      ),
                      DataCell(
                        Text('tesssssssssssssssssssssssssssssssssst'),
                      ),
                      DataCell(
                        Text('tesssssssssssssssssssssssssssssssssst'),
                      ),
                      DataCell(
                        Text('tesssssssssssssssssssssssssssssssssst'),
                      ),
                      DataCell(
                        Text('tesssssssssssssssssssssssssssssssssst'),
                      ),
                    ],
                  ),
                  DataRow(
                    cells: [
                      DataCell(
                        Text('tesssssssssssssssssssssssssssssssssst'),
                      ),
                      DataCell(
                        Text('tesssssssssssssssssssssssssssssssssst'),
                      ),
                      DataCell(
                        Text('tesssssssssssssssssssssssssssssssssst'),
                      ),
                      DataCell(
                        Text('tesssssssssssssssssssssssssssssssssst'),
                      ),
                      DataCell(
                        Text('tesssssssssssssssssssssssssssssssssst'),
                      ),
                    ],
                  ),
                  DataRow(
                    cells: [
                      DataCell(
                        Text('tesssssssssssssssssssssssssssssssssst'),
                      ),
                      DataCell(
                        Text('tesssssssssssssssssssssssssssssssssst'),
                      ),
                      DataCell(
                        Text('tesssssssssssssssssssssssssssssssssst'),
                      ),
                      DataCell(
                        Text('tesssssssssssssssssssssssssssssssssst'),
                      ),
                      DataCell(
                        Text('tesssssssssssssssssssssssssssssssssst'),
                      ),
                    ],
                  ),
                  DataRow(
                    cells: [
                      DataCell(
                        Text('tesssssssssssssssssssssssssssssssssst'),
                      ),
                      DataCell(
                        Text('tesssssssssssssssssssssssssssssssssst'),
                      ),
                      DataCell(
                        Text('tesssssssssssssssssssssssssssssssssst'),
                      ),
                      DataCell(
                        Text('tesssssssssssssssssssssssssssssssssst'),
                      ),
                      DataCell(
                        Text('tesssssssssssssssssssssssssssssssssst'),
                      ),
                    ],
                  ),
                  DataRow(
                    cells: [
                      DataCell(
                        Text('tesssssssssssssssssssssssssssssssssst'),
                      ),
                      DataCell(
                        Text('tesssssssssssssssssssssssssssssssssst'),
                      ),
                      DataCell(
                        Text('tesssssssssssssssssssssssssssssssssst'),
                      ),
                      DataCell(
                        Text('tesssssssssssssssssssssssssssssssssst'),
                      ),
                      DataCell(
                        Text('tesssssssssssssssssssssssssssssssssst'),
                      ),
                    ],
                  ),
                  DataRow(
                    cells: [
                      DataCell(
                        Text('tesssssssssssssssssssssssssssssssssst'),
                      ),
                      DataCell(
                        Text('tesssssssssssssssssssssssssssssssssst'),
                      ),
                      DataCell(
                        Text('tesssssssssssssssssssssssssssssssssst'),
                      ),
                      DataCell(
                        Text('tesssssssssssssssssssssssssssssssssst'),
                      ),
                      DataCell(
                        Text('tesssssssssssssssssssssssssssssssssst'),
                      ),
                    ],
                  ),
                ],
              ),
            ),
          ),
        );
      }
    }