Retrieve a widget's scrollController into another widget?

In my app a Menu class with a bottom navigation bar is charged to display the different pages of the app through the IndexedStack widget in order to save the state of each page:

menu.dart

class Menu extends StatefulWidget {
@override
_MenuState createState() => _MenuState();
}
class _MenuState extends State<Menu> {
final List<Widget> pages = [Home(), Profile()];
int _selectedIndex = 0;
void callbackFunction(int index) {
setState(() {
_selectedIndex = index;
}); 
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Save State'),
),  
body: IndexedStack(
index: _selectedIndex,
children: pages,
),  
bottomNavigationBar: BottomNavigationBar(
items: [
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: 'Home',
),  
BottomNavigationBarItem(
icon: Icon(Icons.person),
label: 'Profile',
),  
],  
currentIndex: _selectedIndex,
onTap: (index){
setState(() {
_selectedIndex = index;
});
},
),
);
}
}

home.dart

class Home extends StatefulWidget {
Home({Key? key}) : super(key: key);
@override
State<Home> createState() => _HomeState();
}
class _HomeState extends State<Home> {
final ScrollController _scrollController = ScrollController();
// The item list where the data is stored.
List<String> items = [];
// Flags used to check the loading status.
bool loading = false, allLoaded = false;
// Function that loads data in the item list.
mockFetch() async {
// No more data to load.
if (allLoaded) {
return;
}
// Set the loading flag to true to prevent this function to be called several times.
setState(() {
loading = true;
});
// Simulates the delay that might occurs during an API call.
await Future.delayed(Duration(milliseconds: 500));
// If the item list is higher or equal to 60, an empty array is returned to simulate
// the end of the data stream. If not, 20 more items are generated. 
List<String> newData = items.length >= 60 ? [] : List.generate(20, (index) => "List Item ${index + items.length}");
// Add the new data to the item list.
if (newData.isNotEmpty) {
items.addAll(newData);
}
// Reset the flags.
setState(() {
loading = false;
// Returns false if the array is empty.
allLoaded = newData.isEmpty;
});
}
@override
void initState() {
super.initState();
// Call the mockFetch() function when the state of MyHomePage is initialized for the first time.
mockFetch();
// Set a listener.
_scrollController.addListener(() {
if (_scrollController.position.pixels >= _scrollController.position.maxScrollExtent && !loading) {
mockFetch();
}
});
}
@override
void dispose() {
super.dispose();
_scrollController.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: LayoutBuilder(builder: (context, constraints) {
if (items.isNotEmpty) {
return Stack(
// Dispay the data.
children: [
ListView.separated(
// Assign the scroll controller to the ListView.
controller: _scrollController,
itemBuilder: (context, index) {
// Display the newly loaded items.
if (index < items.length) {
return ListTile(
title: Text(items[index]),
);
}
// An extra item has been added to the index of the list meaning that
// all the items have been loaded.
else {
// Inform the user that there is no more data to load.
return Container(
width: constraints.maxWidth,
height: 50,
child: Center(
child: Text("Nothing more to load"),
),
);
}
},
// Add a separator between each item.
separatorBuilder: (context, index) {
return Divider(height: 1);
},
// Add an extra item to the length of the list when all of the items are loaded.
itemCount: items.length + (allLoaded ? 1 : 0)),
if (loading)...[
// Display a progress indicator at the bottom of the list whenever some data is loading.
Positioned(
left: 0,
bottom: 0,
child: Container(
width: constraints.maxWidth,
height: 80,
child: Center(
child: CircularProgressIndicator(),
),
)
)
]
],
);
}
else {
return Container(
child: Center(
child: CircularProgressIndicator(),
),
);
}
}
),
); // Scaffold
}
}

Now the thing is I want my bottom navigation bar to show or hide according to the scrolling direction into the home page.
So I modified the navigation bar in menu.dart:

bottomNavigationBar: AnimatedBuilder(
animation: _scrollController,
builder: (context, child) {
return AnimatedContainer(
duration: Duration(milliseconds: 300),
height: _scrollController.hasClients && _scrollController.position.userScrollDirection == ScrollDirection.reverse ? 0: kBottomNavigationBarHeight,
child: child,
);
},
child: SingleChildScrollView(
physics: const NeverScrollableScrollPhysics(),
child: BottomNavigationBar(
items: [
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: 'Home',
),  
BottomNavigationBarItem(
icon: Icon(Icons.person),
label: 'Profile',
),  
],  
currentIndex: _selectedIndex,
onTap: (index){
setState(() {
_selectedIndex = index;
});
},
),
),

),

But of course I need to retrieve the _scrollController variable from the home page to get the AnimatedBuilder to work.
I've tried different strategies (callback functions, getters...) but none of them have worked so far.

Is there a way to get the _scrollController variable from the menu widget or should I consider a different approach ?

You need a connection from Home back to _MenuState.

What your _MenuState needs to know, could be contained in a variable:

bool isNavigationBarVisible = true;

In your AnimatedContainer, make the height dependend on that:

height: isNavigationBarVisible ? kBottomNavigationBarHeight : 0,

Add a callback function to the _MenuState:

void callbackNavigationBarVisible(bool visible) {
setState(() {
isNavigationBarVisible = visible;
}); 

Change your Home:

class Home extends StatefulWidget {
Home({Key? key, reuired, required this.callback}) : super(key: key);
final void Function(bool visible) callback;
@override
State<Home> createState() => _HomeState();
}

When you instantiate Home, hand over the callback:

final List<Widget> pages = [Home(callback: callbackNavigationBarVisible), Profile()];

In your _HomeState change this:

_scrollController.addListener(() {
if(_scrollController.hasClients && _scrollController.position.userScrollDirection == ScrollDirection.reverse){
widget.callback(false);
}else{
widget.callback(true);
}
if (_scrollController.position.pixels >= _scrollController.position.maxScrollExtent && !loading) {
mockFetch();
}
});

Thanks to @Stephan's explanation I managed to set up a way to pass the home page scroll controller.

In the Menu class:

class _MenuState extends State<Menu> {
ScrollController _scrollController = ScrollController(); // Initializes a new scroll controller
void callbackSetScrollController(scrollController) { // Retrieves the Home scroll controller
setState(()
_scrollController = scrollController;
});
}

Replace the page list variable:

final List<Widget> pages = [Home(callback: callbackSetScrollControlle), Search(), Profile()];

with

   body: IndexedStack(
index: _selectedIndex,
children: [Home(callback: callbackSetScrollController), Search(), Profile()],
),

or an error will occur:

> Error: Can't access 'this' in a field initializer to read 'callback'

And finally in the Home class:

class Home extends StatefulWidget {
final Function (ScrollController scrollController) callback;
Home({ Key? key, required this.callback }) : super(key: key);
...
void initState() {
super.initState();
mockFetch();
_scrollController.addListener(() {
if (_scrollController.position.pixels >= _scrollController.position.maxScrollExtent && !loading) {
mockFetch();
}
widget.callback(_scrollController);  // <= Passes the scroll controller to the Menu widget.
});
}
...