0

I'm new to flutter and I need an editor that can format certain words (e.g., automatic URL detection and formatting it to blue inside the editor). So far, I have not found a plugin for that so I decided to write my own plugin.

The question here is: where do I start?

I've tried using a Rich.text() with TextSpan as children but I can't edit those children. I've tried using a SizedBox with inside of it an EditableText but I encountered 2 problems.

  • The fontSize of EditableText always differs from the fontSize of a TextSpan, no matter if I apply the same TextStyle (this really frustrates me)
  • The whole Rich.text() doesn't work as a single editor, which is what I'm trying to achieve.

Could someone point me into the right direction? Thanks in advance!

Alb
  • 1,063
  • 9
  • 33
  • 1
    https://stackoverflow.com/a/59773962/2252830 – pskink Mar 25 '20 at 18:41
  • Ok, I feel really stupid now, thanks a lot @pskink ! – Alb Mar 25 '20 at 19:43
  • 1
    stupid? warum? errare humanum est ;-) – pskink Mar 26 '20 at 05:16
  • @pskink Of course. But I was looking for a solution, thinking I knew the way towards it and overcomplicating things :D – Alb Mar 26 '20 at 11:12
  • 1
    its like [Ockhams Rasiermesser](https://de.wikipedia.org/wiki/Ockhams_Rasiermesser) - "Wesenheiten dürfen nicht über das Notwendige hinaus vermehrt werden." ;-) – pskink Mar 26 '20 at 11:27
  • @pskink Thanks, that was an interesting read! I have a small question on the side. I can display whatever I want, inside one of those spans, however the cursor will still only behave as if the original text is there. Say, I replace every "2" with "22", the cursor will not "recognize" the second "2". Is there a way to create some sort of "placeholder" for this, so that the cursor behaves in a predictable way for a user? – Alb Mar 26 '20 at 22:35
  • post your somewhere, for example on https://paste.ubuntu.com – pskink Mar 27 '20 at 06:07
  • https://paste.ubuntu.com/p/mMHpMTNsNK/ What I'm doing, is showing content that is actually longer than the actual text of the TextEditingController. If the text would be "123", the cursor would stay at the 3rd position and the visible `TextSpan`'s would show "112|233" (where | is the cursor). It doesn't 'see' the difference between what is visible for the user and what is in the `.text`. Why do I want that? I am thinking of displaying a thumbnail of an apple directly in front of the word, content that the TextField won't take into account when drawing the cursor. – Alb Mar 27 '20 at 07:53
  • good, i will take a look but most likely respond here next week – pskink Mar 27 '20 at 07:59
  • Thanks in advance! I have time, given current situation :\ – Alb Mar 27 '20 at 08:00
  • hi, i checked sources of `EditableText ` and it seems that `TextEditingController` is used for styling only - if you need to change the entered text you should use `inputFormatters` - for more info see https://github.com/flutter/flutter/blob/e10df3c1a6/packages/flutter/lib/src/services/text_formatter.dart#L32 - there are 3 concrete classes that extend `TextInputFormatter` – pskink Mar 31 '20 at 12:08

0 Answers0