A Flutter Masonry Grid Layout. Simple to Use and Easy to Understand

Getting started

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

  flutter_masonry_view: <latest_version>

In your library add the following import:

import 'package:flutter_masonry_view/flutter_masonry_view.dart';

For help getting started with Flutter, view the online documentation.


It works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall. You've probably seen it in use all over the Internet.


Masonry example

class Home extends StatelessWidget {
  Home({Key? key}) : super(key: key);

  final _items = [

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter Masonry View'),
      body: SingleChildScrollView(
        child: MasonryView(
          listOfItem: _items,
          numberOfColumn: 2,
          itemBuilder: (item) {
            return Image.asset(item);