Problem with scrolling body of my Flutter web page

Question

I'm trying to do my first flutter web page. I want make navigation app bar on the top and scrollable area with pictures and text below. And I have a problem with renering my page. Body of my page is not scrolling and it overflows at the bottom. What I'm doing wrong? Here is my sample code:

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        TopBar(),
        SingleChildScrollView(
          child: Column(
            children: [
              Container(
                height: 300,
                color: Colors.red,
              ),
              Container(
                height: 300,
                color: Colors.green,
              ),
              Container(
                height: 300,
                color: Colors.black,
              )
            ],
          ),
        )
      ],
    );
  }
}

Solution

You can combine Column and ListView like:

@override
Widget build(BuildContext context) {
  return Column(
    children: [
      AppBar(),
      Expanded(
        child: ListView(
          children: [
            Container(
              height: 300,
              color: Colors.red,
            ),
            Container(
              height: 300,
              color: Colors.green,
            ),
            Container(
              height: 300,
              color: Colors.black,
            )
          ],
        ),
      ),
    ],
  );
}

Comments

[spajdo]

But in this solution TopBar will be scrolling too, and I dont want it. I want TopBar to be static on the top of page. Sorry, I dont mention it in my question...

[CopsOnRoad]

No worries, I updated the code, let me know if that didn't help

[spajdo]

It looks good. Im not on my PC now, but I will try it tomorrow and I let you know

[CopsOnRoad]

Sure thing, no problem.