Masonry Gallery 📸

A lightweight and flexible Flutter widget to display images in a responsive masonry layout.
It intelligently distributes images across columns while providing seamless support for both network images and local assets.

✨ Features

🚀 Mixed Image Sources: Support for both http/https URLs and local asset paths.
📱 Responsive Grid: Automatically balances images into a masonry-style layout.
🎨 Highly Customizable: Control column count, spacing, and border radius with ease.
⏳ Smart Loading: Built-in CircularProgressIndicator for network image loading states.
🛡️ Error Handling: Graceful "Broken Image" placeholder for invalid URLs or missing assets.
🖱️ Interactive: Integrated onTap callback to handle clicks for each image.

📱 Preview

Column Layout

📦 Installation

In the pubspec.yaml of your flutter project, add the following dependency:

dependencies:
  masonry_gallery: ^1.0.0

🚀 Usage

import 'package:flutter/material.dart';
import 'package:masonry_gallery/masonry_gallery.dart';

MasonryGallery(
 images: [
    "https://picsum.photos/300/500",
   "https://picsum.photos/300/400",
   "https://picsum.photos/300/600",
   "https://picsum.photos/300/350",
   "https://picsum.photos/300/310",
   "https://picsum.photos/300/220",
 ],
 columnCount: 2,
 spacing: 4.0,
 borderRadius: BorderRadius.circular(16),
 onTap: (imagePath) {
   print("User clicked on: $imagePath");
 },
);

🛠️ Parameters :

Property	Data type	Default	Description
images	`List<String>`	@required	List of image URLs or local asset paths.
columnCount	`int`	2	Number of columns in the masonry grid.
spacing	`double`	4.0	Gap between the images.
borderRadius	`BorderRadius`	BorderRadius.circular(12)	Border radius applied to each image.
onTap	`Function(String)`	null	Returns the image path/URL when tapped.

🐞 Issues & Feedback :

Something went wrong? Or have a feature request?

Feel free to create a new issue

Created & Maintained By

Muhammad Rifatul Islam