A package that provides two dynamic grid layouts: wrap and staggered.
This package provides support for multi sized tiles and different layouts. Currently the layouts that are implemented in this package are Stagger and Wrap.
DynamicGridView is a subclass of GridView and gives access to the SliverGridDelegates that are already implemented in the Flutter Framework. Some SliverGridDelegates are SliverGridDelegateWithMaxCrossAxisExtent and SliverGridDelegateWithFixedCrossAxisCount. This layout can be used with DynamicGridView.stagger.
The Wrap layout is able to do runs of different widgets and adapt accordingly with the sizes of the children. It can leave spacing with mainAxisSpacing and crossAxisSpacing.
Having different sizes in only one of the axis is possible by changing the values of childCrossAxisExtent and childMainAxisExtent. These values by default are set to have loose constraints, but by giving childCrossAxisExtent a specific value like 100 pixels, it will make all of the children 100 pixels in the main axis. This layout can be used with DynamicGridView.wrap and with DynamicGridView.builder and SliverGridDelegateWithWrapping as the delegate.
Run this command with Flutter:
$ flutter pub add dynamic_layouts
Now in your Dart code, you can use:
import 'package:dynamic_layouts/dynamic_layouts.dart';
Use DynamicGridViews to access these layouts. DynamicGridView has some constructors that use SliverChildListDelegate like .wrap and .stagger. For a more efficient option that uses SliverChildBuilderDelegate use .builder, it works the same as GridView.builder.
The following are simple examples of how to use DynamicGridView.wrap.
The following example uses DynamicGridView.builder with SliverGridDelegateWithWrapping.
By using childCrossAxisExtent and childMainAxisExtent the main axis can be limited to have a specific size and the other can be set to loose constraints.
The Stagger layout can be used with the constructor DynamicGridView.stagger and still use the delegates from GridView like SliverGridDelegateWithMaxCrossAxisExtent and SliverGridDelegateWithFixedCrossAxisCount.
The staggered layout is similar to Android‘s StaggeredGridLayoutManager, while the wrap layout emulates iOS’ UICollectionView.
The inner functionality of this package is exposed, meaning that other dynamic layouts can be created on top of it and added to the collection. If you want to contribute to this package, you can open a pull request in Flutter Packages and add the tag “p: dynamic_layouts”.