flutter_wall_layout - Layout child having different shape into a vertical or horizontal list

This library provides a unique widget, WallLayout, rendering into a list children having different shapes.

There is two main classes: WallLayout and Stone.

  • A wall is composed by a set of stones, arranged in a certain way.
  • A stone is a component defining its shape by a width and a height.

Wall Layout Widget

This component has been inspired by the ListView widget, in which you can choose scroll direction and the way. Added to that, you can also define how many rows or column have the wall, if you want to create a responsive design.

  stones: _buildStonesList(),
  layersCount: 3,
  scrollDirection: Axis.vertical,
  reverse: false,

Wall Layout Widget Properties

ParameterDescriptionDefault value
stonesList of Stone widgets, representing wall layout's children.-
layersCountDefine the number of layers the wall have. Must be higher or equal to 2. When direction is Axis.vertical, it defines the number of columns the wall has. When direction is Axis.horizontal, it defines the number of rows.-
wallBuilderDefine how the wall is built: where each stone is positioned within the wall.The wall builder is allowed to use less stones than provided, and can create new stones (see ./example for more details).WallBuilder.standard()
stonePaddingPadding between stones.16.0
scrollControllerSame as ListView.scrollController: "control the position to which this scroll view is scrolled".-
physicsSame as ListView.physics: "How the scroll view should respond to user input".-
restorationIdSame as ListView.restorationId: used "to save and restore the scroll offset of the scrollable".-
dragStartBehaviorSame as ListView.dragStartBehavior: "Determines the way that drag start behavior is handled".DragStartBehavior.start
clipBehaviorSame as ListView.clipBehavior: "ways to clip a widget's content".Clip.hardEdge
primarySame as ListView.primary: "Whether this is the primary scroll view associated with the parent PrimaryScrollController"false
scrollDirectionSame as ListView.scrollDirection: "axis along which the scroll view scrolls".Axis.vertical
reverseSame as ListView.reverse property: "whether the scroll view scrolls in the reading direction".false

Stone Widget

A Stone Widget is a widget proxy defining stone's size (width and height). It's rendered object is optimized thanks to it's id property.

    id: 7,
    width: 2,
    height: 2,
    child: Container(
      color: Colors.red,
      child: Center(child: Text("2x2")),

Stone Widget Properties

ParameterDescriptionDefault value
widthStone width (relative to the number of wall divisions). Must be higher or equal to 1.-
heightStone height (relative to the number of wall divisions). Must be higher or equal to 1.-
idProxy layout identifier: must be unique.-
childWidget to render, where its size will be constrained by the stone width and height.-