flutter_markdown multiple line breaks not working

Question

I am trying flutter_markdown package to markdown some content. But it is not working properly for multiple line breaks.

 String exampleData="\n\nLine 1. \n\nLine2.\n\n\n\n### Heading \n\nLine3";
 Markdown(data: exampleData,)

The output is

I tried with line breaks "<br />" but it didn't worked

 String exampleData="Line 1. \n\nLine2. <br /> <br /> \n\n### Heading \n\nLine3";

Out put is

Can someone help me with this line breaks or any alternative packages.

Solution 1

I've found a nasty trick (not a solution) that may be of help in this specific case. I don't recommend it, but couldn't find any other workaround using flutter_markdown so far, and I couldn't find any other package in substitution neither.

You can take advantage of using triple apostrophes to add vertical space.

It is a nasty workaround, but couldn't find anything better so far to add vertical space.

Solution 2

check out below link!!

enter link description here

br tag is not working, so using 3 back slash + n instead of br tag

String exampleData="Line 1. \\\nLine2. \\\n## Heading \\\nLine3";

Solution 3

Hi I found this package https://pub.dev/packages/markdown_widget

It's not a completely solution but this package support some tags os html like <\br>, in this case I added that tag in the markdown and works

Solution 4

A decent Work Around.

A new feature is added in Flutter_markdown package called paddingBuilders , from version 0.6.8. you can add padding to all of the blocks available in markdown like below.

MarkdownBody(
  data: markDown,
  paddingBuilders: <String,
  MarkdownPaddingBuilder>{
    'p': PPaddingBuilder(),
    'h3': H3PaddingBuilder(),
  },
)

where you have to define the padding builder like below.

class PPaddingBuilder extends MarkdownPaddingBuilder {
  @override
  EdgeInsets getPadding() => const EdgeInsets.only(top: SGSpacing.xlarge);
}

class H3PaddingBuilder extends MarkdownPaddingBuilder {
  @override
  EdgeInsets getPadding() => const EdgeInsets.only(top: SGSpacing.xxlarge);
}

The list of all blockTag available in Flutter_markdown from source code is below:

const List<String> _kBlockTags = <String>[
  'p',
  'h1',
  'h2',
  'h3',
  'h4',
  'h5',
  'h6',
  'li',
  'blockquote',
  'pre',
  'ol',
  'ul',
  'hr',
  'table',
  'thead',
  'tbody',
  'tr'
];

PS: padding will not work for inline Tags. only block Tag applicable.

Solution 5

Replace your <br> with \x03 like this. \x03 is End of text(ETX) in ASCII:

text.replaceAll('<br>', '\x03');

View more solutions

Comments

[Adnan Alshami]

try </br> instead of <br/>. I'm not sure if that will help

[BLB]

@AdnanAlshami not working

[Mayur Chaudhary]

try this package: pub.dev/packages/html

[Adnan Alshami]

Ask the package creator, I've made a pull request a long time ago and he was very active at that time.

[BLB]

But I don't have markedUp data. I have markdown code. guides.github.com/pdfs/markdown-cheatsheet-online.pdf