Unbounded height of PagedMasonryGridView in SliverList

[tovidd]

I use flutter_bloc for helping appendPage and no problem with it at all. But SliverList keep returning unbounded height error when place PagedMasonryGridView inside.

final _pagingController = PagingController<int, ProductEntity>(
    firstPageKey: 1,
  );

@override
  Widget build(BuildContext context) {
    return CustomScrollView(
      slivers: [
        SliverList(
          delegate: SliverChildListDelegate([
            for (int i = 1; i <= 20; i++)
              Container(
                height: 100,
                width: 300,
                color: i % 2 == 0 ? Colors.lightBlue : Colors.lightGreen,
                alignment: Alignment.center,
                child: Text('$i'),
              ),
            BlocListener<HomeBloc, HomeState>(
              listenWhen: (p, c) =>
                  p.getFrequentlyProduct is ResourceSuccess !=
                      c.getFrequentlyProduct is ResourceSuccess ||
                  p.getFrequentlyProduct is ResourceError !=
                      c.getFrequentlyProduct is ResourceError,
              listener: (context, state) {
                final nextPage = (_pagingController.nextPageKey ??
                        _pagingController.firstPageKey) +
                    1;

                state.getFrequentlyProduct.maybeWhen(
                  success: (_, __, data) {
                    if (data.isEmpty || data.length < 6) {
                      _pagingController.appendLastPage(data);
                    } else {
                      _pagingController.appendPage(data, nextPage);
                    }
                  },
                  error: (_, error, __, ___) {
                    _pagingController.error = error;
                  },
                  orElse: () {},
                );
              },
              child: PagedMasonryGridView<int, ProductEntity>(
                pagingController: _pagingController,
                physics: const NeverScrollableScrollPhysics(),
                crossAxisSpacing: 8,
                mainAxisSpacing: 8,
                gridDelegateBuilder: (_) {
                  return const SliverSimpleGridDelegateWithFixedCrossAxisCount(
                    crossAxisCount: 2,
                  );
                },
                builderDelegate: PagedChildBuilderDelegate<ProductEntity>(
                  itemBuilder: (_, product, i) => Container(
                    height: 100,
                    width: 300,
                    color: i % 2 == 0 ? Colors.pinkAccent : Colors.yellowAccent,
                    alignment: Alignment.center,
                    child: Text(product.name),
                  ),
                ),
              ),
            ),
          ]),
        ),
      ],
    );
  }

I also tried wrapped PagedMasonryGridView with SliverFillRemaining.

It's works now but created new issue, when scroll physic set to NeverScrollableScrollPhysics it don't allow to scroll to bottom and stuck at the middle of the list.

But when set to ClampingScrollPhysics or scroll physics that allow you to scrolling, then it allow you to scroll until end of the list but it create 2 scroll viewport.

  @override
  Widget build(BuildContext context) {
    return CustomScrollView(
      slivers: [
        SliverList(
          delegate: SliverChildListDelegate([
            for (int i = 1; i <= 20; i++)
              Container(
                height: 100,
                width: 300,
                color: i % 2 == 0 ? Colors.lightBlue : Colors.lightGreen,
                alignment: Alignment.center,
                child: Text('$i'),
              ),
          ]),
        ),

        SliverFillRemaining(
          hasScrollBody: true,
          child: BlocListener<HomeBloc, HomeState>(
            listenWhen: (p, c) =>
            p.getFrequentlyProduct is ResourceSuccess !=
                c.getFrequentlyProduct is ResourceSuccess ||
                p.getFrequentlyProduct is ResourceError !=
                    c.getFrequentlyProduct is ResourceError,
            listener: (context, state) {
              final nextPage = (_pagingController.nextPageKey ??
                  _pagingController.firstPageKey) +
                  1;

              state.getFrequentlyProduct.maybeWhen(
                success: (_, __, data) {
                  if (data.isEmpty || data.length < 6) {
                    _pagingController.appendLastPage(data);
                  } else {
                    _pagingController.appendPage(data, nextPage);
                  }
                },
                error: (_, error, __, ___) {
                  _pagingController.error = error;
                },
                orElse: () {},
              );
            },
            child: PagedMasonryGridView<int, ProductEntity>(
              pagingController: _pagingController,
              physics: const NeverScrollableScrollPhysics(),
              crossAxisSpacing: 8,
              mainAxisSpacing: 8,
              gridDelegateBuilder: (_) {
                return const SliverSimpleGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: 2,
                );
              },
              builderDelegate: PagedChildBuilderDelegate<ProductEntity>(
                itemBuilder: (_, product, i) =>
                    Container(
                      height: 100,
                      width: 300,
                      color: i % 2 == 0 ? Colors.pinkAccent : Colors
                          .yellowAccent,
                      alignment: Alignment.center,
                      child: Text(product.name),
                    ),
              ),
            ),
          ),
        ),
      ],
    );
  }

I was expect able to scroll until the end of the list without having multiple scroll viewport.

I really hope for your help, many thanks

infinite_scroll_pagination: ^4.0.0 flutter v3.13.3 (stable)

[tovidd]

solved thankyou