Pinterest Grid (Staggered Grid) In Flutter

Mobile Apps Academy
3 min readFeb 19, 2024

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.

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

Social Handles

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

Twitter : https://twitter.com/MobileAppsAcdmy

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

--

--

Mobile Apps Academy

Welcome to Mobile Apps Academy, your go-to channel for all things mobile app development!