mosaic_grid
Lazy Flutter grids whose tiles size themselves: aligned rows that grow to their tallest card, masonry columns, multi-column tiles, paging and jump-to-item.
// Overview
Lazy Flutter grids whose tiles choose their own height: rows aligned to the tallest card, masonry, tiles spanning several columns, paging and jump-to-item — in one widget, with no dependencies beyond Flutter.
// The challenge
GridView gives every tile the same height: you pick a childAspectRatio or a mainAxisExtent, and whatever does not fit is cut off. Real cards do not have a fixed height — a longer name, a promotion badge or a larger system font, and yesterday's ratio overflows today.
// Engineering decisions
The tile picks its height
- Choice
- each tile gets its column width and decides its own height; each row is as tall as its tallest tile.
- Why
- real cards have no fixed height — yesterday's ratio overflows today.
- Trade-off
- the layout has to measure every tile before placing it.
// The solution
MosaicGrid gives each tile its column width and lets it choose its height. In rows, every row is as tall as its tallest tile; in masonry, every tile drops into the shortest column. Responsive columns resolved from the real available space (it works in split panes), exact jumpToIndex even for items never on screen, onEndReached for paging, and positions recorded exactly so scrolling back never jumps.
My role
Author and maintainer — layout, controller, 50 tests, example app with a playground, CI and release pipeline, published on pub.dev under the verified publisher devfrs.com.
Tech stack
// Screens
// Outcome and evidence
Published with a perfect pub.dev score (160/160), WASM-ready, for Android, iOS, web, Windows, macOS and Linux.
- layout and paging tests
- 50