Search code examples
flutterdartflutter-layoutflutter-dependenciesinfinite-scroll

how to show the original height of items in PagedGridView in flutter by controlling the childAspectRatio


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


Solution

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