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,
          ),
        ),
      ),
    ],
  )

Answer 1

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