skip to Main Content

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.

2

Answers


  1. 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.

    Login or Signup to reply.
  2. 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(...)
                    ]
                ),
              ],
            )
        );
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search