responsive_layout_grid 1.0.1

The ResponsiveLayoutGrid provides a convenient responsive layout structure for elements within the body region.

ResponsiveLayoutGrid

Creates a Responsive Layout Grid as defined in the Material design guidelines

The ResponsiveLayoutGrid is made up of columns and gutters, providing a convenient layout structure for elements within the body region.

As the width of the body region grows or shrinks, the number of grid columns and column widths changes in response.

The ResponsiveLayoutGrid:

• Has a [minimumColumnWidth]
• Can have a [maxNumberOfColumns]
• Has a [columnGutterWidth]
• Has a [rowGutterHeight]
• A ResponsiveLayoutFactory that determines the position of the cells.

All these can be set in the ResponsiveLayoutGrid constructor.

The ResponsiveLayoutGrid has children, named cells.

• Cells align with the column grid to create a logical and consistent layout experience across screen sizes and orientations.
• Cells are Widgets
• Cells can span one or more columns
• Cells are separated with gutters (separation space)

It is recommended to wrap a ResponsiveLayoutGrid in a:

• [Padding] widget to add outer margins
• [SingleChildScrollView] widget if the cells do not fit and vertical scrolling is needed.

ResponsiveLayoutCell

You can wrap your cell Widgets with a ResponsiveLayoutCell when you are using the [DefaultLayoutFactory], so that you can provide the following information of the cell Widget (the [child]):

• CellPosition of the cell Widget.
• ColumnSpan of the cell Widget.

CellPosition

A ResponsiveLayoutCell has a CellPosition. There are 2 types:

• nextColumn: The cell is to be positioned on the next available column. This could be on the next row if there aren't enough empty columns on the current row.
• nextRow: The cell is to be positioned on a new row. You can set the CellAlignment for every new row.

CellAlignment

The CellAlignment can be set when a CellPosition.nextRow is used in a ResponsiveLayoutCell. It can be one of the following values:

• left: Align all cells on the left side of the row
• right: Align all cells on the right side of the row
• center: Try to align all cells in the middle of the row by increasing or decreasing the ColumnSpan of one of the cells if needed.
• justify: Try to fill the row from left to right by increasing or decreasing the ColumnSpans of the cells if needed.

ColumnSpan

A ColumnSpan tells the [DefaultLayoutFactory] how many columns a ResponsiveLayoutCell may span.

There is a [min], [preferred] and [max] value. The [DefaultLayoutFactory] will try to use these values, but may also decide to use different values e.g.:

• When the number of available columns exceed [min] or [max]
• When the [CellAlignment.center] or [CellAlignment.justify] are used. In these cases it is good practice to have some distance between the [min], [preferred] and [max] values, so that the [DefaultLayoutFactory] has some flexibility to optimize the layout.

ResponsiveLayoutFactory

The ResponsiveLayoutFactory is responsible for creating a [Layout]. It orders the children into a Layout with a given number of columns.

The ResponsiveLayoutGrid uses a [DefaultLayoutFactory] by default, but you could create your own ResponsiveLayoutFactory if you need to do something outside the box.

Examples

See the live web demo including source code