'flutter_markdown multiple line breaks not working

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 enter image description here

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 enter image description here

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



Solution 1:[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.

Checkout the image

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:[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:[3]

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

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

Solution 4:[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:[5]

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 6:[6]

My solution, when use String single line, not use """ or ''', use \n with 2 space Below code show same UI

var _markdownSingleLine = 'Demo \n Break \n line';

var _markdownMultiLine = ''' Demo
Break
line ''';

Demo break line

Solution 7:[7]

According to a now deleted issue, flutter_markdown supports explicit line breaks using a backslash at the end of the line. Using this syntax, your example would be:

\
\
Line 1.\
\
Line2.\
\
\
\
### Heading
\
Line3

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 ranka47
Solution 2 Taehyung_Kim_93
Solution 3 Khamidjon Khamidov
Solution 4 Zihan
Solution 5 acuedd
Solution 6
Solution 7 m93a