gutter property

Gutters are the spaces between columns. They help separate content. Gutter widths are fixed values at each breakpoint range. To better adapt to the screen, gutter width can change at different breakpoints. Wider gutters are more appropriate for larger screens, as they create more whitespace between columns.

Implementation

@override
LayoutValue<double> get gutter {
  const double _spacer = 16;
  return BreakpointValue<double>.all(
    xs: _spacer * 1,
    sm: _spacer * 1.25,
    md: _spacer * 1.5,
    lg: _spacer * 2,
    xl: _spacer * 3,
  );
}