Changing the Text Field Background Color in Flutter
Earlier this month, Akvelon’s team announced that we launched our Flutter Code Editor – an open-source and feature-rich code editor widget for Flutter applications with syntax highlighting that is already being used by developers to make code editing easier. However, the out-of-the-box standard TextField widget only works with a single color. In this article, we will explain a simple way to upgrade that and make Flutter change the text field background colors.
The TextField widget itself does not impose any styling. Instead, it asks its TextEditingController to produce a styled TextSpan object, which is a piece of text with a style.
See the full runnable example here.
The TextField passes its style to its TextEditingController and the default implementation just puts it into the TextSpan object, which is how the color is normally applied.
To override this, subclass the TextEditingController and override the method:
See the full code here.
You can also do much more complex processing. For instance, we made code highlighting by parsing the syntax tree and colorizing keywords, literals, comments, etc. differently:
We start by importing the highlighting and the flutter_highlighting packages we made for another project:
See the full code here.
Essentially, the TextEditingController class is the gate to all sorts of customization. We went further down that road and made an advanced code editor that can do this:
By experimenting with multi-colored code highlighting, we've been able to expand text customization possibilities in Flutter. We've achieved this by extending the TextEditingController, enabling us to create a multi-colored TextField. A simple implementation can display a gradient effect, while a more complex use-case allows syntax highlighting in a code editor, colorizing different components of code.
Explore these features and more in our article on the blog.
Alexey Inkin
Lead Flutter Developer at Akvelon
