Ad

How To Warp The GridView Into Carousel In Flutter?

is it possible to put the GridView into Carousel in flutter like this??

i don't understand about the carousel but i learn it and i get the Carousel more useful then grid-view if i follow my design?

this is my GridView Code

Container(
                    margin: EdgeInsets.all(2),
                    child: new StaggeredGridView.countBuilder(
                        physics: NeverScrollableScrollPhysics(),
                        shrinkWrap: true,
                        crossAxisCount: 2,
                        crossAxisSpacing: 12,
                        mainAxisSpacing: 12,
                        itemCount: imageList.length,
                        itemBuilder: (context, index) {
                          return Container(
                            decoration: BoxDecoration(
                                color: Colors.transparent,
                                borderRadius:
                                    BorderRadius.all(Radius.circular(12))),
                            child: ClipRRect(
                              borderRadius:
                                  BorderRadius.all(Radius.circular(12)),
                              child: FadeInImage.memoryNetwork(
                                placeholder: kTransparentImage,
                                image: imageList[index],
                                fit: BoxFit.cover,
                              ),
                            ),
                          );
                        },
                        staggeredTileBuilder: (index) {
                          return new StaggeredTile.count(
                              1, index.isEven ? 1 : 2);
                        }),
                  )

enter image description here

Ad

Answer

Yes you can simply use StaggeredGridView inside CarouselSlider. About the UI you are trying to archive, the first image(index=0) will be the large one. If we try to simplify the UI by dividing the pattern, we can see there are three GridItem can think as single bloc, and to get the left one larger we need to use StaggeredTile.count(1, index % 3 == 0 ? 2 : 1);. In this case staggeredTileBuilder will be

 staggeredTileBuilder: (index) {
              return StaggeredTile.count(1, index % 3 == 0 ? 2 : 1);
            }),

enter image description here

Widget

 return Scaffold(
      body: CarouselSlider(
        items: [
          Container(
            margin: EdgeInsets.all(2),
            child: StaggeredGridView.countBuilder(
                // physics: NeverScrollableScrollPhysics(), // it can use scollable if upper widget dont cause any issue
                shrinkWrap: true,
                crossAxisCount: 2,
                crossAxisSpacing: 12,
                mainAxisSpacing: 12,
                itemCount: imageList.length,
                itemBuilder: (context, index) {
                  return Container(
                    decoration: const BoxDecoration(
                        color: Colors.transparent,
                        borderRadius: BorderRadius.all(Radius.circular(12))),
                    child: ClipRRect(
                        borderRadius:
                            const BorderRadius.all(Radius.circular(12)),
                        child: Container(
                          color: Colors.amber,
                          alignment: Alignment.center,
                          child: Text(index.toString()),
                        )
                        // FadeInImage.memoryNetwork(
                        //   // placeholder: kTransparentImage,
                        //   image: imageList[index],
                        //   fit: BoxFit.cover,
                        // ),
                        ),
                  );
                },
                staggeredTileBuilder: (index) {
                  return StaggeredTile.count(1, index % 3 == 0 ? 2 : 1);
                }),
          ),
          Container(
            color: Colors.deepPurple,
          ),
          Container(
            color: Colors.deepOrange,
          ),
        ],
        options: CarouselOptions(aspectRatio: 1, viewportFraction: 1),
      ),
    );

I would say practice with Text Widget with viewing index to understand what and how widget is changing and set the logic inside staggeredTileBuilder to get the outcome. And about the imagePath you aren't passing string value on that, debug/print the path to verify it.

For more about

Ad
source: stackoverflow.com
Ad