TextField in Flutter is the Most Commonly Used


                A TextField or TextBox is an input element that holds alphanumeric data, such as designations, passwords, addresses, etc.

It is a GUI control element that enables the user to enter text information by utilizing a programmable code.

TextField in Flutter is the most commonly used text input widget that allows users to collect inputs from the keyboard into an app.

We can use the TextField widget in many ways: building forms, sending messages, creating search experiences, and many more.

By default, Flutter decorates the TextField with an underline. Using an InputDecoration as the decoration, we can also add several attributes to TextField, such as a label, icon, inline hint text, and error text.



Syntax



TextField (  

  decoration: InputDecoration(  

    border: InputBorder.none,  

    labelText: 'Enter Name',  

    hintText: 'Enter Your Name'  

  ),  

); 


Syntax

TextField(  

                    obscureText: true,  // This function is used to password hide and show.

                    decoration: InputDecoration(  

                      border: OutlineInputBorder(),  

                      labelText: 'Password',  

                      hintText: 'Enter Password',  

                    ),  

                  ),   


How to retrieve the value of a TextField?

Flutter allows the user to retrieve the text in mainly two ways: the first is the onChanged method, and the other is the controller method.

1)The onChanged method is the easiest way to retrieve the text field value.

 This method stores the current value in a simple variable and then uses it in the TextField widget.


Syntax

Ex String value = "";  

TextField(  

  onChanged: (text) {  

    value = text;  

  },  

) 


2)The TextEditingController method is a popular method to retrieve text field values using TextEditingController. 

It will be attached to the TextField widget and then listen to changes and control the widget's text value.

Ex TextEditingController mycontroller =TextEditingController();  

TextField(  

  controller: mycontroller,  

)



Comments

Post a Comment

Popular posts from this blog

Unlocking the Power of OOP: A Beginner's Guide to Objects, Encapsulation, Inheritance, Abstraction, and Polymorphism

Image
 OOPs (Object-Oriented Programming System) This article explains the fundamental concepts of OOP and its most significant advantages What is OOPs (Object Oriented Programming System)? Object-oriented programming System (OOPs) is defined as a programming paradigm (and not a specific language) built on the concept of objects, i.e., a set of data contained in fields, and code, indicating procedures – instead of the usual logic-based system. Key Concepts of OOP To understand and use object-oriented programming, it is necessary to know the following key concepts : 1. Class A class is a blueprint or template of an object. It is a user-defined data type. We define variables, constants, member functions, and other functionality inside a class. it binds data and functions together in a single unit. It does not consume memory at run time. Note that classes are not considered as a data structure. It is a logical entity. It is the best example of data binding. Note that a class can exist witho...
Read more

Mastering Hive in Flutter: A Complete Guide for Beginners to Advanced Users

Image
In this blog, we will dive deep into **Hive**, a lightweight and fast key-value database that is widely used for local storage in **Flutter** apps. Whether you're a beginner or someone looking to level up your Flutter skills, this guide will help you master **Hive** from basic to advanced usage. --- ### **What is Hive in Flutter?** **Hive** is a NoSQL database that allows you to store data locally on the device. Unlike other databases like SQLite, Hive is very fast, lightweight, and easy to integrate into any **Flutter** application. It supports **primitive data types** as well as **custom objects**, making it an ideal choice for Flutter developers looking to handle data storage efficiently. --- ### **Setting Up Hive in Flutter** Before you begin, make sure you have the required dependencies in your **`pubspec.yaml`** file. ```yaml dependencies:   flutter:     sdk: flutter   hive: ^2.0.4   hive_flutter: ^1.1.0   path_provider: ^2.0.1 ``` import 'package:flu...
Read more

How to Use SQLite in Flutter: A Step-by-Step Guide

Image
     When building mobile applications, data storage is crucial. One of the most common ways to store data locally on a device is through SQLite, a lightweight database. In this blog post, we will guide you through how to use SQLite in Flutter, enabling you to create efficient, offline-friendly apps. What is SQLite? SQLite is a popular database engine that's embedded into mobile devices. It's perfect for applications that need to store small to medium amounts of structured data locally. With SQLite in Flutter, you can easily save and retrieve data without an internet connection. Why Use SQLite in Flutter? Local storage : Store data on the user's device, ensuring accessibility even when offline. Lightweight : Efficient and fast for small to medium datasets. Easy to use : With the  sqflite  plugin, Flutter integrates smoothly with SQLite. Step 1: Add the Required Libraries To use SQLite in Flutter, you need to add the  sqflite  library, which provides SQ...
Read more