index.md

How to Validate a TextField in Flutter

How do you validate a TextField as the user types in Flutter?

Let's figure it out. 🧵

(hint: we'll use an AnimatedBuilder)

---

Let's start with a StatefulWidget that contains a TextField and an ElevatedButton.

This just shows the UI but doesn't do any validation.

---

Next, let's create a TextEditingController, dispose it as needed, and pass it to the TextField.

---

To validate the text, we can add:

• an errorText getter variable
• pass it to the TextField
• use it to enable/disable our button with some conditional logic

---

But if we try this now, both the TextField error hint and the button UI don't update as the text changes.

Why? 🧐

---

We forgot to tell Flutter to rebuild our widget when the text changes!

This could be fixed by setting a local state variable with a call to setState() in the TextField onChanged callback.

---

But we don't even need a local state variable in the first place because TextEditingController already contains the text value.

So how can we rebuild the widget when the text value changes?

---

We can wrap our widgets with an AnimatedBuilder and pass our TextEditingController to the animation argument:

---

This works because AnimatedBuilder takes an animation argument of type Listenable.

And TextEditingController extends ValueNotifier, which extends ChangeNotifier, which implements Listenable.

Here's how these classes are implemented in the Flutter SDK:

---

This means that we can pass instances of any of these classes to AnimatedBuilder.

And we can now validate our text on the fly:

Complete article: Flutter TextField Validation: How to work with TextEditingController, Form, and TextFormField

---

Found this useful? Show some love and share the original tweet 🙏

---

Previous	Next
How to Style an ElevatedButton in Flutter	Responsive Flutter card layout with SizedBox & Center