Laura Barbato
Laura Barbato

Reputation: 1

How to make scrollable part of page in Flutter?

enter image description here

I can't make scrollable the part highlighted in red

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();

// need scrolling in below widget !
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.

Upvotes: 0

Views: 181

Answers (2)

Ashif Mujtoba
Ashif Mujtoba

Reputation: 56

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.

Upvotes: 1

Hitarth Chhunchha
Hitarth Chhunchha

Reputation: 676

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

Upvotes: 0

Related Questions