Flutter Text Field Widget and Its Properties

You are currently viewing Flutter Text Field Widget and Its Properties
Flutter Text Field

Flutter Text Field Widget

Text Field in Flutter is a very important widget of a flutter from which we can collect input from the user, this is the EditText field for Android.
Users can enter text either from the hardware keyboard or onscreen keyboard.
TextFiled onChanged callback gives us what has been changed in the input field and we can do validation according to that value.
onSubmitted callback is used to get value when we are done with entering text.
Basic Syntax: You can make a simple TextFiled using the below Syntax.

TextField()

Properties

Let’s understand the most important properties of TextFiled Widget.

Decoration

Decoration properties allow you to design TextField widget. With the help of this property, you can set icon, hover color,  border Radius, labelText, hint, etc. see below code of lines for understanding this property.

TextField(
   decoration: InputDecoration(
     border: OutlineInputBorder(
       borderRadius: BorderRadius.all(Radius.circular(15)),),
     hoverColor: Colors.blueAccent,
     hintText: 'Enter User Name',
     prefixIcon: Icon(Icons.account_circle),
     labelText: 'User Name',),
)

TextAlign

This property helps you to align the text in TextField Widget. You can do it either on left, right, or center as you want. Check the below code for this property.

TextField(
   decoration: InputDecoration(
     border: OutlineInputBorder(
       borderRadius: BorderRadius.all(Radius.circular(15)),),
     hoverColor: Colors.blueAccent,
     prefixIcon: Icon(Icons.account_circle),
     labelText: 'Enter User Name',),
 textAlign: TextAlign.center,
)

ObscureText

If you want to make your textfield as a password field so you can use this property and make this property’s value true. Check the below syntax for this.

TextField(
   decoration: InputDecoration(
     border: OutlineInputBorder(
       borderRadius: BorderRadius.all(Radius.circular(15)),),
     hoverColor: Colors.blueAccent,
     hintText: 'Enter Password',),
     labelText: 'Password',),
 textAlign: TextAlign.left,
 obscureText: true,
)

keyboardType

This property is used for input type, like which keyboard you want to open when the cursor goes on the text field, number, text, datetime, url, etc. Check the below code for this property.

TextField(
   decoration: InputDecoration(
     border: OutlineInputBorder(
       borderRadius: BorderRadius.all(Radius.circular(15)),),
     hoverColor: Colors.blueAccent,
     hintText: 'Enter Your Number',
     prefixIcon: Icon(Icons.phone),
     labelText: 'Your Number',),
 textAlign: TextAlign.left,
 keyboardType: TextInputType.number,
)

Style

With the help of this property, you can set the style of the text. You can define TextStyle using this property, like fontSize, fontWeight, fontFamily, color, wordSpacing, backgroundColor, height, background, etc. understand it through the below code snippet.

TextField(
   decoration: InputDecoration(
     border: OutlineInputBorder(
       borderRadius: BorderRadius.all(Radius.circular(15)),),
     hoverColor: Colors.blueAccent,
     hintText: 'Enter Your Username',
     prefixIcon: Icon(Icons.account_circle),
     labelText: 'Username',),
 textAlign: TextAlign.left,
 keyboardType: TextInputType.text,
 style: TextStyle(
     color: Colors.black,
     fontSize: 12.0,
     fontStyle: FontStyle.italic),
)

minLines

With the help of this property, you can set minimum lines of the text widget. Check the below code for this.

TextField(
   decoration: InputDecoration(
     border: OutlineInputBorder(
       borderRadius: BorderRadius.all(Radius.circular(15)),),
     hoverColor: Colors.blueAccent,
     hintText: 'Enter Your Username',
     prefixIcon: Icon(Icons.account_circle),
     labelText: 'Username',),
 textAlign: TextAlign.left,
 keyboardType: TextInputType.text,
 minLines: 1,
 style: TextStyle(
     color: Colors.black,
     fontSize: 12.0,
     fontStyle: FontStyle.italic),
)

maxLines

You can set maximum lines for the text field with the help of this widget. Check the below code.

TextField(
   decoration: InputDecoration(
     border: OutlineInputBorder(
       borderRadius: BorderRadius.all(Radius.circular(15)),),
     hoverColor: Colors.blueAccent,
     hintText: 'Enter Your Username',
     prefixIcon: Icon(Icons.account_circle),
     labelText: 'Username',),
 textAlign: TextAlign.left,
 keyboardType: TextInputType.text,
 minLines: 1,
 maxLines: 1,
 style: TextStyle(
     color: Colors.black,
     fontSize: 12.0,
     fontStyle: FontStyle.italic),
)

maxLength

The maximum length you can define with this property, suppose you just want an 8 character password field, so you can set maxLength 8, as below code.

TextField(
   decoration: InputDecoration(
     border: OutlineInputBorder(
       borderRadius: BorderRadius.all(Radius.circular(15)),),
     hoverColor: Colors.blueAccent,
     hintText: 'Enter Your Username',
     prefixIcon: Icon(Icons.account_circle),
     labelText: 'Username',),
 textAlign: TextAlign.left,
 keyboardType: TextInputType.text,
 maxLength: 8,
 style: TextStyle(
     color: Colors.black,
     fontSize: 12.0,
     fontStyle: FontStyle.italic),
)

Controller

This is a very important property of TextField Widget, with the help of the controller you can get input data of TextField on click of any event or anywhere on the page. You need to define the controller as a global variable. 
You will understand this property in complete code.

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main() {
 runApp(MyApp());
}

class MyApp extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
   return MaterialApp(
     theme: ThemeData(
       primarySwatch: Colors.blue,
     ),
     home: MyHomePage(),
   );
 }
}

class MyHomePage extends StatefulWidget {
 @override
 _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
 TextEditingController _usernameController = new TextEditingController();

 @override
 Widget build(BuildContext context) {
   return Scaffold(
       appBar: AppBar(
         title: Text(
           'Example of TextField',
           style: TextStyle(fontSize: 15.0),
         ),
       ),
       body: Container(
           alignment: Alignment.center,
           padding: EdgeInsets.all(10.0),
           child: TextField(
               controller: _usernameController,
               decoration: InputDecoration(
                 border: OutlineInputBorder(
                   borderRadius: BorderRadius.all(Radius.circular(15)),
                 ),
                 hoverColor: Colors.blueAccent,
                 hintText: 'Enter Your Username',
                 prefixIcon: Icon(Icons.account_circle),
                 labelText: 'Username',
               ),
               textAlign: TextAlign.left,
               keyboardType: TextInputType.text,
               maxLength: 15,
               style: TextStyle(
                   color: Colors.black,
                   fontSize: 12.0,
                   fontStyle: FontStyle.italic),
               onSubmitted: (value) {
                 getData();
               })));
 }

 getData() {
   String strUserName = _usernameController.text;
   print('Your UserName $strUserName');
 }
}

Here _usernameController is used to control text field input data.  I have also used onSubmitted callback, which is used for getting value when we click on the keyboard.

See also  Flutter Listview and Flutter Horizontal Listview

When you run this example, you will find the print in the console and get the output like the below Image.

Output

Flutter Text Field
Flutter Text Field

I hope this will help you with your project. 
Visit  https://flutter4u.com/  for getting many advanced-level projects, which may help you for your ongoing project.
For different types of TextFields, You can visit the directly below link.
https://www.flutter4u.com/category/inputfields/textfield/

Spread the love
Tags: , , , ,

Leave a Reply