columns property

  1. @override
LayoutValue<int> columns
final

Content is placed in the areas of the screen that contain columns. Column width is defined using percentages, rather than fixed values, to allow content to flexibly adapt to any screen size. The number of columns displayed in the grid is determined by the breakpoint range (a range of predetermined screen sizes) at which a screen is viewed, whether it’s a breakpoint for mobile, tablet, or another size.

Implementation

@override
final LayoutValue<int> columns = LayoutValue.builder(
  (layout) {
    final width = layout.width;
    if (width <= 599) {
      return 4;
    } else if (width <= 839) {
      return 8;
    } else {
      return 12;
    }
  },
);