import 'package:flutter/material.dart';
import 'package:two_dimensional_scrollables/two_dimensional_scrollables.dart';

class TreeHorizontalHitRepro extends StatefulWidget {
  const TreeHorizontalHitRepro({
    super.key,
    required this.onTap,
    this.viewportWidth = 200,
    this.blueWidth = 50,
    this.rowHeight = 40,
  });

  final void Function(String segment) onTap;
  final double viewportWidth;
  final double blueWidth;
  final double rowHeight;

  @override
  State<TreeHorizontalHitRepro> createState() =>
      _TreeHorizontalHitReproState();
}

class _TreeHorizontalHitReproState extends State<TreeHorizontalHitRepro> {
  final _controller = TreeViewController();
  final _vertical = ScrollController();
  final _horizontal = ScrollController();

  @override
  void dispose() {
    _vertical.dispose();
    _horizontal.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    final tree = <TreeViewNode<int>>[TreeViewNode<int>(0)];
    return SizedBox(
      width: widget.viewportWidth,
      height: widget.rowHeight,
      child: TreeView<int>(
        controller: _controller,
        tree: tree,
        verticalDetails: ScrollableDetails.vertical(controller: _vertical),
        horizontalDetails: ScrollableDetails.horizontal(
          controller: _horizontal,
        ),
        indentation: TreeViewIndentationType.none,
        treeNodeBuilder: (context, node, _) {
          return Row(
            mainAxisSize: .min,
            children: [
              GestureDetector(
                key: const Key('red-segment'),
                behavior: HitTestBehavior.opaque,
                onTap: () => widget.onTap('red'),
                child: Container(
                  width: widget.viewportWidth,
                  height: widget.rowHeight,
                  color: Colors.red,
                ),
              ),
              GestureDetector(
                key: const Key('blue-segment'),
                behavior: HitTestBehavior.opaque,
                onTap: () => widget.onTap('blue'),
                child: Container(
                  width: widget.blueWidth,
                  height: widget.rowHeight,
                  color: Colors.blue,
                ),
              ),
            ],
          );
        },
        treeRowBuilder: (node) =>
            TreeRow(extent: FixedTreeRowExtent(widget.rowHeight)),
      ),
    );
  }
}

import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';

import 'tree_horizontal_hit_repro.dart';

void main() {
  testWidgets(
    'TreeView row is fully tappable across a horizontal scroll',
    (tester) async {
      final tapped = <String>[];
      await tester.pumpWidget(
        MaterialApp(
          home: Scaffold(
            body: Align(
              alignment: .topLeft,
              child: TreeHorizontalHitRepro(onTap: tapped.add),
            ),
          ),
        ),
      );

      expect(find.byKey(const Key('red-segment')), findsOneWidget);
      expect(find.byKey(const Key('blue-segment')), findsOneWidget);

      await tester.tap(find.byKey(const Key('red-segment')));
      await tester.pumpAndSettle();
      expect(tapped, ['red']);

      await tester.drag(
        find.byKey(const Key('red-segment')),
        const Offset(-60, 0),
      );
      await tester.pumpAndSettle();

      await tester.tap(find.byKey(const Key('blue-segment')));
      await tester.pumpAndSettle();

      expect(tapped, ['red', 'blue']);
    },
  );
}