CODEWITHSUNDEEP
flutterscrollflutter-layoutflutter-web
spajdo
spajdo

Reputation: 953

Problem with scrolling body of my Flutter web page

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

Upvotes: 2

Views: 3804

Answers (1)

CopsOnRoad
CopsOnRoad

Reputation: 267384

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

Upvotes: 2

Related Questions