How to reset scroll position or the parent, when nested route has changed?

[timbera]

Problem is with scroll position in Flutter when using nested navigation and auto_route package.

I want to achieve the behaviour where the scroll position resets to the top when navigating between the nested routes. Currently it stays at the bottom, and the user needs to scroll back to the top manually.

Screen.Recording.2024-10-11.at.19.52.25.mov

How to fix this?

Here is repo with full code for this minimal example: https://github.com/timbera/nested-routing-scroll-example

but I will paste most important below:

@RoutePage()
class DashboardPage extends StatelessWidget {
  const DashboardPage({super.key});

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Column(
        children: [
          const Text(
            'NESTED NAVIGATION EXAMPLE',
            style: TextStyle(
              color: Colors.black,
            ),
          ),
          const SizedBox(height: 20),
          const AutoRouter(),
          const Row(
            children: [
              NavLink(label: 'Users', destination: Users()),
              NavLink(label: 'Posts', destination: Posts()),
            ],
          ),
          Container(
            width: double.infinity,
            height: 150,
            color: Colors.amberAccent,
          ),
          Container(
            width: double.infinity,
            height: 150,
            color: Colors.pink,
          )
        ],
      ),
    );
  }
}

Users and Posts page are basically the same:

[@RoutePage()
class Users extends StatelessWidget {
final List sentences = [
'USER',
'user details',
'lorem ipsum',
];

@OverRide
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.all(8.0),
child: Column(mainAxisAlignment: MainAxisAlignment.start, children: [
const Text(
'MY USERS',
style: TextStyle(
fontSize: 24,
fontWeight: FontWeight.bold,
),
),
const SizedBox(height: 16),
Column(
children: List.generate(
4,
(index) {
return Padding(
padding: const EdgeInsets.symmetric(vertical: 8.0),
child: Center(
child: Container(
width: MediaQuery.of(context).size.width * 0.9,
height: 150,
decoration: BoxDecoration(
color: Colors.grey[300], // Using a light gray color
borderRadius: BorderRadius.circular(15),
),
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Card #${index + 1}', // Add number to each card
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
SizedBox(
height: 8), // Space between title and sentences
...sentences.map((sentence) => Text(
sentence,
style: TextStyle(
fontSize: 16,
),
)),
],
),
),
),
),
);
},
),
)
]));
}
}
](url)
I tried wrapping AutoRoute with Builder - no effect.
I was trying to do create some kind of controller but with no success.