Menu

1 / 2

Most Flutter Beginners Use TextField Wrong - Here's the Right Way

DEV Community: dart·Flutter Sensei·5 months ago
#zguUczOQ
#dev#textfield#flutter#enter#photo
Reading 0:00
15s threshold

If you're building Flutter apps, you'll spend a lot of time working with user input.

Whether it's a login form, signup page, search bar, or profile screen, you'll almost always use a TextField .

Creating Your First TextField

The simplest TextField looks like this:

TextField ()

Enter fullscreen mode

Exit fullscreen mode

Most apps add a placeholder to help users understand what information is expected.

TextField ( decoration: InputDecoration ( hintText: 'Enter your name' , ), )

Enter fullscreen mode

Exit fullscreen mode

Reading User Input

You can listen for changes using the onChanged callback.

TextField ( onChanged: ( value ) { print ( value ); }, )

Enter fullscreen mode

Exit fullscreen mode

Flutter will call this function every time the user types.

Getting Text Later

For forms, you'll usually want to access the value when the user taps a button.

That's where TextEditingController comes in.

final TextEditingController nameController = TextEditingController ();

TextField ( controller:…

Continue reading — create a free account

Join HashtagPLUS to read full articles, follow hashtags, vote, and join the conversation.