How to make scrollable part of page in Flutter?-CodePudding

I can't make scrollable the part highlighted in red enter image description here

And this is my code:

class Home extends StatelessWidget {
  const Home({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          _headerWidget(),
          _actionWidget(),
          _backgroundWidget(),
          _bottomBar()
        ],
      )
    );
  }
}
Widget _bottomBar() => Positioned();
Widget _headerWidget()=> Positioned();
Widget _actionWidget() => Positioned();

Widget _backgroundWidget() => Positioned(
   top: 320,
   bottom: 0,
   left: 0,
   right: 0,
   child: Column(
     crossAxisAlignment: CrossAxisAlignment.center,
          children: [
              Card(...),
              Card(...)
           ]
      )
);

I want scroll this part of the page (_backgroundWidget()), I tried putting a height together with the ListView, but it didn't work, so I went back to the initial code.

CodePudding user response：

If you use listview then use property shrinkWrap:true. But I think Singlechilscrollview will work for you. First try Wrap a Container with Singlechildscrollview, then container's child will be Column. For testing purpose give your container a specific height.

CodePudding user response：

Wrap your Column widget with ListView

Widget _backgroundWidget() =>
    Positioned(
        top: 320,
        bottom: 0,
        left: 0,
        right: 0,
        child: ListView(
          shrinkWrap: true,
          children: [
            Column(
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  Card(...),
                  Card(...)
                ]
            ),
          ],
        )
    );