Flutter_markdown: add scroll view to markdown table

Is there an existing issue for this?

I have searched the existing issues
I have read the guide to filing a bug

Use case

As the screen shot shows, if I have a very wide table, the contents are too narrow to read. It would be good if I can pan this table around with a much more human-readable column width.

The reason why I do not wrap the whole Markdown widget into a scrollable widget is that it will cause bad experience for other contents, for example, if text content is also scrollable, I need to pan around for each lone text line. It would be good if only large contents like tables and code blocks have the scroll behavior.

Proposal

the Table widget inside markdown builder function could be wrapped with a scrollable widget just like how it's done with code blocks, and provide the block constraints settings. Or, the constraints could be just the constraints of its parent widget. If the size of table (probably together with a minimum tableColumnWidth setting) exceeds the constrains, scroll gesture is enabled.

Any updates on this? I'm facing the same issue with markdown tables we're trying to render with too many columns for the given horizontal space.

I'm facing the same issue. Need horizontal scroll when using FixedColumnWidth

styleSheet: MarkdownStyleSheet(
  tableColumnWidth: FixedColumnWidth(value),
),

Edit: Temporary solution
Download the flutter_markdown package and import to project locally.
Open builder.dart, find the part bellow

      } else if (tag == 'table') {
        child = Table(
          defaultColumnWidth: styleSheet.tableColumnWidth!,
          defaultVerticalAlignment: styleSheet.tableVerticalAlignment,
          border: styleSheet.tableBorder,
          children: _tables.removeLast().rows,
        );
      } else if (tag == 'blockquote') {

Wrap Table with SingleChildScrollView, scrollDirection: Axis.horizontal, and make sure to set tableColumnWidth: FixedColumnWidth(value) as my code above.

Hey 👋,

Do you have any update or workaround on this?

The fix works well. Is a PR on going or should I try opening one?

[flutter_markdown] Add horizontal scroll for markdown table (#6983)

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.

Navigation Menu

Repository navigation

Flutter_markdown: add scroll view to markdown table #129052

Is there an existing issue for this?

Use case

Proposal

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Flutter_markdown: add scroll view to markdown table #129052

Description

Is there an existing issue for this?

Use case

Proposal

Activity

tylerjvollick commented on Apr 23, 2024

phong010198 commented on Jun 21, 2024

Bazni commented on Jun 21, 2024

Bazni commented on Jun 25, 2024

github-actions commented on Jul 13, 2024

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions