[flutter_markdown] Add TableCellVerticalAlignment property in markdown stylesheet (#3880)

Add property  `tableVerticalAlignment` to markdown style sheet that sets the vertical alignment of table properties.

flutter/flutter#125872

Author: joshpetit

packages/flutter_markdown/CHANGELOG.md

@@ -1,3 +1,7 @@
+## 0.6.16
+
+* Adds `tableVerticalAlignment` property to allow aligning table cells vertically.
+
 ## 0.6.15+1
 
 * Fixes 'The Scrollbar's ScrollController has no ScrollPosition attached' exception when scrolling scrollable code blocks.

packages/flutter_markdown/lib/src/builder.dart

@@ -421,7 +421,7 @@ class MarkdownBuilder implements md.NodeVisitor {
       } else if (tag == 'table') {
         child = Table(
           defaultColumnWidth: styleSheet.tableColumnWidth!,
-          defaultVerticalAlignment: TableCellVerticalAlignment.middle,
+          defaultVerticalAlignment: styleSheet.tableVerticalAlignment,
           border: styleSheet.tableBorder,
           children: _tables.removeLast().rows,
         );

packages/flutter_markdown/lib/src/style_sheet.dart

@@ -42,6 +42,7 @@ class MarkdownStyleSheet {
     this.tableColumnWidth,
     this.tableCellsPadding,
     this.tableCellsDecoration,
+    this.tableVerticalAlignment = TableCellVerticalAlignment.middle,
     this.blockquotePadding,
     this.blockquoteDecoration,
     this.codeblockPadding,
@@ -362,6 +363,7 @@ class MarkdownStyleSheet {
     TableColumnWidth? tableColumnWidth,
     EdgeInsets? tableCellsPadding,
     Decoration? tableCellsDecoration,
+    TableCellVerticalAlignment? tableVerticalAlignment,
     EdgeInsets? blockquotePadding,
     Decoration? blockquoteDecoration,
     EdgeInsets? codeblockPadding,
@@ -414,6 +416,8 @@ class MarkdownStyleSheet {
       tableColumnWidth: tableColumnWidth ?? this.tableColumnWidth,
       tableCellsPadding: tableCellsPadding ?? this.tableCellsPadding,
       tableCellsDecoration: tableCellsDecoration ?? this.tableCellsDecoration,
+      tableVerticalAlignment:
+          tableVerticalAlignment ?? this.tableVerticalAlignment,
       blockquotePadding: blockquotePadding ?? this.blockquotePadding,
       blockquoteDecoration: blockquoteDecoration ?? this.blockquoteDecoration,
       codeblockPadding: codeblockPadding ?? this.codeblockPadding,
@@ -475,6 +479,7 @@ class MarkdownStyleSheet {
       tableColumnWidth: other.tableColumnWidth,
       tableCellsPadding: other.tableCellsPadding,
       tableCellsDecoration: other.tableCellsDecoration,
+      tableVerticalAlignment: other.tableVerticalAlignment,
       blockquotePadding: other.blockquotePadding,
       blockquoteDecoration: other.blockquoteDecoration,
       codeblockPadding: other.codeblockPadding,
@@ -594,6 +599,9 @@ class MarkdownStyleSheet {
   /// The decoration to use for `th` and `td` elements.
   final Decoration? tableCellsDecoration;
 
+  /// The [TableCellVerticalAlignment] to use for `th` and `td` elements.
+  final TableCellVerticalAlignment tableVerticalAlignment;
+
   /// The padding to use for `blockquote` elements.
   final EdgeInsets? blockquotePadding;
 
@@ -692,6 +700,7 @@ class MarkdownStyleSheet {
         other.tableColumnWidth == tableColumnWidth &&
         other.tableCellsPadding == tableCellsPadding &&
         other.tableCellsDecoration == tableCellsDecoration &&
+        other.tableVerticalAlignment == tableVerticalAlignment &&
         other.blockquotePadding == blockquotePadding &&
         other.blockquoteDecoration == blockquoteDecoration &&
         other.codeblockPadding == codeblockPadding &&
@@ -748,6 +757,7 @@ class MarkdownStyleSheet {
       tableColumnWidth,
       tableCellsPadding,
       tableCellsDecoration,
+      tableVerticalAlignment,
       blockquotePadding,
       blockquoteDecoration,
       codeblockPadding,

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.6.15+1
+version: 0.6.16
 
 environment:
   sdk: ">=3.0.0 <4.0.0"

packages/flutter_markdown/test/table_test.dart

@@ -121,6 +121,66 @@ void defineTests() {
       },
     );
 
+    testWidgets(
+      'table cell vertical alignment should default to middle',
+      (WidgetTester tester) async {
+        final ThemeData theme =
+            ThemeData.light().copyWith(textTheme: textTheme);
+
+        const String data = '|Header|\n|----|\n|Column|';
+        final MarkdownStyleSheet style = MarkdownStyleSheet.fromTheme(theme);
+        await tester.pumpWidget(
+            boilerplate(MarkdownBody(data: data, styleSheet: style)));
+
+        final Table table = tester.widget(find.byType(Table));
+
+        expect(
+            table.defaultVerticalAlignment, TableCellVerticalAlignment.middle);
+      },
+    );
+
+    testWidgets(
+      'table cell vertical alignment should follow stylesheet',
+      (WidgetTester tester) async {
+        final ThemeData theme =
+            ThemeData.light().copyWith(textTheme: textTheme);
+
+        const String data = '|Header|\n|----|\n|Column|';
+        const TableCellVerticalAlignment tableCellVerticalAlignment =
+            TableCellVerticalAlignment.top;
+        final MarkdownStyleSheet style = MarkdownStyleSheet.fromTheme(theme)
+            .copyWith(tableVerticalAlignment: tableCellVerticalAlignment);
+
+        await tester.pumpWidget(
+            boilerplate(MarkdownBody(data: data, styleSheet: style)));
+
+        final Table table = tester.widget(find.byType(Table));
+
+        expect(table.defaultVerticalAlignment, tableCellVerticalAlignment);
+      },
+    );
+
+    testWidgets(
+      'table cell vertical alignment should follow stylesheet for different values',
+      (WidgetTester tester) async {
+        final ThemeData theme =
+            ThemeData.light().copyWith(textTheme: textTheme);
+
+        const String data = '|Header|\n|----|\n|Column|';
+        const TableCellVerticalAlignment tableCellVerticalAlignment =
+            TableCellVerticalAlignment.bottom;
+        final MarkdownStyleSheet style = MarkdownStyleSheet.fromTheme(theme)
+            .copyWith(tableVerticalAlignment: tableCellVerticalAlignment);
+
+        await tester.pumpWidget(
+            boilerplate(MarkdownBody(data: data, styleSheet: style)));
+
+        final Table table = tester.widget(find.byType(Table));
+
+        expect(table.defaultVerticalAlignment, tableCellVerticalAlignment);
+      },
+    );
+
     testWidgets(
       'table with last row of empty table cells',
       (WidgetTester tester) async {