ResponsiveRow.withColumns constructor

ResponsiveRow.withColumns({
  1. double? xxs = 1,
  2. double? xs,
  3. double? sm,
  4. double? md,
  5. double? lg,
  6. double? xl,
  7. double? xxl,
  8. dynamic children = const [],
  9. WrapCrossAlignment crossAxisAlignment = WrapCrossAlignment.start,
  10. double totalSegments = 12,
  11. double horizontalSpacing = 0,
  12. double runSpacing = 0,
  13. double? columnHeight,
  14. double? columnMaxHeight,
  15. double? columnMinHeight,
  16. Axis direction = Axis.horizontal,
  17. VerticalDirection verticalDirection = VerticalDirection.down,
  18. TextDirection textDirection = TextDirection.ltr,
  19. WrapAlignment alignment = WrapAlignment.start,
  20. WrapAlignment runAlignment = WrapAlignment.start,
})

Creates a ResponsiveRow with a specific number of columns in each ScreenTier and automatically wraps children into ResponsiveColumn widgets. If a child is already a ResponsiveColumn, it remains unchanged. If a child is not a Widget, this function converts it to a Text widget and then wraps it in a ResponsiveColumn.

Example usage:

ResponsiveRow.withColumns(
  xxs: 1,
  xs: 2,
  sm: 3,
  md: 4,
  lg: 4,
  xl: 3,
  xxl: 2,
  children: [
    Text('Column 1'),
    Text('Column 2'),
    Text('Column 3'),
  ],
)

The above example creates a responsive row with 1 column on extra-small screens (xxs), 2 columns on small screens (xs), 3 columns on medium screens (sm), 4 columns on large screens (md), 4 columns on extra-large screens (lg), 3 columns on extra-extra-large screens (xl), and 2 columns on extra-extra-extra-large screens (xxl).

Implementation

factory ResponsiveRow.withColumns({
  double? xxs = 1,
  double? xs,
  double? sm,
  double? md,
  double? lg,
  double? xl,
  double? xxl,
  dynamic children = const [],
  WrapCrossAlignment crossAxisAlignment = WrapCrossAlignment.start,
  double totalSegments = 12,
  double horizontalSpacing = 0,
  double runSpacing = 0,
  double? columnHeight,
  double? columnMaxHeight,
  double? columnMinHeight,
  Axis direction = Axis.horizontal,
  VerticalDirection verticalDirection = VerticalDirection.down,
  TextDirection textDirection = TextDirection.ltr,
  WrapAlignment alignment = WrapAlignment.start,
  WrapAlignment runAlignment = WrapAlignment.start,
}) {
  List<ResponsiveColumn> newChildren = [];

  children = forceList(children);

  for (var i = 0; i < children.length; i++) {
    if (children[i] is ResponsiveColumn) {
      newChildren.add(children[i]);
      continue;
    }

    if (children[i] is Nil) {
      continue;
    }

    if ((children[i] is Widget) == false) {
      children[i] = forceWidget(children[i]);
    }

    if (children[i] is Widget) {
      newChildren.add(
        ResponsiveColumn(
          height: columnHeight,
          xxs: getColumnSizeBySegments(totalSegments, [xxs, xs, sm, md, lg, xl, xxl]),
          xs: getColumnSizeBySegments(totalSegments, [xs, xxs, sm, md, lg, xl, xxl]),
          sm: getColumnSizeBySegments(totalSegments, [sm, xs, xxs, md, lg, xl, xxl]),
          md: getColumnSizeBySegments(totalSegments, [md, sm, xs, xxs, lg, xl, xxl]),
          lg: getColumnSizeBySegments(totalSegments, [lg, md, sm, xs, xxs, xl, xxl]),
          xl: getColumnSizeBySegments(totalSegments, [xl, lg, md, sm, xs, xxs, xxl]),
          xxl: getColumnSizeBySegments(totalSegments, [xxl, xl, lg, md, sm, xs, xxs]),
          child: children[i],
        ),
      );
    }
  }

  return ResponsiveRow(
    children: newChildren,
    crossAxisAlignment: crossAxisAlignment,
    totalSegments: totalSegments,
    horizontalSpacing: horizontalSpacing,
    runSpacing: runSpacing,
    columnHeight: columnHeight,
    columnMaxHeight: columnMaxHeight,
    columnMinHeight: columnMinHeight,
    direction: direction,
    verticalDirection: verticalDirection,
    textDirection: textDirection,
    alignment: alignment,
    runAlignment: runAlignment,
  );
}