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'),
                      ),
                    ],
                  ),
                ],
              ),
            ),
          ),
        );
      }
    }

Answer 2

You only need to wrap your content widget with two scrolling widgets and set one for vertical scroll direction (default) and the other for horizontal scroll direction.

Example using SingleChildScrollView :

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 300,
      height: 300,
      child: SingleChildScrollView(
        scrollDirection: Axis.horizontal,
        child: SingleChildScrollView(
          child: LargeContainer(),
        ),
      ),
    );
  }
}

class LargeContainer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 1200,
      height: 1200,
      decoration: const BoxDecoration(
        gradient: LinearGradient(
          begin: Alignment.topRight,
          end: Alignment.bottomLeft,
          colors: [
            Colors.yellow,
            Colors.red,
            Colors.indigo,
            Colors.teal,
          ],
        ),
      ),
    );
  }
}

You can check the live demo at DartPad here:

https://dartpad.dev/?id=4ec341a672ccb96470bb6fc09b20305d