Skip to content

[flutter_markdown] Add TableCellVerticalAlignment property in markdown stylesheet #3880

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 7 commits into from
Jul 5, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions packages/flutter_markdown/CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -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.
Expand Down
2 changes: 1 addition & 1 deletion packages/flutter_markdown/lib/src/builder.dart
Original file line number Diff line number Diff line change
Expand Up @@ -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,
);
Expand Down
10 changes: 10 additions & 0 deletions packages/flutter_markdown/lib/src/style_sheet.dart
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@ class MarkdownStyleSheet {
this.tableColumnWidth,
this.tableCellsPadding,
this.tableCellsDecoration,
this.tableVerticalAlignment = TableCellVerticalAlignment.middle,
this.blockquotePadding,
this.blockquoteDecoration,
this.codeblockPadding,
Expand Down Expand Up @@ -362,6 +363,7 @@ class MarkdownStyleSheet {
TableColumnWidth? tableColumnWidth,
EdgeInsets? tableCellsPadding,
Decoration? tableCellsDecoration,
TableCellVerticalAlignment? tableVerticalAlignment,
EdgeInsets? blockquotePadding,
Decoration? blockquoteDecoration,
EdgeInsets? codeblockPadding,
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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;

Expand Down Expand Up @@ -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 &&
Expand Down Expand Up @@ -748,6 +757,7 @@ class MarkdownStyleSheet {
tableColumnWidth,
tableCellsPadding,
tableCellsDecoration,
tableVerticalAlignment,
blockquotePadding,
blockquoteDecoration,
codeblockPadding,
Expand Down
2 changes: 1 addition & 1 deletion packages/flutter_markdown/pubspec.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
60 changes: 60 additions & 0 deletions packages/flutter_markdown/test/table_test.dart
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down