CODEWITHSUNDEEP
dartflutter
KURRU HEM
KURRU HEM

Reputation: 1853

How to scroll page in flutter with multiple listviewbuilders

I'm trying to create a page which contains multiple sections and each section is generated using ListView.builder(). Here the page problem I'm facing is that , the page is not being scrolled unless the touch is not focused on the widget generated with ListView.

  Widget _widget1(BuildContext context){
    return ListView.builder(
      ....
       .....
    );
  }
  Widget _widget2(BuildContext context){
    return ListView.builder(
      ....
       .....
    );
  }
  Widget _widget3(BuildContext context){
    return ListView.builder(
      ....
       .....
    );
  }

  body: Container(
    child: ListView(
      scrollDirection: Axis.vertical,
      physics: PageScrollPhysics(),
      shrinkWrap: true,
      children: <Widget>[
        Container(
          height: 140.0,
          child: _offersBanner(context)
        ),
        _widget1(context),
        _widget2(context),
        _widget3(context)
      ],
    )
  )

Upvotes: 2

Views: 3485

Answers (2)

Navin Kumar
Navin Kumar

Reputation: 4027

try this, please add below code inside ListView.builder

 shrinkWrap: true,
 physics: ClampingScrollPhysics(),

Upvotes: 4

Amsakanna
Amsakanna

Reputation: 12934

Do you want four scrolling lists or just one combined list?

  • If you want the former what you've done should work the way you want.
  • If you want the latter (a combined list) then you should use column instead of listview in your _widget1, _widget2 and _widget3 classes.

I guess you need the latter.

  Widget _widget1(BuildContext context){
    return Column(
      ....
       .....
    );
  }
  Widget _widget2(BuildContext context){
    return Column(
      ....
       .....
    );
  }
  Widget _widget3(BuildContext context){
    return Column(
      ....
       .....
    );
  }
  body: Container(
    child: ListView(
      scrollDirection: Axis.vertical,
      physics: PageScrollPhysics(),
      shrinkWrap: true,
      children: <Widget>[
        Container(
          height: 140.0,
          child: _offersBanner(context)
        ),
        _widget1(context),
        _widget2(context),
        _widget3(context)
      ],
    )
  )

Upvotes: 3

Related Questions