In flutter how to scroll only bottom half of the screen

Question

I am trying to create a UI where the upper section is an image inside clipped view and the bottom section is some text content.

I have tried Expanded and wrapped SingleChildScrolLView with Expanded Widget and I got a white screen.

var DetailsScreenBottomPart = SingleChildScrollView(
    child: Column(
  mainAxisSize: MainAxisSize.min,
  children: <Widget>[
    Padding(
        padding: EdgeInsets.all(18.0),
        child: Row(
          children: <Widget>[
            Text('Basic Information'),
            Spacer(),
            Text('See all')
          ],
        )),
    Container(
      padding: EdgeInsets.symmetric(horizontal: 18.0, vertical: 20.0),
      child: Text(
          'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Urna porttitor rhoncus dolor purus non enim praesent. Tristique senectus et netus et malesuada. Justo laoreet sit amet cursus sit. Nunc sed blandit libero volutpat. Donec enim diam vulputate ut pharetra sit amet. Lacus luctus accumsan tortor posuere. Mauris nunc congue nisi vitae suscipit. Commodo nulla facilisi nullam vehicula ipsum a. Fermentum posuere urna nec tincidunt praesent semper feugiat nibh sed. Ultrices sagittis orci a scelerisque. Enim nulla aliquet porttitor lacus luctus accumsan tortor posuere ac. Consequat id porta nibh venenatis. Viverra mauris in aliquam sem fringilla ut morbi. Habitasse platea dictumst vestibulum rhoncus est pellentesque elit. Sollicitudin aliquam ultrices sagittis orci a scelerisque. Eget nunc lobortis mattis aliquam faucibus purus in massa tempor. asgdsgdsgfdsgsdfgsdgsdgsdgfsd asgsdhsdhsdh ghsh sfh sfh fsgh shg sfdh fsh sfgh j dfjsfh sfgj dfgj dfgj dfg jdfjg dfj dfjgdfj dfj dfgj d'),
    ),
  ],
));

The output i want is pretty simple but since I started flutter today, I am getting a little confused and overwhelmed by the availibility of Widgets, can I scroll the bottom half of the screen and keep the top half static? is this even possible in flutter.

Solution 1

You need to use Column with 2 Expanded Child. Inside your second child keep the scrollable views. eg :

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Column(
          children: <Widget>[
            Expanded(
              flex: 1,
              child: Container(),
            ),
            Expanded(
              flex: 1,
              child: Container(
                width: double.infinity,
                child: SingleChildScrollView(
                  child: Column(
                    children: <Widget>[
                      Container(height: 100, child: Text("Item 1")),
                      Container(height: 100, child: Text("Item 2")),
                      Container(height: 100, child: Text("Item 3")),
                      Container(height: 100, child: Text("Item 4")),
                      Container(height: 100, child: Text("Item 5")),
                      Container(height: 100, child: Text("Item 6")),
                      Container(height: 100, child: Text("Item 7")),
                      Container(height: 100, child: Text("Item 8")),
                      Container(height: 100, child: Text("Item 9")),
                      Container(height: 100, child: Text("Item 10")),
                    ],
                  ),
                ),
              ),
            )
          ],
        ));
  }

Solution 2

/* Simply wrap that widget into Expanded and inside expanded a child SingleChildScrollView. */

 return Scaffold(
  body: Container(
    child: Column(
      children: <Widget>[
        //This Container will remains constant
        Container(
          height: 300,
          color: Colors.black,
        ),
        Expanded(
          child: SingleChildScrollView(
             //This is Scrollable Container
            child: Container(
              height: 400,
              color: Colors.blue,
            ),
          ),
        )
      ],
    ),
  ),
);

Comments

[Zarkaan]

THIS WORKED FOR ME! Thank you so much for a reply good sir. What I have done is that I have divided the UI into two sections namely TopSection and BottomSection, Since you told me to add expanded to the two sections, I just wrapped both of them in Expanded and it worked. Can you please elaborate why so,I am still a naive beginner in flutter. Thank you again. You are a lifesaver.