Search code examples
flutter

Flutter How to make flutter_staggered_grid_view?

I'm trying to make this layout as shown in the attached image

flutter_staggered_grid_view

that's my code with flutter_staggered_grid_view and cached network image, but the result isn't what I want to do all I got is a simple grid view as shown in the attached screen can someone help me? I don't know where is the mistake?

return MasonryGridView.count(
  itemCount: 6,
  mainAxisSpacing: 4,
  crossAxisSpacing: 8,
  crossAxisCount: 2,
  itemBuilder: (context, index) => Card(
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(20.0),
    ),
    child: Column(
      mainAxisSize: MainAxisSize.min,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Stack(
          children: [
            ClipRRect(
              borderRadius: BorderRadius.circular(20),
              child: sizedContainer(
                CachedNetworkImage(
                  imageUrl:
                      'https://www.propertyfinder.eg/blog/wp-content/uploads/2020/02/Malvern-College-Egypt1-875x323-1-800x295.jpg',
                  imageBuilder: (context, imageProvider) => Container(
                    decoration: BoxDecoration(
                      image: DecorationImage(
                        image: imageProvider,
                        fit: BoxFit.cover,
                      ),
                    ),
                  ),
                  placeholder: (context, url) =>
                      const CircularProgressIndicator(
                    color: Colors.blue,
                  ),
                  errorWidget: (context, url, error) =>
                      const Icon(Icons.error),
                ),
              ),
            ),
            Positioned(
              top: 10,
              right: 10,
              child: IconButton(
                icon: const Icon(
                  Icons.favorite_border,
                  color: Colors.white,
                ),
                onPressed: () {},
              ),
            ),
            const Positioned(
              bottom: 10,
              left: 10,
              child: Padding(
                padding: EdgeInsets.all(8.0),
                child: Text(
                  "Title",
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 18,
                  ),
                ),
              ),
            ),
          ],
        ),
      ],
    ),
  ),
);

enter image description here

Solution

  • Try below code I have used flutter_staggered_grid_view package GridView.custom widget

    GridView.custom(
                    shrinkWrap: true,
                    padding:
                        EdgeInsets.symmetric(horizontal: 2, vertical: 1),
                    gridDelegate: SliverStairedGridDelegate(
                      mainAxisSpacing: 2.h,
                      crossAxisSpacing: 1.w,
                      pattern: [
                        StairedGridTile(.55, .75),
                        StairedGridTile(.45, .6),
                      ],
                    ),
                    childrenDelegate: SliverChildBuilderDelegate(
                      childCount: 10,
                      (context, index) {
                        return Container(
                          margin: EdgeInsets.symmetric(horizontal: 5),
                          child: Stack(
                            children: [
                              ClipRRect(
                                borderRadius: BorderRadius.circular(20),
                                child: FadeInImage(
                                  image: NetworkImage(
                                      'https://www.propertyfinder.eg/blog/wp-content/uploads/2020/02/Malvern-College-Egypt1-875x323-1-800x295.jpg'),
                                  fit: BoxFit.cover,
                                  width: double.maxFinite,
                                  height: double.maxFinite,
                                  placeholder: NetworkImage(
                                      'https://www.propertyfinder.eg/blog/wp-content/uploads/2020/02/Malvern-College-Egypt1-875x323-1-800x295.jpg'),
                                  imageErrorBuilder:
                                      (context, error, stackTrace) {
                                    return Container();
                                  },
                                ),
                              ),
                              Container(
                                  alignment: Alignment.topRight,
                                  padding: EdgeInsets.symmetric(
                                      horizontal: 4, vertical: 5),
                                  child: Icon(
                                    Icons.favorite_border,
                                    color: Colors.white,
                                  )),
                              Container(
                                alignment: Alignment.bottomLeft,
                                padding: EdgeInsets.symmetric(
                                    horizontal: 4, vertical: 2),
                                child: Text(
                                  'Title',
                                  style: TextStyle(
                                    color: Colors.white,
                                    fontSize: 18,
                                  ),
                                ),
                              ),
                            ],
                          ),
                        );
                      },
                    ),
                  ),

    Result - image