Properly handle linebreak from TextField in flutter to Markdown

Question

I am having a TextField and I take the content from its controller like this:

var text = textController.text

when I do print(text.characters.toList()) I get this:

[t, e, s, t, 
, a, s, d, f]

My raw input (pressing shift+enter between the words):

test
asdf

Now I want to display my input. Because sometimes I also want to put in markdown formatted strings I have it wrapped like this:

MarkdownBody(data: text)

Using MarkdownBody from https://pub.dev/packages/flutter_markdown.

When doing that, it gets displayed like this:

The line break is missing.

How can I replace the line break that is there before with maybe \n or something to make it visible in Markdown. I don't really understand what kind of character is this linebreak shown in my characters list.

Answer 1

In Markdown you may add a new line by adding "two empty spaces at the end of a line". (credit)

So, in your case, you should use:

MarkdownBody(
                data: textController.text.replaceAll('\n', '  \n'),
              ),

---

Note: You might of thought to just add a <br>.

However, according to flutter_markdown, that isn't supported:

A common HTML tweak is to insert HTML line-break elements
in Markdown source to force additional line breaks not supported by the Markdown syntax. This HTML trick doesn't apply to Flutter. The flutter_markdown package doesn't support inline HTML.

---

Edit

Since you said it doesn't work, try to copy-paste this as an example:

import 'package:flutter/material.dart';
import 'package:flutter_markdown/flutter_markdown.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MarkdownExample(),
    );
  }
}

class MarkdownExample extends StatefulWidget {
  @override
  _MarkdownExampleState createState() => _MarkdownExampleState();
}

class _MarkdownExampleState extends State<MarkdownExample> {
  final TextEditingController textController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Markdown Example'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Column(
          children: [
            TextField(
              controller: textController,
              maxLines: null,
              decoration: InputDecoration(
                hintText: 'Enter text with line breaks',
              ),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                setState(() {});
              },
              child: Text('Render Markdown'),
            ),
            SizedBox(height: 20),
            Expanded(
              child: MarkdownBody(
                data: textController.text.replaceAll('\n', '  \n'),
              ),
            ),
          ],
        ),
      ),
    );
  }
}