fluttermarkdownflutter-textformfield

Properly handle linebreak from TextField in flutter to Markdown


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

var text = textController.text

enter image description here

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:

enter image description here

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.


Solution

  • 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'),
                  ),
                ),
              ],
            ),
          ),
        );
      }
    }