toMaterialGrid static method

Builder toMaterialGrid({
  1. List<Widget> thisWidgets = const <Widget>[],
  2. List<Breakpoint> breakpoints = const <Breakpoint>[Breakpoints.small, Breakpoints.medium, Breakpoints.large],
  3. double margin = 8,
  4. int itemColumns = 1,
  5. required BuildContext context,
})

Public helper method to be used for creating a staggered grid following m3 specs from a list of Widgets

Implementation

static Builder toMaterialGrid({
  List<Widget> thisWidgets = const <Widget>[],
  List<Breakpoint> breakpoints = const <Breakpoint>[
    Breakpoints.small,
    Breakpoints.medium,
    Breakpoints.large,
  ],
  double margin = 8,
  int itemColumns = 1,
  required BuildContext context,
}) {
  return Builder(builder: (BuildContext context) {
    Breakpoint? currentBreakpoint;
    for (final Breakpoint breakpoint in breakpoints) {
      if (breakpoint.isActive(context)) {
        currentBreakpoint = breakpoint;
      }
    }
    double? thisMargin = margin;

    if (currentBreakpoint == Breakpoints.small) {
      if (thisMargin < kMaterialCompactMinMargin) {
        thisMargin = kMaterialCompactMinMargin;
      }
    } else if (currentBreakpoint == Breakpoints.medium) {
      if (thisMargin < kMaterialMediumMinMargin) {
        thisMargin = kMaterialMediumMinMargin;
      }
    } else if (currentBreakpoint == Breakpoints.large) {
      if (thisMargin < kMaterialExpandedMinMargin) {
        thisMargin = kMaterialExpandedMinMargin;
      }
    }
    return CustomScrollView(
      primary: false,
      controller: ScrollController(),
      shrinkWrap: true,
      physics: const AlwaysScrollableScrollPhysics(),
      slivers: <Widget>[
        SliverToBoxAdapter(
          child: Padding(
            padding: EdgeInsets.all(thisMargin),
            child: _BrickLayout(
              columns: itemColumns,
              columnSpacing: kMaterialGutterValue,
              itemPadding:
                  const EdgeInsets.only(bottom: kMaterialGutterValue),
              children: thisWidgets,
            ),
          ),
        ),
      ],
    );
  });
}