• About WordPress
    • WordPress.org
    • Documentation
    • Support
    • Feedback
  • Log In
  • Register
  • Home
  • Courses
  • Past Paper
  • FYP
  • Interview Questions
  • University Events
  • Contact
  • Quiz & Assignment
Cuitutorial
  • Home
  • Courses
  • Past Paper
  • FYP
  • Interview Questions
  • University Events
  • Contact
  • Quiz & Assignment

Mobile Application Development

Home » Blog » Text field validation in flutter

Text field validation in flutter

  • Posted by saqib
  • Categories Mobile Application Development
  • Date November 2, 2022
  • Comments 0 comment

Text field validation in flutter

The most crucial thing to accomplish before submitting the text written by the user and informing them of an error message if mistakenly filled by the user is to verify the input.

Textfield Name Validation

We will validate if the user has entered a valid name by checking the length of the name entered by the user.

final _formKey = GlobalKey<FormState>();

final TextEditingController _nameController = new TextEditingController();

Form(

key: _formKey,

child:Column(

crossAxisAlignment: CrossAxisAlignment.start,

children: <Widget>[

Padding(

padding: const EdgeInsets.only(top: 5,bottom: 5),

child: Card(elevation: 3,

child: TextFormField(

controller: _nameController,

decoration: InputDecoration(

border: OutlineInputBorder(),

labelText: ‘Enter Name’,

),

keyboardType: TextInputType.text,

validator: validateName,

),

),

)

]

)

)

String? validateName(String? value) {

if (value!.length < 3)

return ‘Name must be more than 2 charater’;

else

return null;

}

void _submit() {

if (_formKey.currentState!.validate()) {

// TODO SAVE DATA

}

}

Textfield Phone Validation

We can check if the user has entered valid digits while entering the phone number.

final _formKey = GlobalKey<FormState>();

final TextEditingController _phoneNumberController = new TextEditingController();

Form(

key: _formKey,

child:Column(

crossAxisAlignment: CrossAxisAlignment.start,

children: <Widget>[

Padding(

padding: const EdgeInsets.only(top: 5,bottom: 5),

child: Card(elevation: 3,

child: TextFormField(

controller: _nameController,

decoration: InputDecoration(

border: OutlineInputBorder(),

labelText: ‘Enter Phone Number’,

),

keyboardType: TextInputType.phone,

validator: validateMobile,

),

),

)

]

)

)

String? validateMobile(String? value) {

// Indian Mobile number are of 10 digit only

if (value!.length != 10)

return ‘Mobile Number must be of 10 digit’;

else

return null;

}

void _submit() {

if (_formKey.currentState!.validate()) {

// TODO SAVE DATA

}

}

Textfield Email Validation

For checking email validation in flutter we will use the regex expression string.

final _formKey = GlobalKey<FormState>();

final TextEditingController _emailController = new TextEditingController();

Form(

key: _formKey,

child:Column(

crossAxisAlignment: CrossAxisAlignment.start,

children: <Widget>[

Padding(

padding: const EdgeInsets.only(top: 5,bottom: 5),

child: Card(elevation: 3,

child: TextFormField(

controller: _emailController,

decoration: InputDecoration(

border: OutlineInputBorder(),

labelText: ‘Enter Email Address’,

),

keyboardType: TextInputType.emailAddress,

validator: validateEmail,

),

),

),

]

)

)

String? validateEmail(String? value) {

String pattern =

r’^(([^<>()[\]\\.,;:\s@\”]+(\.[^<>()[\]\\.,;:\s@\”]+)*)|(\”.+\”))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$’;

RegExp regex = RegExp(pattern);

if (!regex.hasMatch(value!))

return ‘Enter Valid Email’;

else

return null;

}

void _submit() {

if (_formKey.currentState!.validate()) {

// TODO SAVE DATA

}

}

For Validating Textfield we will use two validating method

Flutter Form Widget

Textfield Widget

import ‘package:flutter/material.dart’;

void main() {

runApp(const MyApp());

}

class MyApp extends StatelessWidget {

const MyApp({Key? key}) : super(key: key);

// This widget is the root of your application.

@override

Widget build(BuildContext context) {

return MaterialApp(

title: ‘Flutter Demo’,

theme: ThemeData(

primarySwatch: Colors.blue,

),

home: const MyHomePage(title: ‘Flutter Demo Home Page’),

);

}

}

class MyHomePage extends StatefulWidget {

const MyHomePage({Key? key, required this.title}) : super(key: key);

final String title;

@override

State<MyHomePage> createState() => _MyHomePageState();

}

class _MyHomePageState extends State<MyHomePage> {

final _formKey = GlobalKey<FormState>();

final TextEditingController _nameController = new TextEditingController();

final TextEditingController _phoneNumberController = new TextEditingController();

final TextEditingController _emailController = new TextEditingController();

void _submit() {

if (_formKey.currentState!.validate()) {

// TODO SAVE DATA

}

}

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(

title: Text(widget.title),

),

body: Center(

child: Form(

key: _formKey,

child: ListView(

children: <Widget>[

Padding(

padding: const EdgeInsets.only(top: 5,bottom: 5),

child: Card(elevation: 3,

child: TextFormField(

controller: _nameController,

decoration: InputDecoration(

border: OutlineInputBorder(),

labelText: ‘Enter Name’,

),

keyboardType: TextInputType.text,

validator: validateName,

),

),

),

Padding(

padding: const EdgeInsets.only(top: 5,bottom: 5),

child: Card(elevation: 3,

child: TextFormField(

controller: _phoneNumberController,

decoration: InputDecoration(

border: OutlineInputBorder(),

labelText: ‘Enter Phone Number’,

),

keyboardType: TextInputType.phone,

validator: validateMobile,

),

),

),

Padding(

padding: const EdgeInsets.only(top: 5,bottom: 5),

child: Card(elevation: 3,

child: TextFormField(

controller: _emailController,

decoration: InputDecoration(

border: OutlineInputBorder(),

labelText: ‘Enter Email Address’,

),

keyboardType: TextInputType.emailAddress,

validator: validateEmail,

),

),

),

],

),

),

),

floatingActionButton: FloatingActionButton(

onPressed: _submit,

tooltip: ‘Submit’,

child: const Icon(Icons.check),

), // This trailing comma makes auto-formatting nicer for build methods.

);

}

String? validateEmail(String? value) {

String pattern =

r’^(([^<>()[\]\\.,;:\s@\”]+(\.[^<>()[\]\\.,;:\s@\”]+)*)|(\”.+\”))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$’;

RegExp regex = RegExp(pattern);

if (!regex.hasMatch(value!))

return ‘Enter Valid Email’;

else

return null;

}

String? validateMobile(String? value) {

// Indian Mobile number are of 10 digit only

if (value!.length != 10)

return ‘Mobile Number must be of 10 digit’;

else

return null;

}

String? validateName(String? value) {

if (value!.length < 3)

return ‘Name must be more than 2 charater’;

else

return null;

}

}

  • Share:
author avatar
saqib

Previous post

Building adaptive apps in Flutter
November 2, 2022

Next post

Component Level Design
November 5, 2022

You may also like

Beautiful UI design in flutter
5 January, 2023

Beautiful UI design in flutter In project home page import velocity and put the previous lecture list with the following properties import ‘package:flutter/material.dart’; import ‘package:flutter/services.dart’; import ‘dart:convert’; import ‘package:flutter_catalog/models/catalog.dart’; import ‘package:flutter_catalog/widgets/drawer.dart’; import ‘package:flutter_catalog/widgets/item_widget.dart’; import ‘package:flutter_catalog/widgets/themes.dart’; import ‘package:velocity_x/velocity_x.dart’; class HomePage extends …

GridView GridTile in flutter
29 December, 2022

GridView GridTile in flutter A grid view is a graphical control element used to show items in the tabular form. In this section, we are going to learn how to render items in a grid view in the Flutter application GridView …

Json Mapping-Data Class Generator-ProgressIndicator
20 December, 2022

Json Mapping-Data Class Generator-Progress Indicator in Flutter if we have to get data in json formate than we first have to map the data in catalog.dart file like this import ‘dart:convert’; class CatalogModel { static List<Item> items; } class Item …

Leave A Reply Cancel reply

You must be logged in to post a comment.

admin@cuitutorial.com
Facebook-f Twitter Youtube Linkedin Instagram Stack-overflow Pinterest Github Quora Whatsapp
Courses
  • All Courses
  • Past Paper
  • Final year projects
  • Interview Questions
  • Contact
Important Pages
  • Privacy Policy
  • Terms of Service
  • Cookie Policy
Links
  • University Events
  • Team
Education & learning platform for All Computer science subjects
Final year projects
Past Paper
Interview questions
Programming, C/C++, Asp.net/MVC. Android, MySql, Jquery, Ajax, javascript, Php, Html5, Bootstrap4.
NTS, GAT, PPSC, FPSC

Copyright © 2021 | Cuitutorial