I understand the TextField
is primarily for plain text, but I have seen it is possible to display richly formatted text inside. I am a beginner with Flutter though and don’t quite understand what is being demonstrated. It appears that the text input is being formatted based on a RegEx as opposed to coming from data being streamed in.
I would like guidance on how to richly format text in a TextField
and also how I can gain access to the RenderParagraph
render object in order to compute things like text positions on the screen.
Thank you!
2
Answers
TextField is primarily used for plain text input, you can achieve rich text formatting by using the TextEditingController and TextSpan classes. However, please note that formatting within a TextField might not be as versatile or as powerful as working with a widget designed specifically for rich text editing, like TextFormField combined with a SelectableText or a package like flutter_rich_text_editor
See Flutter Textfield has a controller which is of
TextEditingController
type and it handle the inputs and can perform action accordingly to them for theTextField
.And In the answer you mentioned, he/she is making a custom
RichTextFieldController
that extendsTextEditingController
, enabling rich formatting within aTextField
.It utilizes defined patterns and associated TextStyle rules to format different parts of the input text, allowing features like @mentions, #hashtags, bold, italic, and more.
The overridden
buildTextSpan
method applies the formatting styles based on thematched patterns
, creating a dynamic styledTextSpan
.