BothAxis scrolls

main.dart

import 'package:flutter/material.dart';
import 'package:flutter/gestures.dart';
import 'dart:math' as math;

void main() => runApp(const BothAxisScrollbar());

class BothAxisScrollbar extends StatelessWidget {
  const BothAxisScrollbar({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    ScrollController cntrl = ScrollController();
    ScrollController cntrlD = ScrollController();
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.black45,
        body: Builder(
          builder: (context) {
            return LayoutBuilder(
              builder: (context, constraints) {
                return Center(
                  child: Column(
                    children: [
                      Text('Jammy'),
                      Expanded(
                        child: Scrollbar(
                          isAlwaysShown: true,
                          showTrackOnHover: true,
                          interactive: true,
                          controller: cntrl,
                          child: SingleChildScrollView(
                            scrollDirection: Axis.horizontal,
                            controller: cntrl,
                            child: SizedBox(
                              width: 1800,
                              child: Listener(
                                 onPointerSignal: (PointerSignalEvent ps){
                                  if (ps is PointerScrollEvent) {
                                    print('cntrl offset ${cntrlD.offset}');
                                    final newOffset = cntrlD.offset + ps.scrollDelta.dy;
                                    print('newoffset $newOffset');
                                    if (!ps.scrollDelta.dy.isNegative) {
                                      cntrlD.animateTo(math.max(0, newOffset),
                                          duration: Duration(milliseconds: 100),
                                          curve: Curves.linear);
                                    } else {
                                      cntrlD.animateTo(
                                          math.min(
                                              cntrlD.position.maxScrollExtent, newOffset),
                                          duration: Duration(milliseconds: 100),
                                          curve: Curves.linear);
                                    }
                                  }
                                },
                                child: Scrollbar(
                                  showTrackOnHover: true,
                                  isAlwaysShown: true,
                                  interactive: true,
                                  controller: cntrlD,
                                  child: ListView.separated(
                                    physics: NeverScrollableScrollPhysics(),
                                    controller: cntrlD,
                                    scrollDirection: Axis.vertical,
                                    shrinkWrap: true,
                                    itemCount: 30,
                                    separatorBuilder: (context, index) {
                                      return SizedBox(
                                        height: 10,
                                        child: ColoredBox(color: Colors.amber.shade100,),
                                      );
                                    },
                                    itemBuilder: (context, index) {
                                      return Row(
                                        children: <Widget>[
                                          for (int i = 0; i <= 14; i++) ...{
                                            ConstrainedBox(
                                              constraints: BoxConstraints(minWidth: 120),
                                              child: Container(
                                                color: Colors.amber,
                                                child: Text('Jam $i 120'),
                                              ),
                                            ),
                                          },
                                        ],
                                      );
                                    },
                                  ),
                                ),
                              ),
                            ),
                          ),
                        ),
                      ),
                    ],
                  ),
                );
              },
            );
          },
        ),
      ),
    );
  }
}