How to make the page scrollable in the following structure (Flutter)

Question

I'm building a product detail page. As the following piece of code and image shown, when there is a lot of content in the description part, the bottom overflow will occur. I'm wondering how to make the page scrollable, I've tried wrapping the Stack with SingleChildScrollView, but this is definitely not working in my case here. Can anyone help me with that? Thank you very much!!!!!

class DetailsScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final size = MediaQuery.of(context).size;
    return Scaffold(
      backgroundColor: Colors.white,
      body: Stack(
        children: [
          buildBody("path/to/image", size),
        ],
      ),
    );
  }

  Positioned buildBody(String imagePath, Size size) {
    return Positioned.fill(
      child: Column(
        children: [
          Expanded(
            child: Container(
              padding: EdgeInsets.symmetric(vertical: 60, horizontal: 30),
              color: Colors.green,
              child: Stack(
                children: [
                  Align(
                    alignment: Alignment.center,
                    child: Hero(
                      tag: 1,
                      child: Image.asset(
                        imagePath,
                        width: size.width * 0.7,
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
          Expanded(
            child: Container(
              color: Colors.white,
              child: Column(
                children: [
                  SizedBox(
                    height: 100,
                  ),
                  Container(
                    margin: EdgeInsets.symmetric(
                      horizontal: 20,
                    ),
                    child: Row(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        CircleAvatar(),
                        SizedBox(
                          width: 10,
                        ),
                        Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Text(
                              'Anvesha Shandilya',
                              style: TextStyle(
                                  fontWeight: FontWeight.bold, fontSize: 16),
                            ),
                            Text(
                              'Owner',
                              style: TextStyle(
                                color: fadedBlack,
                              ),
                            ),
                          ],
                        ),
                        Expanded(child: Container()),
                        Text(
                          'Dec 16, 2020',
                          style: TextStyle(
                            color: fadedBlack,
                            fontSize: 12,
                          ),
                        ),
                      ],
                    ),
                  ),
                  SizedBox(
                    height: 30,
                  ),
                  Container(
                    margin: EdgeInsets.symmetric(
                      horizontal: 20,
                    ),
                    child: Text(
                      'A lot of content..................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................',
                      style: TextStyle(
                        color: fadedBlack,
                        height: 1.7,
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}

Error: Bottom Overflowed

To reproduce: Change the path/to/image, to this: A image can be used with the code:

Answer 1

tl;dr remove Expanded widgets -> remove Stack -> replace Column with ListView (for scrollability)

Start by removing Expanded widgets from the tree as you don't really need them. If possible, you should use mainAxisAlignment and crossAxisAlignment to position your widgets. That's exactly how you should handle placing the date next to user's name.

Expanded documentation states with which widgets you can use it:

Creates a widget that expands a child of a Row, Column, or Flex so that the child fills the available space along the flex widget's main axis.

Then remove Stack widget. If you don't then it will still work as Stack tries to get as big as its positioned children so it will just get as big as the Column you have inside. It's redundant.

Last but not least, replace Column with ListView. Column doesn't really care about whether it's overflowing or if it's being rendered. So if you create a Column that is bigger than the screen, it will simply display it which will cause the overflow. To fix that you could wrap it SingleChildScrollView, but I think it's more appropriate to just use ListView instead.

Here's an amazing explanation of layout system in Flutter: https://flutter.dev/docs/development/ui/layout/constraints