Reputation: 63

Vertical and Horizontal scrolling at the same time in Flutter

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?

Upvotes: 1

Answers (3)

Yauheni Prakapenka

Reputation: 1714

import 'package:flutter/material.dart';

class TwoDimensionalScrollWidget extends StatelessWidget {
  final Widget child;

  final ScrollController _verticalController = ScrollController();
  final ScrollController _horizontalController = ScrollController();

  TwoDimensionalScrollWidget({
    super.key,
    required this.child,
  });

  @override
  Widget build(BuildContext context) {
    return Scrollbar(
      thickness: 12.0,
      trackVisibility: true,
      interactive: true,
      controller: _verticalController,
      scrollbarOrientation: ScrollbarOrientation.right,
      thumbVisibility: true,
      child: Scrollbar(
        thickness: 12.0,
        trackVisibility: true,
        interactive: true,
        controller: _horizontalController,
        scrollbarOrientation: ScrollbarOrientation.bottom,
        thumbVisibility: true,
        notificationPredicate: (ScrollNotification notif) => notif.depth == 1,
        child: SingleChildScrollView(
          controller: _verticalController,
          child: SingleChildScrollView(
            primary: false,
            controller: _horizontalController,
            scrollDirection: Axis.horizontal,
            child: child,
          ),
        ),
      ),
    );
  }
}

example

import 'package:flutter/material.dart';

import 'two_dimensional_scroll_widget.dart';

void main() {
  runApp(
    const MaterialApp(
      home: SampleScreen(),
    ),
  );
}
class SampleScreen extends StatelessWidget {
  const SampleScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: TwoDimensionalScrollWidget(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              ...List.generate(
                33,
                (row) {
                  return Row(
                    children: List.generate(33, (int col) {
                      return Padding(
                        padding: const EdgeInsets.all(16),
                        child: Text('row: $row; col: $col'),
                      );
                    }),
                  );
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Upvotes: 0

Paulo Belo

Reputation: 4437

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

Upvotes: 3

George Rabbat

Reputation: 578

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

Upvotes: 5

Vertical and Horizontal scrolling at the same time in Flutter

Answers (3)

Related Questions