0

I am now working with the infinite scroll down widget of flutter. The problem is every child(item) widget's height should be different between each other.
In PagedGridView, there is a property called childAspectRatio. This is a double type value by default 1.0
I want to make the each child widget's height would be flexible according to its original size. Is there a good way to set the childAspectRatio dynamically according to the item's original size? If this is an impossible way, is there any other approach without using infinite scroll loading package that implements each item's height-flexible grid view with scroll loading? How to do this?

Widget build(BuildContext context) {
  var size = MediaQuery.of(context).size;
  final double itemWidth = size.width / 2;
  double itemHeight = 0.0;

  _displayItem (BuildContext context, Widget item, int index) {
    double itemHeight = MediaQuery.of(context).size.height;
    print(itemHeight);
    return item;
  }

  return PagedGridView<int, Widget>(
    showNewPageProgressIndicatorAsGridChild: true,
    showNewPageErrorIndicatorAsGridChild: true,
    showNoMoreItemsIndicatorAsGridChild: true,
    pagingController: _pagingControllerForDummy,
    builderDelegate: PagedChildBuilderDelegate<Widget>(
      itemBuilder: (context, item, index) => _displayItem(context, item, index),
    ), 
    gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
      childAspectRatio: itemWidth / itemHeight,
      crossAxisCount: 2,
    ),
  );
}

Screen

Speeder
  • 120
  • 3
  • 12
  • 1
    It seems like you want a `GridView` but each item is differently sized? How would it look like, when different items are put into the grid, do you leave gaps between, or...? Could you post a picture of what you want to achieve? – WSBT Oct 09 '21 at 07:15
  • 1
    did You see https://pub.dev/packages/flutter_staggered_grid_view – Sajjad Oct 09 '21 at 14:55
  • Hi. MohandesR. Yes. But staggered view does not support the infinite scroll loading. If you don't mind, could you help me how to use staggered view with infinite scroll loading functionality? – Speeder Oct 09 '21 at 15:41
  • Hi , I think this way can solve Your problem. https://stackoverflow.com/a/69509685/6813907 – Sajjad Oct 10 '21 at 04:41

4 Answers4

3

I would suggest you use an existing package like the flutter_staggered_grid_view because you certainly don't want to mess with the complexity of the layout. Then you choose a state management solution (I recommend the BLoC pattern). The key is to assign a ScrollController to check whether the user has scrolled to the bottom of the grid view. In this case you tell your state management solution to fetch new items from the API which triggers a rebuild of your grid view with the new amount.

Here is an example using StatefulWidget: flutter_staggered_grid_view infinite scroll from api feed

Schnodderbalken
  • 3,257
  • 4
  • 34
  • 60
1

My friend made a pub package that looks similar to what you want to achieve, and supports infinite scrolling: waterfall_flow

He also made a live demo using Flutter Web, you can play with the demo before you decide if it's suitable for your needs.

demo picture

(Above picture is taken from simple live web demo.)

a more complex demo

(Above picture is taken from complex live web demo.)

If you have any further questions you can direct comment here (and I can ask him to answer) or reach out to him through GitHub, or join our QQ discussion group listed in the package description - we are highly active there and will answer any questions you have regarding this package, other packages or just Flutter questions in general.

WSBT
  • 33,033
  • 18
  • 128
  • 133
  • Hi. this widget is so helpful for me. thank you. – Speeder Oct 18 '21 at 00:43
  • Hi. @user1032613. how are you? Could you help me with this problem? https://stackoverflow.com/questions/69830291/can-anyone-tell-me-how-to-launch-messages-app-and-set-the-to-field-the-destin – Speeder Nov 03 '21 at 19:00
0

I find a way to set aspect ratio of biggest child to our Grid view dynamicly. how it work ? First please Look at this answer for . how we can find size of a widget during the build with overlayEntery

How to get a height of a Widget?

after that we set the right aspect ratio (Measured with overlayEntery ) to our Grid View in childAspectRatio.

G H Prakash
  • 1,720
  • 10
  • 30
0

Make two listviews and connect the scrollControls. When a new element is added, you can find out which one is shorter by looking at the maxScrollExtends values of the listviews.

Mehmet Yaz
  • 195
  • 3