GridView scrolling not working inside SliverFillRemaining

Question

I create a widget like this:

main :

Widget build(BuildContext context) {
    return Center(
      child: Padding(
        padding: const EdgeInsets.all(100.0),
        child: Row(
          mainAxisSize: MainAxisSize.min,
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Flexible(
              flex: 1,
              fit: FlexFit.loose,
              child: ValueListenableBuilder<UIState>(
                  valueListenable: valuePageNotifier,
                  builder: (context, uiState, child) {
                    return Container(
                        margin: const EdgeInsets.symmetric(
                          vertical: 36,
                        ),
                        constraints: const BoxConstraints(
                            minWidth: 800,
                            maxWidth: 850,
                            minHeight: 650,
                            maxHeight: 700),
                        // color: Colors.green,
                        child: const Stack(
                          // clipBehavior: Clip.antiAlias,
                          alignment: Alignment.center,
                          children: [
                            WorksPage(
                              height: 700,
                              isActive: true,
                            ),
                          ],
                        ));
                  }),
            ),
          ],
        ),
      ),
    );

and widget:

    return DecoratedBox(
      decoration: BoxDecoration(
        color: Colors.grey[50]!,
        borderRadius: const BorderRadius.only(
          topRight: Radius.circular(8),
          bottomRight: Radius.circular(8),
        ),
      ),
      child: Padding(
        padding:
            const EdgeInsets.only(left: 16, top: 18, right: 20, bottom: 18),
        child: CustomScrollView(
          scrollBehavior: CustomScrollBehavior(),
          physics: const AlwaysScrollableScrollPhysics(),
          slivers: [
            SliverFillRemaining(
              fillOverscroll: true,
              child: Column(
                children: [
                  Expanded(
                    child: GridView.custom(
                      physics: const NeverScrollableScrollPhysics(),
                      controller: ScrollController(),
                      clipBehavior: Clip.antiAlias,
                      gridDelegate: SliverQuiltedGridDelegate(
                          mainAxisSpacing: 20,
                          crossAxisSpacing: 10,
                          crossAxisCount: 2,
                          repeatPattern: QuiltedGridRepeatPattern.inverted,
                          pattern: const [
                            QuiltedGridTile(1, 2),
                            QuiltedGridTile(2, 1),
                            QuiltedGridTile(1, 1),
                          ]),
                      childrenDelegate: SliverChildBuilderDelegate(
                          semanticIndexOffset: 2,
                          childCount: models.length, (context, index) {
                        return Padding(
                          padding: const EdgeInsets.only(bottom: 5),
                          child: DecoratedBox(
                            decoration: BoxDecoration(
                              border: Border.all(color: Colors.grey),
                              borderRadius: BorderRadius.circular(8),
                            ),
                            child: Padding(
                                padding: const EdgeInsets.all(8),
                                child: Image.asset(
                                  models[index].path!,
                                  fit: BoxFit.cover,
                                )),
                          ),
                        );
                      }),
                    ),
                  ),
                ],
              ),
            )
          ],
        ),
      ),
    );
  }
}

I added AlwaysScrollableScrollPhysics() to CustomScrollView and NeverScrollableScrollPhysics to GridView but the scrolling not working. What is your suggestion?

score 0 · Answer 1 · answered Aug 15 '23 at 18:32

0

You have to use a SliverGrid if you want a scrollable Grid inside a CustomScrollView.

So instead of

CustomScrollView > SliverFillRemaining > Column > Expanded > GridView

in your example, you should use

CustomScrollView > SliverGrid

answered Aug 15 '23 at 18:32

Colin

211
2
8

Sliver grid returns same size widget. SliverQuiltedGridDelegate is for different widget sizes. @Colin – Cyrus the Great Aug 15 '23 at 18:49
Oh, sorry, I didn't see that you are using a plugin. Excerpt from your plugins documentation: "This layout is intended for a small number of items. I didn't find, for the moment, a performant algorithm which would work in a Sliver context, that's why this is not a GridView and therefore there are no SliverStaggeredGrid." – Colin Aug 15 '23 at 19:35
So I guess the only fast and easy solution would be to set shrinkWrap: true. This looks similar to your question: https://stackoverflow.com/questions/70549115/how-to-implement-staggered-grid-view-with-slivers-in-flutter – Colin Aug 15 '23 at 19:35
I did it before, unfortunately scrolling did not work https://pastebin.ubuntu.com/p/G88RYpK4p4/ and https://ibb.co/hWwGbPN @Colin – Cyrus the Great Aug 15 '23 at 19:55
Have you tried to use the SliverQuiltedGridDelegate in a SliverGrid like suggested by AmirahmadAdibi in the link above? I haven't used that plugin yet so I don't know if it works what they are saying. – Colin Aug 15 '23 at 20:24
I have used SliverQuiltedGridDelegate in a SliverGrid but I can not scroll again. the problem is somewhere else @Colin – Cyrus the Great Aug 15 '23 at 20:32

GridView scrolling not working inside SliverFillRemaining

1 Answers1