So the problem I have is complex, and sadly I can’t use another design/layout.
I have tree items in my layout: Header, Table and Footer. The Header has a fixed height and the width of the screen. The Table has a dynamic height and a fixed width wider than the screen. The footer has a fixed height and the same width as the table.
Table and Footer have to be scrolled together horizontal, the content has to stay together.
The Header is too big (can’t really change that) so it has to be vertical scroll together
with the Table.
The Footer needs to stay on the end of the screen.
My first try was to put header and table in one vertical ScrollController, and Table and Footer each in their own horizontal ScrollController. The two horizontal ScrollControllers I synced with so:
class ScrollControllerSyncer extends StatefulWidget {
final Widget Function(
ScrollController controller1, ScrollController controller2) builder;
const ScrollControllerSyncer({
super.key,
required this.builder,
});
@override
State<ScrollControllerSyncer> createState() => _ScrollControllerSyncerState();
}
class _ScrollControllerSyncerState extends State<ScrollControllerSyncer> {
late final ScrollController scrollController1;
late final ScrollController scrollController2;
@override
void initState() {
scrollController1 = ScrollController();
scrollController2 = ScrollController();
scrollController1.addListener(() {
if (scrollController1.offset != scrollController2.offset) {
scrollController2.jumpTo(scrollController1.offset);
}
});
scrollController2.addListener(() {
if (scrollController1.offset != scrollController2.offset) {
scrollController1.jumpTo(scrollController2.offset);
}
});
super.initState();
}
@override
Widget build(BuildContext context) {
return widget.builder(scrollController1, scrollController2);
}
}
This kinda works, but it breaks when the touch goes into the bounce animation on the start or end of the horizontal controllers.
How can I build my Layout so it works?
Thanks in advance for any idea.