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.

Likker

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

@AdnanAlshami not working – Likker

try this package: pub.dev/packages/html – Guesswarp

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

Answer 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.

Fouquiertinville

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

work for me, thanks so much – Attila

Answer 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";

Whin

Answer 3

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.

Refract

Answer 4

Just add '
\

u2028' for line breaks. This is the Unicode Character 'LINE SEPARATOR'

Chartier

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center. – Casmey

Answer 5

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

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

Ozell

Answer 6

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

Bename

Answer 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

Dravidian

Answer 8

All the given solutions did not work for my use case. I have a text, where a new line is marked as \n. The problem occurs, if i want to insert \n\n. I solved the issue as follows:

text.replaceAll('\n\n', '''
\n
\u200B 
\n
'''
);

This inserts a zero-width space which was sufficient for me to have two new lines.

Arrear

Answer 9

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

Rixdollar

Answer 10

In my case.

text.replaceAll('\n', '  \n');

Lisa

Answer 11

I couldn't get the newline to work using the Markdown syntax either. A workaround I used is the newline escape character \n. When using this, you need to set softLineBreak to true in your MarkdownBody.

Here's how you can do it:

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

MarkdownBody(
  data: exampleData,
  softLineBreak: true,
)

Brechtel