Flutter – Gradient TextFields

Decorating text fields can be a big task if you have a large application. There is a package gradient_textfield that could make this time-consuming task pretty simple and fast. Although in Flutter we can create text fields using TextField, for beginners especially, it takes time to understand decoration concept, gradient_textfield can do this easily. We will see how simple it is through examples in this article.

Add the dependency:

Or run the following command in the terminal of IDE:

flutter pub add gradient_textfield

Import in main.dart:

Implementation:

Initialize TextEditingController. 

To create gradient text fields use Gradienttextfield() widget. We can modify its properties like radius, height, width, etc. In the future, there will be more properties added to Gradienttextfield by the package author.

Example 1:

Output:

Example 2:

Output:

Example 3:

We can create small text fields for taking OTP as input also using this package. The below example shows the way we can create such small text fields with different colors and styles.

Output:

Full Example:

Output: