[flutter_markdown] Allow tables to be scrollable with IntrinsicColumnWidth (#8526)

Allows markdown tables to be scrollable with IntrinsicColumnWidth. Allows setting the scrollbar thumbVisibility based on stylesheet

- Additional fix from flutter/flutter#129052

Author: cunderw

packages/flutter_markdown/CHANGELOG.md

@@ -1,3 +1,8 @@
+## 0.7.6
+
+* Adds horizontal scrolling for table when using `tableColumnWidth: IntrinsicColumnWidth()`.
+* Adds styleSheet option `tableScrollbarThumbVisibility` for setting the `thumbVisibility` on tables' `ScrollBar`.
+
 ## 0.7.5
 
 * Updates minimum supported SDK version to Flutter 3.22/Dart 3.4.

packages/flutter_markdown/lib/src/builder.dart

@@ -451,12 +451,14 @@ class MarkdownBuilder implements md.NodeVisitor {
           );
         }
       } else if (tag == 'table') {
-        if (styleSheet.tableColumnWidth is FixedColumnWidth) {
+        if (styleSheet.tableColumnWidth is FixedColumnWidth ||
+            styleSheet.tableColumnWidth is IntrinsicColumnWidth) {
           child = _ScrollControllerBuilder(
             builder: (BuildContext context,
                 ScrollController tableScrollController, Widget? child) {
               return Scrollbar(
                 controller: tableScrollController,
+                thumbVisibility: styleSheet.tableScrollbarThumbVisibility,
                 child: SingleChildScrollView(
                   controller: tableScrollController,
                   scrollDirection: Axis.horizontal,

packages/flutter_markdown/lib/src/style_sheet.dart

@@ -41,6 +41,7 @@ class MarkdownStyleSheet {
     this.tablePadding,
     this.tableBorder,
     this.tableColumnWidth,
+    this.tableScrollbarThumbVisibility,
     this.tableCellsPadding,
     this.tableCellsDecoration,
     this.tableVerticalAlignment = TableCellVerticalAlignment.middle,
@@ -375,6 +376,7 @@ class MarkdownStyleSheet {
     EdgeInsets? tablePadding,
     TableBorder? tableBorder,
     TableColumnWidth? tableColumnWidth,
+    bool? tableScrollbarThumbVisibility,
     EdgeInsets? tableCellsPadding,
     Decoration? tableCellsDecoration,
     TableCellVerticalAlignment? tableVerticalAlignment,
@@ -441,6 +443,7 @@ class MarkdownStyleSheet {
       tablePadding: tablePadding ?? this.tablePadding,
       tableBorder: tableBorder ?? this.tableBorder,
       tableColumnWidth: tableColumnWidth ?? this.tableColumnWidth,
+      tableScrollbarThumbVisibility: tableScrollbarThumbVisibility,
       tableCellsPadding: tableCellsPadding ?? this.tableCellsPadding,
       tableCellsDecoration: tableCellsDecoration ?? this.tableCellsDecoration,
       tableVerticalAlignment:
@@ -508,6 +511,7 @@ class MarkdownStyleSheet {
       tablePadding: other.tablePadding,
       tableBorder: other.tableBorder,
       tableColumnWidth: other.tableColumnWidth,
+      tableScrollbarThumbVisibility: other.tableScrollbarThumbVisibility,
       tableCellsPadding: other.tableCellsPadding,
       tableCellsDecoration: other.tableCellsDecoration,
       tableVerticalAlignment: other.tableVerticalAlignment,
@@ -633,6 +637,9 @@ class MarkdownStyleSheet {
   /// The [TableColumnWidth] to use for `th` and `td` elements.
   final TableColumnWidth? tableColumnWidth;
 
+  /// The scrollbar thumbVisibility when the table is scrollable.
+  final bool? tableScrollbarThumbVisibility;
+
   /// The padding to use for `th` and `td` elements.
   final EdgeInsets? tableCellsPadding;
 

packages/flutter_markdown/pubspec.yaml

@@ -4,7 +4,7 @@ description: A Markdown renderer for Flutter. Create rich text output,
   formatted with simple Markdown tags.
 repository: https://github.com/flutter/packages/tree/main/packages/flutter_markdown
 issue_tracker: https://github.com/flutter/flutter/issues?q=is%3Aissue+is%3Aopen+label%3A%22p%3A+flutter_markdown%22
-version: 0.7.5
+version: 0.7.6
 
 environment:
   sdk: ^3.4.0

packages/flutter_markdown/test/scrollable_test.dart

@@ -113,7 +113,7 @@ void defineTests() {
     );
 
     testWidgets(
-      'table',
+      'table with fixed column width',
       (WidgetTester tester) async {
         const String data = '|Header 1|Header 2|Header 3|'
             '\n|-----|-----|-----|'
@@ -140,6 +140,34 @@ void defineTests() {
       },
     );
 
+    testWidgets(
+      'table with intrinsic column width',
+      (WidgetTester tester) async {
+        const String data = '|Header 1|Header 2|Header 3|'
+            '\n|-----|-----|-----|'
+            '\n|Col 1|Col 2|Col 3|';
+        await tester.pumpWidget(
+          boilerplate(
+            MediaQuery(
+              data: const MediaQueryData(),
+              child: MarkdownBody(
+                data: data,
+                styleSheet: MarkdownStyleSheet(
+                  tableColumnWidth: const IntrinsicColumnWidth(),
+                ),
+              ),
+            ),
+          ),
+        );
+
+        final Iterable<Widget> widgets = tester.allWidgets;
+        final Iterable<SingleChildScrollView> scrollViews =
+            widgets.whereType<SingleChildScrollView>();
+        expect(scrollViews, isNotEmpty);
+        expect(scrollViews.first.controller, isNotNull);
+      },
+    );
+
     testWidgets(
       'two tables use different scroll controllers',
       (WidgetTester tester) async {

packages/flutter_markdown/test/table_test.dart

@@ -200,6 +200,50 @@ void defineTests() {
       },
     );
 
+    testWidgets(
+      'table scrollbar thumbVisibility should follow stylesheet',
+      (WidgetTester tester) async {
+        final ThemeData theme =
+            ThemeData.light().copyWith(textTheme: textTheme);
+
+        const String data = '|Header|\n|----|\n|Column|';
+        const bool tableScrollbarThumbVisibility = true;
+        final MarkdownStyleSheet style = MarkdownStyleSheet.fromTheme(theme)
+            .copyWith(
+                tableColumnWidth: const FixedColumnWidth(100),
+                tableScrollbarThumbVisibility: tableScrollbarThumbVisibility);
+
+        await tester.pumpWidget(
+            boilerplate(MarkdownBody(data: data, styleSheet: style)));
+
+        final Scrollbar scrollbar = tester.widget(find.byType(Scrollbar));
+
+        expect(scrollbar.thumbVisibility, tableScrollbarThumbVisibility);
+      },
+    );
+
+    testWidgets(
+      'table scrollbar thumbVisibility should follow stylesheet',
+      (WidgetTester tester) async {
+        final ThemeData theme =
+            ThemeData.light().copyWith(textTheme: textTheme);
+
+        const String data = '|Header|\n|----|\n|Column|';
+        const bool tableScrollbarThumbVisibility = false;
+        final MarkdownStyleSheet style = MarkdownStyleSheet.fromTheme(theme)
+            .copyWith(
+                tableColumnWidth: const FixedColumnWidth(100),
+                tableScrollbarThumbVisibility: tableScrollbarThumbVisibility);
+
+        await tester.pumpWidget(
+            boilerplate(MarkdownBody(data: data, styleSheet: style)));
+
+        final Scrollbar scrollbar = tester.widget(find.byType(Scrollbar));
+
+        expect(scrollbar.thumbVisibility, tableScrollbarThumbVisibility);
+      },
+    );
+
     testWidgets(
       'table with last row of empty table cells',
       (WidgetTester tester) async {