Skip to content

Commit 2c3e42f

Browse files
ManuelRomeroAManuelRomeroA
authored
fix: update header text and improve tooltip handling in themed table (#125)
This pull request introduces improvements to the `ThemedTable2` widget, specifically enhancing the handling of header text overflow by adding tooltips, and includes some refactoring and minor updates. The main change is the addition of the `ThemedTooltip` to table headers, ensuring that overflowing header text is now accessible via a tooltip. There are also some code cleanups and a version bump. **Enhancements to Table Header Overflow Handling:** - Added `ThemedTooltip` to the headers of `ThemedTable2` so that when header text overflows, a tooltip is shown with the full header text. This improves usability for columns with long titles. [[1]](diffhunk://#diff-5b9ef11e8406724411bc47df7bacb49b59952951fd8bdd7628101cf5d723be40L483-R511) [[2]](diffhunk://#diff-5b9ef11e8406724411bc47df7bacb49b59952951fd8bdd7628101cf5d723be40L504-R533) [[3]](diffhunk://#diff-06572a96a58dc510037d5efa622f9bec8519bc1beab13c9f251e97e657a9d4edR3-R5) - Introduced a utility method `buildHeaderCell` to encapsulate the logic for rendering header cells with overflow detection and tooltips. **Codebase Maintenance and Refactoring:** - Cleaned up commented-out debug print statements in the selection logic for cleaner code. - Refactored header cell width calculation for clarity and maintainability. **Versioning and Documentation:** - Bumped the package version to `7.5.19` in `pubspec.yaml` and updated the changelog to document the new tooltip feature. [[1]](diffhunk://#diff-8b7e9df87668ffa6a04b32e1769a33434999e54ae081c52e5d943c541d4c0d25L3-R3) [[2]](diffhunk://#diff-06572a96a58dc510037d5efa622f9bec8519bc1beab13c9f251e97e657a9d4edR3-R5) Other changes include a test update to the example table header text, which is not functionally significant.
2 parents 492ae09 + 145ba39 commit 2c3e42f

5 files changed

Lines changed: 85 additions & 38 deletions

File tree

‎CHANGELOG.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
# Changelog
22

3+
## 7.5.19
4+
- Add `ThemedTooltip` to headers of `ThemedTable2` for better overflow handling
5+
36
## 7.5.18
47

58
- Added `mapboxCustomStyleId` and `mapboxCustomUsername` to `ThemedTileLayer` to support custom Mapbox styles.

‎example/lib/views/table/src/table2.dart‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -117,7 +117,7 @@ class _InfinityTableViewState extends State<InfinityTableView> {
117117
// );
118118
// }),
119119
ThemedColumn2(
120-
headerText: 'VIN',
120+
headerText: 'Lore 123456 Lore large lore lore lore lore lore lore lore ',
121121
valueBuilder: (item) => '${item.vin}',
122122
width: 250,
123123
richTextBuilder: (item) => [

‎example/macos/Podfile.lock‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
PODS:
22
- file_picker (0.0.1):
33
- FlutterMacOS
4+
- flutter_timezone (0.1.0):
5+
- FlutterMacOS
46
- FlutterMacOS (1.0.0)
57
- path_provider_foundation (0.0.1):
68
- Flutter
@@ -13,6 +15,7 @@ PODS:
1315

1416
DEPENDENCIES:
1517
- file_picker (from `Flutter/ephemeral/.symlinks/plugins/file_picker/macos`)
18+
- flutter_timezone (from `Flutter/ephemeral/.symlinks/plugins/flutter_timezone/macos`)
1619
- FlutterMacOS (from `Flutter/ephemeral`)
1720
- path_provider_foundation (from `Flutter/ephemeral/.symlinks/plugins/path_provider_foundation/darwin`)
1821
- shared_preferences_foundation (from `Flutter/ephemeral/.symlinks/plugins/shared_preferences_foundation/darwin`)
@@ -21,6 +24,8 @@ DEPENDENCIES:
2124
EXTERNAL SOURCES:
2225
file_picker:
2326
:path: Flutter/ephemeral/.symlinks/plugins/file_picker/macos
27+
flutter_timezone:
28+
:path: Flutter/ephemeral/.symlinks/plugins/flutter_timezone/macos
2429
FlutterMacOS:
2530
:path: Flutter/ephemeral
2631
path_provider_foundation:
@@ -31,11 +36,12 @@ EXTERNAL SOURCES:
3136
:path: Flutter/ephemeral/.symlinks/plugins/url_launcher_macos/macos
3237

3338
SPEC CHECKSUMS:
34-
file_picker: 7584aae6fa07a041af2b36a2655122d42f578c1a
39+
file_picker: e716a70a9fe5fd9e09ebc922d7541464289443af
40+
flutter_timezone: b3bc0c587d8780d395651284a1ff46eb1e5753ac
3541
FlutterMacOS: d0db08ddef1a9af05a5ec4b724367152bb0500b1
36-
path_provider_foundation: 080d55be775b7414fd5a5ef3ac137b97b097e564
37-
shared_preferences_foundation: 9e1978ff2562383bd5676f64ec4e9aa8fa06a6f7
38-
url_launcher_macos: 0fba8ddabfc33ce0a9afe7c5fef5aab3d8d2d673
42+
path_provider_foundation: 0b743cbb62d8e47eab856f09262bb8c1ddcfe6ba
43+
shared_preferences_foundation: 5086985c1d43c5ba4d5e69a4e8083a389e2909e6
44+
url_launcher_macos: 175a54c831f4375a6cf895875f716ee5af3888ce
3945

4046
PODFILE CHECKSUM: 9ebaf0ce3d369aaa26a9ea0e159195ed94724cf3
4147

‎lib/src/table2/src/table.dart‎

Lines changed: 70 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -436,17 +436,11 @@ class _ThemedTable2State<T> extends State<ThemedTable2<T>> {
436436
return Checkbox(
437437
value: value.length == _filteredData.value.length && _filteredData.value.isNotEmpty,
438438
onChanged: (val) {
439-
// print('BEFORE');
440-
// print('Selected data: ${_selectedItems.value.length}');
441-
// print(' Filtered data: ${_filteredData.value.length}');
442439
if (val == true) {
443440
_selectedItems.value = .from(_filteredData.value);
444441
} else {
445442
_selectedItems.value = [];
446443
}
447-
// debugPrint('AFTER');
448-
// debugPrint('Selected data: ${_selectedItems.value.length}');
449-
// debugPrint(' Filtered data: ${_filteredData.value.length}');
450444
},
451445
);
452446
},
@@ -467,6 +461,7 @@ class _ThemedTable2State<T> extends State<ThemedTable2<T>> {
467461
itemBuilder: (context, index) {
468462
final ThemedColumn2<T> entry = widget.columns[index];
469463
final bool isSelected = entry == _colSelected;
464+
double cellWidth = sizes[index]! - (index < widget.columns.length - 1 ? 1 : 0);
470465

471466
return Row(
472467
children: [
@@ -480,38 +475,62 @@ class _ThemedTable2State<T> extends State<ThemedTable2<T>> {
480475
_colSelected = entry;
481476
_isReversed = false;
482477
}
483-
484478
_filterAndSort('SORT');
485479
},
486480
child: Container(
487-
width: sizes[index]! - (index < widget.columns.length - 1 ? 1 : 0),
481+
width: cellWidth,
488482
padding: _padding,
489483
alignment: entry.alignment,
490-
child: RichText(
491-
text: TextSpan(
492-
children: [
493-
if (isSelected) ...[
494-
WidgetSpan(
495-
alignment: .middle,
496-
child: Icon(
497-
_isReversed
498-
? LayrzIcons.solarBoldSortFromBottomToTop
499-
: LayrzIcons.solarBoldSortFromTopToBottom,
500-
size: _sortIconSize,
501-
color: Theme.of(context).textTheme.bodyMedium?.color,
502-
),
503-
),
504-
const WidgetSpan(child: SizedBox(width: 5)),
505-
],
506-
507-
TextSpan(
508-
text: entry.headerText,
509-
style: Theme.of(
510-
context,
511-
).textTheme.bodyMedium?.copyWith(fontWeight: .bold),
484+
child: Builder(
485+
builder: (context) {
486+
final double textWidth = cellWidth - (_padding.left + _padding.right);
487+
488+
// Fetch inline spans if richTextBuilder is provided, otherwise, use the header text
489+
final textOnlySpan = TextSpan(
490+
text: entry.headerText,
491+
style: Theme.of(
492+
context,
493+
).textTheme.bodyMedium?.copyWith(fontWeight: FontWeight.bold),
494+
);
495+
// Calculate if the text overflows the available width
496+
final textPainter = TextPainter(
497+
text: textOnlySpan,
498+
maxLines: 1,
499+
textDirection: Directionality.of(context),
500+
)..layout(maxWidth: textWidth);
501+
502+
final bool isOverflowing = textPainter.didExceedMaxLines;
503+
// Widget to display the header text
504+
final richText = RichText(
505+
maxLines: 1,
506+
overflow: TextOverflow.ellipsis,
507+
text: TextSpan(
508+
children: [
509+
if (isSelected)
510+
WidgetSpan(
511+
alignment: PlaceholderAlignment.middle,
512+
child: Icon(
513+
_isReversed
514+
? LayrzIcons.solarBoldSortFromBottomToTop
515+
: LayrzIcons.solarBoldSortFromTopToBottom,
516+
size: _sortIconSize,
517+
color: Theme.of(context).textTheme.bodyMedium?.color,
518+
),
519+
),
520+
if (isSelected) const WidgetSpan(child: SizedBox(width: 5)),
521+
textOnlySpan,
522+
],
512523
),
513-
],
514-
),
524+
);
525+
// If richTextBuilder is provided, use it to build the header content, otherwise, use the header text
526+
return isOverflowing
527+
? ThemedTooltip(
528+
position: .top,
529+
message: entry.headerText,
530+
child: richText,
531+
)
532+
: richText;
533+
},
515534
),
516535
),
517536
),
@@ -817,6 +836,25 @@ class _ThemedTable2State<T> extends State<ThemedTable2<T>> {
817836
);
818837
}
819838

839+
Widget buildHeaderCell(String text, TextStyle style, double maxWidth) {
840+
final textPainter = TextPainter(
841+
text: TextSpan(text: text, style: style),
842+
maxLines: 1,
843+
textDirection: TextDirection.ltr,
844+
)..layout(maxWidth: maxWidth);
845+
846+
final isOverflowing = textPainter.didExceedMaxLines;
847+
848+
final child = Text(
849+
text,
850+
style: style,
851+
maxLines: 1,
852+
overflow: TextOverflow.ellipsis,
853+
);
854+
855+
return isOverflowing ? ThemedTooltip(position: ThemedTooltipPosition.top, message: text, child: child) : child;
856+
}
857+
820858
void _onSearchChanged(String value) {
821859
_debounce?.cancel();
822860
_debounce = Timer(const Duration(milliseconds: 600), () {

‎pubspec.yaml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
name: layrz_theme
22
description: Layrz standard styling library for Flutter. Widget library following the Material Design 3 guidelines, with a focus on reliavility and functionality.
3-
version: "7.5.18"
3+
version: "7.5.19"
44
homepage: https://theme.layrz.com
55
repository: https://github.com/goldenm-software/layrz_theme
66

0 commit comments

Comments
 (0)