How to put text in a square in TextFormField?

Question

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.com 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.com, 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. :)

Answer 1

Try using rich_editor or flutter_quill package