4

I have a vertical PageView with different item height :

enter image description here

But I would like to wrap each item according their height.

The final result I want here:

enter image description here

How can we do this ?

nicover
  • 2,213
  • 10
  • 24

2 Answers2

1

UPDATE 2022:

After some time, I returned to this problem and have now created a smart and slim pub.dev package with way more features, less buggy, and maintained code.

SnappyListView(
  itemCount: Colors.accents.length,
  itemBuilder: (context, index) {
    return Container(
        height: 100,
        color: Colors.accents.elementAt(index),
        child: Text("Index: $index"),
    ),
);

For those still interested in a non-packages solution (not recommended), make sure to check out the edit queue of this answer.

Paul
  • 1,349
  • 1
  • 14
  • 26
  • With this solution, an "infinite" or large children list (with image and video) will produce OOM for sure. Would you have any lead to clear / destroy widget according their place ? – nicover Oct 26 '21 at 14:00
  • 1
    I haven't had a look at it yet, but I wouldn't put all the images/videos in the list itself. I would rather make a list of URLs, and then stream only a certain amount, when scrolling (ex. 10 before and after the element in focus - so the list never gets bigger than 21 widgets). Does that help? – Paul Oct 27 '21 at 11:45
  • It help. Thanks for reply – nicover Oct 27 '21 at 17:23
0

first of all, you should use SafeArea in order to prevent your widgets go through the notch. see [this][1]. Then you should use ListView instead of PageView because PageView creates pages with the same sizes. in ListView create an array of int that stores height of widget and use it to create widgets with different size.

List<int> heights = [100, 120, 10];// and so on

\\then use it as follow:
ListView.builder(
            itemCount: 6,
              itemBuilder: (context, i){
                return Container(
                     height:heights[i],
                     width: 200, // or any value you want
                     padding: const EdgeInsets.all(8.0),
                     alignment: Alignment.center,
                     child: YourWidget);
              },
          ),


  [1]: https://stackoverflow.com/questions/49227667/using-safearea-in-flutter#:~:text=SafeArea%20is%20basically%20a%20glorified,%22creative%22%20features%20by%20manufactures.
Abbasihsn
  • 2,075
  • 1
  • 7
  • 17
  • 1
    Agree. And I think he want the snap effect (auto center the middle item) too. If so, implement snap logic for this list controller should be ok. – Kin Cheng Aug 28 '21 at 11:58
  • Thanks for your answer. Yes i'm looking for the snap effect, no simple list. Please provide example with the same effect than PageView and I'll accept it – nicover Aug 28 '21 at 13:25
  • I think the snap effect only is suitable for horizontal scrolling and cards of the same size. See https://stackoverflow.com/questions/51607440/horizontally-scrollable-cards-with-snap-effect-in-flutter . By the way, if you want to centerize the items, check the updated answer – Abbasihsn Aug 28 '21 at 13:32