Flutter - Listview in scrollable Page

Question

I would like to build a scrollable page which list different widgets (in a listview). Basically, my idea was to have the following setup:

SingleChildScrollView (Container (Column (... Expanded( ListView))))

This however only works with a fixed height for the container. Is there any way to dynamically change the height of the container depending how many widgets the listview displays?

PS: I made the listview non-scrollable as the overall page is already scrollable through SingleChildScrollView.

Hope someone can help here.

Thanks so much in advance, Nicolas

Code:

class _ProfileState extends State<Profile> {
  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
          child: Container(height: 2000, child:
        Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Expanded(child: PostList()),
],),),);}}

And:

class _PostListState extends State<PostList> {
  @override
  Widget build(BuildContext context) {    
    final postData = Provider.of<List<PostData>>(context) ?? [];    
    if (postData != null) {
      return ListView.builder(
        physics: const NeverScrollableScrollPhysics(),
        itemCount: postData.length,
        itemBuilder: (context, index) {
          return PostTile (postData: postData[index]);
        },);
    } else {
      return Text('loading'); // Check if necessary
}}}

Try to post some more code here, it's not clear what is causing the issue you are mentioning. — Stefano Saitta
– Stefano Saitta, Commented Apr 4, 2020 at 11:48
Also probably you don't need a ListView there, you can accomplish the same using simply a another column. So following your structure: SingleChildScrollView (Container (Column (... Column(...your widgets...)))) — Stefano Saitta
– Stefano Saitta, Commented Apr 4, 2020 at 11:56
Thanks so much for the fast response. I added the code above - with a set height of 2000 which I'd like to set dynamically depending on how high the PostList widget is. — Nicolas O
– Nicolas O, Commented Apr 4, 2020 at 12:33

Nicolas O · Accepted Answer · 2020-04-04 17:40:05Z

1

In order to accomplish what you are looking for here, you should probably change the Listiew into a Column and remove the Container.

Something like this:

class _ProfileState extends State<Profile> {
  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
          child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
           PostList(),
],),);}}

class _PostListState extends State<PostList> {
  @override
  Widget build(BuildContext context) {    
    final postData = Provider.of<List<PostData>>(context) ?? [];    
    if (postData != null) {
      return Column(
        children: ...postData.map((el) => PostTile (postData: el))
      );
    } else {
      return Text('loading'); // Check if necessary
}}}

edited Apr 4, 2020 at 17:40

Nicolas O

1513 silver badges13 bronze badges

answered Apr 4, 2020 at 13:31

Stefano Saitta

2,0721 gold badge22 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Nicolas O Over a year ago

Hey thanks for the answer. It gave me an error but when you remove the Expanded() in the first code you wrote above, it works. Thanks a lot!

Stefano Saitta Over a year ago

Sorry I didn't actually test the code :) happy to help

Pol · Accepted Answer · 2020-04-04 13:40:41Z

If you want to have a list of different ListView, try putting shrinkWrap: true to all your listView children and add physics to it.

ListView(
    shrinkWrap: false,
    physics: ClampingScrollPhysics(),
    children: <Widget>[
      Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          ListView.builder(
            itemCount: 3,
            shrinkWrap: true,
            physics: ClampingScrollPhysics(),
            itemBuilder: (context, index) {
              return ListTile(
                  title: Text(
                'Item #$index',
              ));
            },
          ),
          ListView.builder(
            itemCount: 6,
            shrinkWrap: true,
            physics: ClampingScrollPhysics(),
            itemBuilder: (context, index) {
              return ListTile(
                  leading: Icon(Icons.settings),
                  title: Text(
                    'SecondItem #$index',
                  ));
            },
          ),
          ListView.builder(
            itemCount: 6,
            shrinkWrap: true,
            physics: ClampingScrollPhysics(),
            itemBuilder: (context, index) {
              return ListTile(
                  dense: false,
                  trailing: Icon(Icons.settings),
                  title: Text(
                    'THIRD ITEM #$index',
                  ),
                  subtitle: Text(
                    'This is third item number $index',
                  ));
            },
          ),
        ],
      ),
    ],
  )

Collectives™ on Stack Overflow

Flutter - Listview in scrollable Page

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related