Validação de e-mail no Flutter
Antes de enviar a entrada do usuário para o servidor, a validação de e-mail é a melhor prática. Devemos verificar o endereço de e-mail para ver se é válido ou não e exibi-lo ao usuário. Para verificar o endereço de e-mail, podemos usar um padrão regEx, que é um pouco mais complexo de construir.
Em vez de usar o padrão regEx, podemos usar o pacote mais legal do pub.dev chamado email_validator para obter o mesmo resultado. Neste artigo, veremos o pacote email_validator.
Sobre email_validator:
Como mencionado anteriormente, esta é uma classe Dart simples para validar endereços de e-mail sem o uso de RegEx.
Adicionando dependência:
Para usar este pacote, devemos primeiro adicioná-lo ao arquivo pubspec.yaml e depois executar pug get.
Versão 2.1.17 (https://pub.dev/packages/email_validator)
Pacote de importação:
Podemos usá-lo em nosso código Dart após instalar o pacote.
import 'package:email_validator/email_validator.dart';
Validando o endereço de email com email_validator :
O método estático validate() na classe EmailValidator será usado para validar o endereço de email. Ele retorna um valor bool; se o endereço de e-mail for válido, o valor retornado será verdadeiro; caso contrário, o valor retornado é false.
static bool validate(String email,
[bool allowTopLevelDomains = false, bool allowInternational = true])Se observarmos o código acima, podemos ver que o método validate(…) possui três parâmetros. Dos três, devemos passar o endereço de e-mail como sting, e os outros dois são opcionais.
allowTopLevelDomains: Se [allowTopLevelDomains] estiver definido como ‘true’, o validador aceitará endereços com domínios de nível superior, como ‘email@example.com.’ O valor padrão é ‘false’.
allowInternational: Se [allowInternational] estiver definido como ‘true’, o validador validará o endereço de e-mail usando os padrões de e-mail internacionais mais recentes. O valor padrão é verdadeiro’.
const String email = 'fredrik.eilertsen@gail.com';
final bool isValid = EmailValidator.validate(email);
print('Email is valid? ' + (isValid ? 'yes' : 'no'));Basta passar o endereço de e-mail como uma string para validar(..), que retorna um valor booleano. Podemos atualizar a Ui com base nesse valor. O código acima mostra um exemplo simples de como usar o método validate(..).
Implementação de validação de e-mail na página de login
Na página de login, há dois campos de texto: um para endereço de e-mail e outro para senha. Usando o EmailValidator, adicionamos a verificação de email ao campo de email.
Crie um novo projeto Flutter, substitua o código abaixo e execute o aplicativo. Vamos conhecer mais sobre o conceito.
Nesta parte do projeto, vc adiciona a forma de validar o email.
validator: (value) {
if(value!.isEmpty){
return "Enter Email";
} else if(!EmailValidator.validate(value,true)) {
return "Enter Valid Email";
}
},Código completo.
import 'package:flutter/material.dart';
import 'package:email_validator/email_validator.dart';
class HomeScreen extends StatefulWidget {
const HomeScreen({ Key? key }) : super(key: key);
@override
State<HomeScreen> createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
final _formField = GlobalKey<FormState>();
final emailController = TextEditingController();
final passwordController = TextEditingController();
bool passToggle = true;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Form Sign'),
centerTitle: true,
),
body: SingleChildScrollView(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 60),
child: Form(
key: _formField,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image.asset(
"images/avatar.png",
height: 200,
width: 200,
),
const SizedBox(height: 30),
TextFormField(
keyboardType: TextInputType.emailAddress,
controller: emailController,
decoration: const InputDecoration(
labelText: "Email",
border: OutlineInputBorder(),
prefixIcon: Icon(Icons.email),
),
validator: (value) {
if(value!.isEmpty){
return "Enter Email";
} else if(!EmailValidator.validate(value,true)) {
return "Enter Valid Email";
}
},
),
const SizedBox(height: 20),
TextFormField(
keyboardType: TextInputType.emailAddress,
controller: passwordController,
obscureText: passToggle,
decoration: InputDecoration(
labelText: "Password",
border: const OutlineInputBorder(),
prefixIcon: const Icon(Icons.lock),
suffixIcon: InkWell(
onTap: () {
setState(() {
passToggle = !passToggle;
});
},
child: Icon(passToggle ? Icons.visibility : Icons.visibility_off),
),
),
validator: (value) {
if(value!.isEmpty){
return "Enter Password";
} else if (passwordController.text.length < 6) {
return "Password Length Showld be more than 6 characters";
}
},
),
const SizedBox(height: 60),
InkWell(
onTap: (){
if(_formField.currentState!.validate()){
print("Sucesso");
emailController.clear();
passwordController.clear();
}
},
child: Container(
height: 50,
decoration: BoxDecoration(
color: Colors.indigo,
borderRadius: BorderRadius.circular(5),
),
child: const Center(
child: Text("Log In", style: TextStyle(
color: Colors.white,
fontSize: 20,
fontWeight: FontWeight.bold
),),
),
),
),
const SizedBox(
height: 20,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Text("Already have a account?", style: TextStyle(
fontSize: 17
),
),
TextButton(child: const Text(
"Sing Up",
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold
)
),
onPressed: () {},
),
],
)
],
),
),
),
),
);
}
}Link do Github (https://github.com/caneto/flutterformvalidation2)
