Skip to main content
The Stac SliverGrid allows you to build a Flutter SliverGrid widget using JSON. It displays its children in a two-dimensional scrollable grid within a sliver context. To learn more about Flutter’s SliverGrid, refer to the official documentation.

​
Properties

PropertyTypeDescription
crossAxisCountint?Number of children in the cross axis (e.g. number of columns).
mainAxisSpacingdouble?Space between children in the main axis. Defaults to 0.0.
crossAxisSpacingdouble?Space between children in the cross axis. Defaults to 0.0.
childAspectRatiodouble?Ratio of the cross-axis to the main-axis extent of each child. Defaults to 1.0.
mainAxisExtentdouble?Fixed extent of each child in the main axis.
addAutomaticKeepAlivesbool?Whether to add automatic keep-alives for children. Defaults to true.
addRepaintBoundariesbool?Whether to wrap children in repaint boundaries. Defaults to true.
addSemanticIndexesbool?Whether to add semantic indexes for children. Defaults to true.
childrenList<Map<String, dynamic>>?The list of widgets rendered as grid items.
⚠️ Note sliverGrid must be placed inside the slivers property of a customScrollView. Each child of a sliverGrid must be a box widget (for example container, card, column, etc.), not another sliver.

​
Example

const StacSliverGrid(
  crossAxisCount: 2,
  mainAxisSpacing: 16,
  crossAxisSpacing: 16,
  childAspectRatio: 1,
  children: [
    StacContainer(
      color: StacColor('#4CAF50'),
      child: StacCenter(
        child: StacText(
          data: 'Grid Item 1',
          style: StacTextStyle(
            color: StacColor('#FFFFFF'),
            fontWeight: StacFontWeight.bold,
          ),
        ),
      ),
    ),
    StacContainer(
      color: StacColor('#4CAF50'),
      child: StacCenter(
        child: StacText(
          data: 'Grid Item 2',
          style: StacTextStyle(
            color: StacColor('#FFFFFF'),
            fontWeight: StacFontWeight.bold,
          ),
        ),
      ),
    ),
    StacContainer(
      color: StacColor('#4CAF50'),
      child: StacCenter(
        child: StacText(
          data: 'Grid Item 3',
          style: StacTextStyle(
            color: StacColor('#FFFFFF'),
            fontWeight: StacFontWeight.bold,
          ),
        ),
      ),
    ),
    StacContainer(
      color: StacColor('#4CAF50'),
      child: StacCenter(
        child: StacText(
          data: 'Grid Item 4',
          style: StacTextStyle(
            color: StacColor('#FFFFFF'),
            fontWeight: StacFontWeight.bold,
          ),
        ),
      ),
    ),
  ],
)