Form and TextFormField in Flutter

What is Form?

Flutter provides a Form widget to create a form in which we can get the data from users. The form is widget acts as a container for grouping and validating multiple form fields. the form can contain TextFormField, buttons, text, images, and many more.

When creating the form, provide a GlobalKey. This uniquely identifies the Form and allows validation of the form in a later step. Inside this class, we define a global key as _formKey. This key holds a FormState and can use to retrieve the form widget.

What is TextFormField ?

The form widget uses child widget TextFormField to provide the users to enter the text field. This widget renders a material design text field and also allows us to display validation errors when they occur. So, here we are creating an example of form validation with the use of TextFormField.

Now, let's start with an example we are doing step by step implementation for Form and TextFormField.

1. Create the Form widget with a global key.

Here we are creating a Form widget and column as a child widget. in the form, we will create a variable named _formKey type of GlobalKey<FormState> and set the global key in the given property Key in form.

2. Create TextFormField with validator property.

In this step, we are creating TextFormField for Email, Username, and Password. We are applying different types of validation in these three TextFormField.First is Email TextFormField in this we are validating if it contains "@" in the email id. The second is the username in this we are doing basic validation that isn't empty. In the third TextFormField, we are validating the Password in which we are giving the condition that the Password should be more than 6 characters.

3. Create a button to validate form fields and display validation errors.

In the last step in this, we are creating a button and on top of that, we are set the validations for TextFormField.For that we are creating one _submit() function and in that we are set the currentState like_formKey.currentState!.validate().After that we are going to save that state using _formKey.currentState!.save(). we are calling this function in ElevatedButton.

Whole Code

Comments

Flutter BottomNavigationBar

BottomNavigationBar A material widget that's displayed at the bottom of an application. Which shows around three to five items and it includes labels and icons. BottomNavigationBar allows you to select one item at a time and quickly navigate to a given page. Properties of the BottomNavigationBar : items: It defines the list of BottomNavigationBar Items to display the bottom navigation bar. currentIndex: It determines the current active bottom navigation bar item on the screen. onTap: It is called when we tapped one of the items on the screen. iconSize: It is used to specify the size of all bottom navigation item icons. fixedColor: It is used to set the color of the selected item. If we have not set a color to the icon or title, it will be shown. type: It determines the layout and behavior of a bottom navigation bar. It behaves in two different ways that are: 1. fixed: Default it is fixed and If it is null, it will use fixed. 2. shifting: It will use shifting where w...

MaterialApp and Scaffold in Flutter with Example

What is MaterialApp Material design is for Google Android material design which is used to create UI for Android.MaterialApp is a predefined class in a flutter that extends the Material Design class. It is likely the main or core component of flutter. We can access all the other components and widgets provided by Flutter SDK. It is a class that creates an instance of [WidgetsApp] . Text widget, AppBar widget, Scaffold widget, ListView widget, StatelessWidget, StatefulWidget, IconButton widget, TextField widget, and many more widgets that are accessed using MaterialApp class. For iOS, there is the Cupertino widgets class which I'll describe or discuss or explain in another article. What is Scaffold In Flutter Scaffold is a very useful and highly flexible class. Scaffold implements the basic material design layout structure. A Scaffold Widget provides a framework that implements the flutter app's basic material design visual layout structure. The developer can implement a wide...

Flutter TextField with Examples

Introduction to TextField 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 building forms, sending messages, creating search experiences, and many more. By default, Flutter decorated the TextField with an underline. We can also add several attributes with TextField, such as label, icon, inline hint text, and error text using an InputDecoration as the decoration. If we want to remove the decoration properties entirely, it is required to set the decoration to null. 1. decoration It is used to show the decoration around TextField.The most common attributes in decoration are as follows: border : It is used to create a default rounded rectangle border around TextField. labelText : It shows the label text on the selection of TextField. hintText : It shows the hint text inside TextField when there is no text entered. TextField( ...

Flutter | SimplexTechBiz

Search This Blog