How to achieve horizontal grid scroll with sliver

Question

How to get horizontal grid view similar to this example using sliver:[]. I've tries using he example given here but it is using mutiple container inside children to get the desired result. also tries giving it to list.generate but that dosen't seems to work or I don't really know how to use it.

Note: I have other multiple scroll list too inside [ ]

Here is what what I have working but it comes out as List:

  body: CustomScrollView(
    slivers: [
      SliverPadding(
        padding: EdgeInsets.symmetric(horizontal: 16.0),
        sliver: SliverGrid(
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            childAspectRatio: 2,
            crossAxisSpacing: 16,
            mainAxisSpacing: 16,
            crossAxisCount: 2,
          ),
          delegate: SliverChildBuilderDelegate(
            (BuildContext context, int i) {
              return InkWell(
                onTap: () {},
                child: ClipRRect(
                  clipBehavior: Clip.antiAlias,
                  borderRadius: BorderRadius.circular(8),
                  child: Container(
                    height: 200,
                    width: double.infinity,
                    decoration: BoxDecoration(
                        image: DecorationImage(
                          image:
                              CachedNetworkImageProvider('categoryImage'),
                          fit: BoxFit.cover,
                          onError: (exception, stackTrace) =>
                              LoadingImage(),
                        ),
                        gradient: const LinearGradient(
                          begin: Alignment.topLeft,
                          end: Alignment.bottomRight,
                          colors: [
                            Color(0x1FFFFFFF),
                            Color(0x463B3B3B),
                          ],
                        ),
                        borderRadius: BorderRadius.circular(8),
                        boxShadow: [
                          BoxShadow(
                              color: Colors.grey.shade900,
                              offset: const Offset(1, 1),
                              spreadRadius: 1,
                              blurRadius: 50,
                              blurStyle: BlurStyle.outer),
                        ]),
                    child: Container(
                      padding: const EdgeInsets.all(10),
                      height: 100,
                      color: Colors.transparent,
                      alignment: Alignment.bottomLeft,
                      width: double.infinity,
                      child: Text(
                        "title",
                        overflow: TextOverflow.ellipsis,
                        style: Theme.of(context).textTheme.bodyText1!,
                      ),
                    ),
                  ),
                ),
              );
            },
            childCount: count.length,
          ),
        ),
      ),
    ],
  )

This should answer your question https://stackoverflow.com/a/52766231/17104517 — Ante Bule, Jan 19 '23 at 07:45
You can use this [https://stackoverflow.com/questions/52738034/flutter-sliver-layout-horizontal-scroll-inside-sliver-list](https://stackoverflow.com/questions/52738034/flutter-sliver-layout-horizontal-scroll-inside-sliver-list) And replace ListView with GridView. — Abhishek Karad, Jan 19 '23 at 07:53

score 1 · Accepted Answer · answered Jan 19 '23 at 07:50

Just Add scrollDirection: Axis.horizontal, inside CustomScrollView, Just Change My images with your hope its help to you

Full Widget:

CustomScrollView(
    scrollDirection: Axis.horizontal,
    slivers: [
      SliverPadding(
        padding: EdgeInsets.symmetric(horizontal: 16.0),
        sliver: SliverGrid(
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            childAspectRatio: 2,
            crossAxisSpacing: 16,
            mainAxisSpacing: 16,
            crossAxisCount: 2,
          ),
          delegate: SliverChildBuilderDelegate(
            (BuildContext context, int i) {
              return InkWell(
                onTap: () {},
                child: ClipRRect(
                  clipBehavior: Clip.antiAlias,
                  borderRadius: BorderRadius.circular(8),
                  child: Container(
                    height: 200,
                    width: double.infinity,
                    decoration: BoxDecoration(
                        image: DecorationImage(
                          image: NetworkImage(
                              'https://storage.googleapis.com/cms-storage-bucket/a9d6ce81aee44ae017ee.png'),
                        ),
                        gradient: const LinearGradient(
                          begin: Alignment.topLeft,
                          end: Alignment.bottomRight,
                          colors: [
                            Color(0x1FFFFFFF),
                            Color(0x463B3B3B),
                          ],
                        ),
                        borderRadius: BorderRadius.circular(8),
                        boxShadow: [
                          BoxShadow(
                              color: Colors.grey.shade900,
                              offset: const Offset(1, 1),
                              spreadRadius: 1,
                              blurRadius: 50,
                              blurStyle: BlurStyle.outer),
                        ]),
                    child: Container(
                      padding: const EdgeInsets.all(10),
                      height: 100,
                      color: Colors.transparent,
                      alignment: Alignment.bottomLeft,
                      width: double.infinity,
                      child: Text(
                        "title",
                        overflow: TextOverflow.ellipsis,
                        style: Theme.of(context).textTheme.bodyText1!,
                      ),
                    ),
                  ),
                ),
              );
            },
            childCount: 20,
          ),
        ),
      ),
    ],
  ),

Result Image->

although I have other SliverToBoxAdapter() in CustomScrollView(), applying Axis.horizontal would apply to all other list too. So I created another class with CustomScrollView() and there aded Axis.horizontal. did worked. — Digamber negi, Jan 19 '23 at 11:18

How to achieve horizontal grid scroll with sliver

1 Answers1