Adjust README, Deprecate ThemedTable in favor of ThemedTable2 and Fix ResponsiveRow (#134)

ManuelRomeroA · web-flow · commit 40bbcd7a3080 · 2026-04-24T16:45:30.000-04:00
This pull request introduces a new minor version (7.5.28) with two main
themes: deprecating the original table widgets and improving the
`ResponsiveRow` widget's spacing behavior. The deprecated table
components are now marked for removal in 8.0.0 in favor of
`ThemedTable2`. Additionally, `ResponsiveRow`'s `spacing` parameter now
correctly applies to both horizontal and vertical gaps, improving layout
consistency on all screen sizes. Documentation, tests, and versioning
have been updated accordingly.

**Deprecation of old table widgets:**

- Marked `ThemedTable`, `ThemedColumn`, `ThemedTableAction`,
`ThemedTableAvatar`, and related typedefs (`ValueBuilder`,
`WidgetBuilder`, `CellTap`, `CellColor`, `ValueBuilder2`,
`kThemedTableCanTrue`) as deprecated in favor of `ThemedTable2`; all
will be removed in version 8.0.0.
[[1]](diffhunk://#diff-76e1e4c2df253b998f743d40e9e83f340b667d15bf65e0dc762bcb91b2053babR3)
[[2]](diffhunk://#diff-f8bc969dbbbf4ea76cf889384c13afa02de80a6c701c0da79bb878c904f50ffaR3)
[[3]](diffhunk://#diff-d78f95b051e7bc1a1bf6173fcf98c7800e789890bcfaebb333eed6a8b4383d14R4-R23)
[[4]](diffhunk://#diff-87dbc3e0b982b5898c5fce6aeadcdaad53e025f1a6a3a619e3ebee67fbb2851eR3-R6)
[[5]](diffhunk://#diff-06572a96a58dc510037d5efa622f9bec8519bc1beab13c9f251e97e657a9d4edR3-R7)

**ResponsiveRow spacing improvements:**

- Updated `ResponsiveRow` so that the `spacing` parameter now applies to
both horizontal gaps between columns and vertical gaps between wrapped
rows (`Wrap.runSpacing`), fixing previous layout issues on mobile.
[[1]](diffhunk://#diff-dc2c8074e560830427c3c11082212de1410196d0111badccf675e6bbd0c4d666R69)
[[2]](diffhunk://#diff-06572a96a58dc510037d5efa622f9bec8519bc1beab13c9f251e97e657a9d4edR3-R7)
- Improved documentation in `.claude/skills/responsive-row/SKILL.md` and
`.claude/skills/responsive-row/references/api.md` to clarify that
`spacing` affects both axes.
[[1]](diffhunk://#diff-dd4e3cb259d4a91e608630d731f9cdfbe8d58721b7070ed7268755fb11a82772L40-R40)
[[2]](diffhunk://#diff-748ebe5caabc660edbf6c5b167695543e359f33dcb1d6f8faa17906a240e4d7cL38-R38)
- Added new tests to verify that `ResponsiveRow` sets both `spacing` and
`runSpacing` as intended.

**Versioning and metadata:**

- Bumped package version to `7.5.28` in `pubspec.yaml` and
`.claude/plugin.json`.
[[1]](diffhunk://#diff-8b7e9df87668ffa6a04b32e1769a33434999e54ae081c52e5d943c541d4c0d25L3-R3)
[[2]](diffhunk://#diff-ede8c46127dd0d9410cfb5a8fdf1f55257345e782db1a2f2aa5bdb73d9845a3cL4-R4)
- Updated `CHANGELOG.md` to reflect these changes.

**Other:**

- Fixed the plugin marketplace add command in `README.md` to use the
correct repository name (`layrz_theme`).
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/README.md b/README.md
@@ -15,7 +15,7 @@ This repository includes a *Claude Code plugin* as part of our initiative to pro
 Add this repository as a Claude Code plugin marketplace, then install the plugin:
 
 ```bash
-/plugin marketplace add goldenm-software/layrz-theme
+/plugin marketplace add goldenm-software/layrz_theme
 ```
 
 Once the marketplace is added, install the plugin from the **Discover** tab in `/plugin`, or run:
diff --git a/example/lib/views/table/src/basic.dart b/example/lib/views/table/src/basic.dart
@@ -1,3 +1,4 @@
+// ignore_for_file: deprecated_member_use
 part of '../table.dart';
 
 class BasicTableView extends StatefulWidget {
diff --git a/example/pubspec.lock b/example/pubspec.lock
@@ -390,7 +390,7 @@ packages:
       path: ".."
       relative: true
     source: path
-    version: "7.5.27"
+    version: "7.5.28"
   leak_tracker:
     dependency: transitive
     description:
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/scaffolds/src/sidebar.dart b/lib/src/scaffolds/src/sidebar.dart
@@ -1,3 +1,4 @@
+// ignore_for_file: deprecated_member_use_from_same_package
 part of '../scaffolds.dart';
 
 class ThemedScaffoldView<T> extends StatefulWidget {
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,10 @@
+// ignore_for_file: deprecated_member_use_from_same_package
 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/lib/src/table2/src/column.dart b/lib/src/table2/src/column.dart
@@ -1,3 +1,4 @@
+// ignore_for_file: deprecated_member_use_from_same_package
 part of '../table2.dart';
 
 class ThemedColumn2<T> {
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"`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,4 @@`
	`1`	`+// ignore_for_file: deprecated_member_use`
`1`	`2`	`part of '../table.dart';`
`2`	`3`
`3`	`4`	`class BasicTableView extends StatefulWidget {`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,4 @@`
	`1`	`+// ignore_for_file: deprecated_member_use_from_same_package`
`1`	`2`	`part of '../scaffolds.dart';`
`2`	`3`
`3`	`4`	`class ThemedScaffoldView<T> extends StatefulWidget {`