I am trying to build a layout explicit for Windows and Web. If the App becomes to small there will be another Layout.
The basic Idea is this Layout: 
The green and the blue part are potential to big for the screen. And the red part is a header with some selection options. My goal is, that the user can scroll the complete page down to the end of the green part. So that the red header will be disappear through scrolling down, the green part will be continued to be scrollable. So far I'd just use a Column in a SingleChildScrollView.
The tricky part is the blue part. I want it to get scrolled with the header to the top of the screen but then stays pinned there while the green part continues to be scrolled. Ideally it uses the complete height of the screen when the header is out of view.
Has somebody an idea how to achieve this? Is there a ready solution I just don't know or would I need to exchange the layout when the header disappears?
If it helps. here is the code to make the basic layout:
@override
Widget build(BuildContext context) {
return SingleChildScrollView(
child: Column(
children: [
//hides when scrolled down
_buildHeader(),
//some small divider
Container(height: 5, color: Colors.black,),
_mainContent(),
],
),
);
}
Widget _mainContent(){
return Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
//Container on the left is Fixed under header if header visible and uses complete screen if header is not visible
Expanded(child: _buildLeftContainer()),
//a Container with unknown hieght
Expanded(child: _buildRightContainer())
],
);
}
Widget _buildHeader(){
//some Content
return Container(
height: 150,
color: Colors.red,
);
}
Widget _buildRightContainer(){
//could be any height from not shown to 5 times the screens
return Container(
height: 1000,
color: Colors.green,
);
}
Widget _buildLeftContainer(){
// will contain a list of selectables with in specific sized pages
// height is for display, it should use the available space between on the left half of the screen
return Container(
height: 400,
color: Colors.blue,
);
}