masonry_grid 0.2.0+2

Flutter Masonry Grid layout to create masonry, staggered items layout.

masonry_grid

Flutter Masonry Grid layout to create masonry, staggered items layout.

Getting Started

Install the package, add the dependencies to your pubspec.yaml

dependencies:
  // ... the rest of your dependencies
  masonry_grid: [version]

Usage

Import and use the widget to create your grid

import 'package:masonry_grid/masonry_grid.dart';

class YourPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: CustomScrollView(
      slivers: [
        SliverToBoxAdapter(
            child: MasonryGrid(
                column: 2,
                mainAxisSpacing: 10,
                crossAxisSpacing: 10,
                crossAxisAlignment: CrossAxisAlignment.stretch,
                staggered: false,
                children: List.generate(
                  10,
                  (i) =>
                      SizedBox(width: 100, height: 100, child: Text("hello")),
                )))
      ],
    ));
  }
}

Properties

int column  // number of column rendered
double mainAxisSpacing  // amount of vertical spacing between items
double crossAxisSpacing // amount of horizontal spacing between columns
CrossAxisAlignment crossAxisAlignment // cross axis alignment inside of each column
bool staggered  //  stagger layout to override children order to paint items on the lowest column first
List<Widget> children // children widgets that's going to be rendered.