Pin a one part on a Row to the screen while scroll the complete screen in Flutter

Viewed 22

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: basic idea

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,
  );
}
1 Answers

Have you tried using Sliver widgets for this? I haven't done exactly this, but I am pretty sure a combination of SliverList and SliverFillRemaining would work well for this.

You could have a large SliverList to handle the header disappearing, and put all the rest inside a SliverFillRemaining as a child of the large SliverList.

A video about SliverList, SliverGrid and SliverFillRemaining: https://www.youtube.com/watch?v=k2v3gxtMlDE

Related