fix(grid): apply ResponsiveRow spacing to both axes

ManuelRomeroA · ManuelRomeroA · commit efa102dac3a5 · 2026-04-24T16:20:27.000-04:00
deprecate(table): mark ThemedTable and related symbols as @deprecated in favor of ThemedTable2 chore(release): bump version to 7.5.28
diff --git a/.claude/plugin.json b/.claude/plugin.json
@@ -1,7 +1,7 @@
 {
   "name": "layrz-theme",
   "description": "Claude Code skills for layrz-theme Flutter widget library",
-  "version": "7.5.27",
+  "version": "7.5.28",
   "author": {
     "name": "Golden M, Inc.",
     "url": "https://github.com/goldenm-software"
diff --git a/.claude/skills/responsive-row/SKILL.md b/.claude/skills/responsive-row/SKILL.md
@@ -37,7 +37,7 @@ ResponsiveRow(
 - Renders as `SizedBox(width: double.infinity, child: Wrap(...))` — always full parent width.
 - `children` only accepts `List<ResponsiveCol>` — use `ResponsiveCol(child: Divider())` for dividers.
 - `builder` takes `ResponsiveCol Function(int)` — not `Widget Function(BuildContext, int)`.
-- `spacing` is horizontal gap between columns in pixels (default `0`).
+- `spacing` applies to **both axes**: horizontal gap between columns in the same row, and vertical gap between rows when columns wrap (default `0`).
 
 ---
 
diff --git a/.claude/skills/responsive-row/references/api.md b/.claude/skills/responsive-row/references/api.md
@@ -35,7 +35,7 @@ ResponsiveRow.builder({
 | `children` | `List<ResponsiveCol>` | required | Only `ResponsiveCol`. For dividers: `ResponsiveCol(child: Divider())` |
 | `mainAxisAlignment` | `WrapAlignment` | `.start` | Horizontal alignment of columns |
 | `crossAxisAlignment` | `WrapCrossAlignment` | `.start` | Vertical alignment of columns |
-| `spacing` | `double` | `0` | Horizontal gap between columns in pixels |
+| `spacing` | `double` | `0` | Gap between columns (horizontal) and between wrapped rows (vertical) in pixels |
 
 Renders as `SizedBox(width: double.infinity, child: Wrap(...))` — always full parent width.
 
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,10 @@
 # Changelog
 
+## 7.5.28
+
+- Deprecated `ThemedTable`, `ThemedColumn`, `ThemedTableAction`, `ThemedTableAvatar`, and related typedefs (`ValueBuilder`, `WidgetBuilder`, `CellTap`, `CellColor`, `ValueBuilder2`, `kThemedTableCanTrue`). Use `ThemedTable2` instead. All symbols will be removed in version 8.0.0.
+- Fixed `ResponsiveRow` spacing on vertical layouts: `spacing` now applies to both horizontal gaps between columns and vertical gaps between wrapped rows (`Wrap.runSpacing`). Previously, `spacing` had no effect when columns stacked vertically on mobile (xs: .col12).
+
 ## 7.5.27
 
 - Fixed `ThemedColorPicker` double `#` prefix bug: `.hex` extension already includes `#`, so the controller text was displaying `##RRGGBB` instead of `#RRGGBB`.
diff --git a/lib/src/grid/src/row.dart b/lib/src/grid/src/row.dart
@@ -66,6 +66,7 @@ class ResponsiveRow extends StatelessWidget {
       width: double.infinity,
       child: Wrap(
         spacing: spacing,
+        runSpacing: spacing,
         direction: Axis.horizontal,
         alignment: mainAxisAlignment,
         crossAxisAlignment: crossAxisAlignment,
diff --git a/lib/src/table/src/action.dart b/lib/src/table/src/action.dart
@@ -1,5 +1,6 @@
 part of '../table.dart';
 
+@Deprecated('Use ThemedTable2 instead. ThemedTable will be removed in version 8.0.0.')
 class ThemedTableAction<T> {
   /// The label of the action.
   final Widget? label;
diff --git a/lib/src/table/src/avatar.dart b/lib/src/table/src/avatar.dart
@@ -1,5 +1,6 @@
 part of '../table.dart';
 
+@Deprecated('Use ThemedTable2 instead. ThemedTable will be removed in version 8.0.0.')
 class ThemedTableAvatar {
   /// Represents the name, label or identifier of the avatar.
   final String? label;
diff --git a/lib/src/table/src/column.dart b/lib/src/table/src/column.dart
@@ -1,20 +1,26 @@
 part of '../table.dart';
 
 /// [ValueBuilder<T>] defines the value to display in a column.
+@Deprecated('Use ThemedTable2 instead. ThemedTable will be removed in version 8.0.0.')
 typedef ValueBuilder<T> = String Function(BuildContext context, T item);
 
 /// [WidgetBuilder<T>] defines the widget to display in a column.
+@Deprecated('Use ThemedTable2 instead. ThemedTable will be removed in version 8.0.0.')
 typedef WidgetBuilder<T> = Widget Function(BuildContext context, T item);
 
 /// [CellTap<T>] defines the action when the cell is tapped.
+@Deprecated('Use ThemedTable2 instead. ThemedTable will be removed in version 8.0.0.')
 typedef CellTap<T> = void Function(T item);
 
 /// [CellColor<T>] defines the color of the cell.
+@Deprecated('Use ThemedTable2 instead. ThemedTable will be removed in version 8.0.0.')
 typedef CellColor<T> = Color? Function(T item);
 
 /// [ValueBuilder2<T>] defines the value to display in a column.
+@Deprecated('Use ThemedTable2 instead. ThemedTable will be removed in version 8.0.0.')
 typedef ValueBuilder2<T> = String Function(T item);
 
+@Deprecated('Use ThemedTable2 instead. ThemedTable will be removed in version 8.0.0.')
 class ThemedColumn<T> {
   /// The label of the column.
   final Widget? label;
diff --git a/lib/src/table/src/table.dart b/lib/src/table/src/table.dart
@@ -1,7 +1,9 @@
 part of '../table.dart';
 
+@Deprecated('Use ThemedTable2 instead. ThemedTable will be removed in version 8.0.0.')
 bool kThemedTableCanTrue(BuildContext context, item) => true;
 
+@Deprecated('Use ThemedTable2 instead. ThemedTable will be removed in version 8.0.0.')
 class ThemedTable<T> extends StatefulWidget {
   /// Represents the columns or headers of the table. This columns only will be displayed in desktop size.
   ///
diff --git a/pubspec.yaml b/pubspec.yaml
@@ -1,6 +1,6 @@
 name: layrz_theme
 description: Layrz standard styling library for Flutter. Widget library following the Material Design 3 guidelines, with a focus on reliavility and functionality.
-version: "7.5.27"
+version: "7.5.28"
 homepage: https://theme.layrz.com
 repository: https://github.com/goldenm-software/layrz_theme
 
diff --git a/test/widgets/responsive_row_test.dart b/test/widgets/responsive_row_test.dart
@@ -112,6 +112,43 @@ void main() {
       expect(wrap.spacing, 0); // Default spacing should be 0
     });
 
+    testWidgets('ResponsiveRow spacing applies to Wrap.runSpacing', (WidgetTester tester) async {
+      await tester.pumpWidget(
+        MaterialApp(
+          home: Scaffold(
+            body: ResponsiveRow(
+              spacing: 20,
+              children: [
+                ResponsiveCol(xs: .col6, child: Container(height: 100)),
+                ResponsiveCol(xs: .col6, child: Container(height: 100)),
+              ],
+            ),
+          ),
+        ),
+      );
+
+      final wrap = find.byType(Wrap).evaluate().first.widget as Wrap;
+      expect(wrap.runSpacing, 20);
+    });
+
+    testWidgets('ResponsiveRow default spacing gives runSpacing of 0', (WidgetTester tester) async {
+      await tester.pumpWidget(
+        MaterialApp(
+          home: Scaffold(
+            body: ResponsiveRow(
+              children: [
+                ResponsiveCol(xs: .col6, child: Container(height: 100)),
+                ResponsiveCol(xs: .col6, child: Container(height: 100)),
+              ],
+            ),
+          ),
+        ),
+      );
+
+      final wrap = find.byType(Wrap).evaluate().first.widget as Wrap;
+      expect(wrap.runSpacing, 0);
+    });
+
     testWidgets('ResponsiveRow respects mainAxisAlignment', (WidgetTester tester) async {
       await tester.pumpWidget(
         MaterialApp(

Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "layrz-theme",`
`3`	`3`	`"description": "Claude Code skills for layrz-theme Flutter widget library",`
`4`		`- "version": "7.5.27",`
	`4`	`+ "version": "7.5.28",`
`5`	`5`	`"author": {`
`6`	`6`	`"name": "Golden M, Inc.",`
`7`	`7`	`"url": "https://github.com/goldenm-software"`