TextField basics in Flutter Dart

In this blog post we are going to see the basic essential properties available in TextField and code snippets to use in any of the Flutter project.

Most used property in TextField are

  1. style – propety used to customise text type, size, color/opacity and customising labelText content in TextField.
  2. decorationof class InputDecoration – property used to decorate border, labels and icons in a text field.

TextField with InputDecoration

The hintText property represents the placeholder value and labelText will be used as title above the text field when user start focusing on it. For protected data entry we need to make obscureText propert to true which can be used for password data entry.

Basic TextField
User Name TextField
TextField(
decoration: InputDecoration(
hintText: 'User Name',
labelText: 'User Name',
),
),

Password TextField
TextField(
obscureText: true,
decoration: InputDecoration(
hintText: 'Password',
labelText: 'Password',
),
),

TextField with padding

This padding widget can be used for all widgets in Flutter SDK. EdgeInsets is where we set the constraint for the TextField which works similar to autolayout used in iOS UIKit framwork.

Padding(
padding: EdgeInsets.only(top: 40, left: 30, right: 30),
child: TextField(
decoration: InputDecoration(
hintText: 'User Name',
),
),
),

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.