Pinterest Grid (Staggered Grid) In Flutter

In this article, We will explore how to implement a Pinterest-like staggered grid in Flutter

Before proceeding, please consider subscribing to our YOUTUBE CHANNEL

It gives us a lot of motivation to produce high-quality content for you guys.

if you are interested in watching the video tutorial, Check out below.

Let's start by adding the grid package required.

flutter pub add flutter_staggered_grid_view

Once the package is added, we need a tile to populate the grid.

Create an ImageTile which shows a network image and setting height dynamically using Future

class ImageTile extends StatelessWidget {

  const ImageTile({
    Key? key,
    required this.index,
    required this.height,
  }) : super(key: key);

  final int index;
  final int height;

  Future<ui.Image> _getImage() {
    Completer<ui.Image> completer = Completer<ui.Image>();
    NetworkImage('https://source.unsplash.com/random/300x$height?sig=$index')
        .resolve(const ImageConfiguration())
        .addListener(
      ImageStreamListener((ImageInfo info, bool _) {
        completer.complete(info.image);
      }),
    );
    return completer.future;
  }

  @override
  Widget build(BuildContext context) {
    return Container(
        clipBehavior: Clip.antiAlias,
        decoration:  BoxDecoration(
            borderRadius: BorderRadius.circular(15) // Adjust the radius as needed
        ),
        child: FutureBuilder<ui.Image>(
          future: _getImage(),
          builder: (BuildContext context, AsyncSnapshot<ui.Image> snapshot) {
            if (snapshot.hasData) {
              ui.Image? image = snapshot.data;
              return
                RawImage(image: image,
                  width: image!.width.toDouble(),
                  height: image!.height.toDouble() ,
                  fit: BoxFit.cover,
                );
            } else {
              return const Text('Loading Image...');
            }
          },
        )
    );
  }
}

Once the ImageTile is created, we’ll use this inside the MasonryGridView.

MasonryGridView.count(
          crossAxisCount: crossAxisCount,
          mainAxisSpacing: 4,
          crossAxisSpacing: 4,
          itemBuilder: (context, index) {
            final height = extents[index] * 100;
            return ImageTile(
              index: index,
              height: height,
            );
          },
          itemCount: extents.length,
        )

Below is the complete code

class PinterestGrid extends StatefulWidget {
  const PinterestGrid({
    Key? key,
  }) : super(key: key);

  @override
  State<PinterestGrid> createState() => _PinterestGridState();
}

class _PinterestGridState extends State<PinterestGrid> {
  final rnd = Random();
  late List<int> extents;
  int crossAxisCount = 2;

  @override
  void initState() {
    super.initState();
    extents = List<int>.generate(100, (int index) => rnd.nextInt(5) + 1);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: MasonryGridView.count(
          crossAxisCount: crossAxisCount,
          mainAxisSpacing: 4,
          crossAxisSpacing: 4,
          itemBuilder: (context, index) {
            final height = extents[index] * 100;
            return ImageTile(
              index: index,
              height: height,
            );
          },
          itemCount: extents.length,
        ),
      ),
    );
  }
}

Thats it. You should be able to see the Grid like below.

GitHub - Mobile-Apps-Academy/PinterestGridFlutter

Once again Thanks for stopping by.
Do check out our YOUTUBE CHANNEL

Mobile Apps Academy

Social Handles

Instagram : https://www.instagram.com/mobileappsacademy/

Twitter : https://twitter.com/MobileAppsAcdmy

LinkedIn : https://www.linkedin.com/company/mobile-apps-academy/