The title may be a bit meaningless, I couldn't think of a better title. I'm sorry. In Flutter, I want to make a TextFormField like this:

I want to make a customizable TextFormField. This TextFormField should have an array field in the form of customTextPatterns. In the array, the key part is the regex pattern, the value part is the way to show the content that matches the pattern.

For example, I want to be able to give the Container > Text widget instead of the text corresponding to the ^(0|[1-9][0-9]*)$ pattern (this is the number one regex pattern). Just like in the screenshot. In addition, for example, if the user writes a link, the Container > Text widget should be shown again. For example, if the user typed something like this in TextFormField:

“Hello, is a very nice site!”, the background of the link will be colored and the writing style will be different. Of course, if the user starts deleting, the link should be completely deleted. i.e. if the user hits the delete button at the end of stackoverflow, the link should be completely deleted along with the Container.

How can I make such a custom TextFormField widget? I searched and thought for a long time but unfortunately I couldn't think of a solution.

I am grateful in advance for your support. :)

The title may be a bit meaningless, I couldn't think of a better title. I'm sorry. In Flutter, I want to make a TextFormField like this:

I want to make a customizable TextFormField. This TextFormField should have an array field in the form of customTextPatterns. In the array, the key part is the regex pattern, the value part is the way to show the content that matches the pattern.

For example, I want to be able to give the Container > Text widget instead of the text corresponding to the ^(0|[1-9][0-9]*)$ pattern (this is the number one regex pattern). Just like in the screenshot. In addition, for example, if the user writes a link, the Container > Text widget should be shown again. For example, if the user typed something like this in TextFormField:

“Hello, https://stackoverflow is a very nice site!”, the background of the link will be colored and the writing style will be different. Of course, if the user starts deleting, the link should be completely deleted. i.e. if the user hits the delete button at the end of stackoverflow, the link should be completely deleted along with the Container.

How can I make such a custom TextFormField widget? I searched and thought for a long time but unfortunately I couldn't think of a solution.

I am grateful in advance for your support. :)

• flutter
• dart

Share Improve this question Follow edited Mar 12 at 6:39 DarkBee 15.5k88 gold badges7272 silver badges118118 bronze badges asked Mar 12 at 5:45 Burak ŞanlıBurak Şanlı 3511 silver badge44 bronze badges 1

• Type "richtext editor" into the pub search. Many possible packages. – Randal Schwartz Commented Mar 12 at 6:01

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

Try using rich_editor or flutter_quill package