CODEWITHSUNDEEP
flutter
verified_tinker
verified_tinker

Reputation: 665

How can I change the vertical spacing between paragraphs inside a TextField?

I'm working on a Markdown editor in Flutter, built on top of the TextField widget.

A feature I want to implement is configurable spacing between paragraphs (i.e. after newlines), so that the user doesn't need hit return twice and manually insert an empty line between paragraphs, as is required by Markdown. Instead, I want to create the illusion of an empty line by increasing the space between paragraphs and automatically insert them during export.

If you've used Notion before, it does something similar. So does MarkText.

How would that be accomplished in Flutter? Can it be done with the out-of-the-box TextField, or do I need to implement a custom solution around EditableText?

I've messed around with the height property of the TextField's TextStyle style and StrutStyle strutStyle properties, but both seem to affect the text at the line level, so what I get is the same as, say, changing the line spacing in a Word document. Not what I'm going for.

Upvotes: 0

Views: 214

Answers (1)

Abdallah Abdel Aziz
Abdallah Abdel Aziz

Reputation: 676

What you can do is listen to the TextField changes, and detect the enter/return press, and you can do that using the built-in onChanged Listener, so you can create a TextField with a TextEditingController, and in the onChanged handler, you can detect the press by checking if the string finishes by \n, and here you can manipulate your string as you want, i.e. you can add empty lines by appending another \n.

Example:

TextEditingController co = TextEditingController();

TextField(
  maxLines: 100,
  controller: co,
  onChanged: (val){
    if(val.endsWith('\n')){
      co.text = co.text+'\n'; //append new line
      co.selection = TextSelection.fromPosition(TextPosition(offset: co.text.length));//set the pointer at the end of the string
     }             
   },                
),

Upvotes: 0

Related Questions