Flutter Fix
No Result
View All Result
  • Login
  • Register
  • Media
    • Music
    • Video
    • Images
    • Gallery
  • Flutter Apps
    • Finance App
    • Weather App
    • Video App
    • Music App
    • Shopping App
    • World Clock
    • ECommerce
    • Mobile Web Browser
  • Menu
    • Buttons
    • App Bar
    • Floating Action Button
    • Toast
    • Tab Bar
    • Swipe
  • Components
    • Developers Point
    • Animations
    • Loading
    • Flutter Packages
    • WebView
  • Inputs
    • Forms
    • TextField
    • Toggle Button
    • Download
    • Widgets
  • Games
  • UI
    • Material Design
    • Card
    • Flutter Widgets
    • Neomorphism
    • Navigation
  • Navigation
  • Q&A
  • Dart
    • Flutter Methods
FORUM
ASK QUESTION
  • Media
    • Music
    • Video
    • Images
    • Gallery
  • Flutter Apps
    • Finance App
    • Weather App
    • Video App
    • Music App
    • Shopping App
    • World Clock
    • ECommerce
    • Mobile Web Browser
  • Menu
    • Buttons
    • App Bar
    • Floating Action Button
    • Toast
    • Tab Bar
    • Swipe
  • Components
    • Developers Point
    • Animations
    • Loading
    • Flutter Packages
    • WebView
  • Inputs
    • Forms
    • TextField
    • Toggle Button
    • Download
    • Widgets
  • Games
  • UI
    • Material Design
    • Card
    • Flutter Widgets
    • Neomorphism
    • Navigation
  • Navigation
  • Q&A
  • Dart
    • Flutter Methods
No Result
View All Result
Flutter Fix
No Result
View All Result
Home Flutter Widgets

How to use the Flutter Text Field and Input Widget

July 13, 2020
in Flutter Widgets, Material Design
5 min read
HOW TO USE THE FLUTTER TEXTFIELD

The Flutter Text Field is a very important part when it comes to creating a full application depending on the kind of App (textField).

RELATED FLUTTER RESOURCES

A Contextual Action/App Bar Implementation for Flutter

A Flutter App for Tracking Funds/Money – Budget Tracker

How To Add a Backdrop in Flutter (Material Design)

Many of us came from a web background where from the very beginning there were HTML <forms>s with <input>s and <select>s. All of these exist to enable the user to get data into web apps, an activity we can’t live without in mobile apps as well. Flutter provides widgets for entering data as we have on the Web, but then, they don’t work the same way. They take much more work to create and use. Sorry about that. But they are also safer and give us much more control. Part of the complication is that these widgets don’t maintain their own state; you have to do it manually. Another part of the complication is that input widgets are unaware of each other. In other words, they don’t play well together until you group them with a Form widget. We eventually need to focus on the Form widget. But before we do, let’s know how to create the TextField now.

ADVERTISEMENT

CAUTION: Input widgets are really tough to work with unless they are used within a StatefulWidget because, by nature, they change state.

Text Field

If all you have is a single textbox, you probably want a TextField widget. Here’s a simple example of the TextField widget with a Text label above it:

const Text('Search terms'),
TextField(
onChanged: (String val) => _searchTerm = val,
),

That onChanged property is an event handler that fires after every keystroke. It receives a single value – a String. This is the value that the user is typing. In the preceding example, we’re setting a local variable called _searchTerm to whatever the user types.
To provide an initial value with a TextField, you need the unnecessarily complex TextInputController:

TextEditingController _controller =
TextEditingController(text: "Initial value here");

Then tell your TextField about the controller

const Text('Search terms'),
TextField(
controller: _controller,
onChanged: (String val) => _searchTerm = val,
),

You can also use that _controller.text property to retrieve the value that the user is typing into the box. Did you notice the Text(‘Search terms’)? That is our lame attempt at putting a label above the TextField. There’s a much, much better way.

How to make Your TextField fancy

There’s a ton of options to make your TextField more useful – not infinite options, but lots. And they’re all available through the InputDecoration widget.

return TextField(
         controller: _emailController,
           decoration: InputDecoration(
           labelText: 'Email',
              hintText: '[email protected]',
         icon: Icon(Icons.contact_mail),
),
),

Below are some InputDecoration very helpful options

PROPERTYDESCRIPTION
labelTextAppears above the TextField. Tells the user what this TextField is for
hintTextLight ghost text inside the TextField. Disappears as the user begins typing
errorTextError message that appears below the TextField. Usually in red. It is set automatically by validation (covered later), but you can set it manually if you need to
prefixTextText in the TextField to the left of the stuff the user types in
suffixTextSame as prefixText but to the far right
prefixIconDraws one inside the TextField to the left
suffixIconSame as prefixIcon but to the far right
iconDraws an icon to the left of the entire TextField

QUICK TIP: To make it a password box, set obscureText property to true. As the user types, each character appears for a second and is replaced by a dot.

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

Want a special soft keyboard? No problem. Just use the keyboardType property.

return TextField(
keyboardType: TextInputType.number,
);

TextInputType.datetime

TextInputType.email. Note the @ sign

TextInputType.number

TextInputType.phone

Also, Take Note: If you want to limit the type of text that is allowed to be entered, you can do so with the TextInput’s inputFormatters property. It’s actually an array so you can combine one or more of…

  • BlacklistingTextInputFormatter – Forbids certain characters from being entered. They just don’t appear when the user types.
  • WhitelistingTextInputFormatter – Allows only these characters to be entered. Anything outside this list doesn’t appear.
  • LengthLimitingTextInputFormatter – Can’t type more than X characters.

Those first two will allow you to use regular expressions to specify patterns that you want (white list) or don’t want (blacklist). Here’s an example:

return TextField(
inputFormatters: [
WhitelistingTextInputFormatter(RegExp('[0-9 -]')),
LengthLimitingTextInputFormatter(16)
],
decoration: InputDecoration(
labelText: 'Credit Card',
),
);

In the WhitelistingTextInputFormatter, we’re only allowing numbers 0–9, a space, or a dash. Then the LengthLimitingTextInputFormatter is keeping to a max of 16 characters.

RelatedFlutter Resource

A Contextual Action/App Bar Implementation for Flutter
App Bar

A Contextual Action/App Bar Implementation for Flutter

August 19, 2020
A Flutter App for Tracking Funds/Money – Budget Tracker
Finance App

A Flutter App for Tracking Funds/Money – Budget Tracker

August 17, 2020
backdrops flutter
Material Design

How To Add a Backdrop in Flutter (Material Design)

August 6, 2020
fLUTTER ListView builder seperated
Flutter Widgets

Understanding The Flutter ListView Widget

August 3, 2020
Code Editor Package Flutter
Dart

How To Build A Code Editor App In Flutter with code_editor Plugin

August 3, 2020
Flutter Form & FormField Widget - Implementation & Example
Flutter Packages

Flutter Form & FormField Widget – Implementation & Example

July 30, 2020
Next Post
flutter radio button

How to Create a Radio Button Easily in Flutter

Flutter Tab Bar

How to Create a Tab Bar/Tab Controller/Bottom TabBar in Flutter

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Recommended Stories

How To Record Audio Mp3 using Native API in Flutter

How To Record Audio Mp3 using Native API in Flutter

September 2, 2020
How to Create a Dotted Line View with flutter

How to Create a Dotted Line View with flutter

August 16, 2020

How to remove debug banner in flutter on android emulator?

August 8, 2020

Popular Stories

  • FLUTTER-FUTUER-APP-DEVELOPMENT

    Why Google Flutter Is the Future of Mobile App Development

    0 shares
    Share 0 Tweet 0
  • Container Widget & Box Model in Flutter – All You Need To Know

    0 shares
    Share 0 Tweet 0
  • Flutter Future, Await, and Async – All You Need To Know

    0 shares
    Share 0 Tweet 0
  • Create a Beautiful & Customized Tab/Toggle in Flutter

    0 shares
    Share 0 Tweet 0
  • Flutter Form & FormField Widget – Implementation & Example

    0 shares
    Share 0 Tweet 0
  • HOME
  • ABOUT US
  • CONTACT US
  • DMCA
  • TERMS & CONDITIONS
  • PRIVACY POLICY
Call us: +234 705 505 5426

© 2020 FlutterFix - Best Flutter Tool, Library, Source Code, Forum and Tutorials FlutterFix.

No Result
View All Result
  • Media
    • Music
    • Video
    • Images
    • Gallery
  • Flutter Apps
    • Finance App
    • Weather App
    • Video App
    • Music App
    • Shopping App
    • World Clock
    • ECommerce
    • Mobile Web Browser
  • Menu
    • Buttons
    • App Bar
    • Floating Action Button
    • Toast
    • Tab Bar
    • Swipe
  • Components
    • Developers Point
    • Animations
    • Loading
    • Flutter Packages
    • WebView
  • Inputs
    • Forms
    • TextField
    • Toggle Button
    • Download
    • Widgets
  • Games
  • UI
    • Material Design
    • Card
    • Flutter Widgets
    • Neomorphism
    • Navigation
  • Navigation
  • Q&A
  • Dart
    • Flutter Methods

© 2020 FlutterFix - Best Flutter Tool, Library, Source Code, Forum and Tutorials FlutterFix.

Welcome Back!

Login to your account below

Forgotten Password? Sign Up

Create New Account!

Fill the forms bellow to register

All fields are required. Log In

Retrieve your password

Please enter your username or email address to reset your password.

Log In