FlutstrapGrid.responsive constructor

FlutstrapGrid.responsive({ required List<Widget> children, int xsColumns = 1, int? smColumns, int? mdColumns, int? lgColumns, int? xlColumns, int? xxlColumns, double? gap, bool fluid = false, EdgeInsetsGeometry? padding, EdgeInsetsGeometry? margin, })

✅ FIXED: Create a responsive grid that properly wraps columns

Implementation

factory FlutstrapGrid.responsive({
  required List<Widget> children,
  int xsColumns = 1,
  int? smColumns,
  int? mdColumns,
  int? lgColumns,
  int? xlColumns,
  int? xxlColumns,
  double? gap,
  bool fluid = false,
  EdgeInsetsGeometry? padding,
  EdgeInsetsGeometry? margin,
}) {
  assert(children.isNotEmpty, 'Children list cannot be empty');
  assert(xsColumns >= 1 && xsColumns <= 12,
      'XS columns must be between 1 and 12');

  return FlutstrapGrid(
    children: [
      LayoutBuilder(
        builder: (context, constraints) {
          final containerWidth = constraints.maxWidth;

          // Calculate how many columns we should show based on screen size
          final responsiveColumns = _getResponsiveColumns(
            containerWidth,
            xsColumns,
            smColumns,
            mdColumns,
            lgColumns,
            xlColumns,
            xxlColumns,
          );

          // Distribute children into rows with the calculated column count
          final rows =
              FSGridUtils.distributeItems(children, responsiveColumns);

          return Column(
            children: rows.asMap().entries.map((entry) {
              final rowIndex = entry.key;
              final rowChildren = entry.value;

              return Padding(
                padding: rowIndex > 0
                    ? EdgeInsets.only(top: gap ?? defaultColumnGap)
                    : EdgeInsets.zero,
                child: FlutstrapRow(
                  children: rowChildren.map((child) {
                    return Expanded(
                      flex: 12 ~/
                          responsiveColumns, // Each item gets equal flex based on columns
                      child: child,
                    );
                  }).toList(),
                  gap: gap ?? defaultColumnGap,
                ),
              );
            }).toList(),
          );
        },
      ),
    ],
    fluid: fluid,
    padding: padding,
    margin: margin,
  );
}