Hay muchas formas de enviar datos ingresados por el usuario en Flutter. Pero la forma más utilizada es usando TextFields . Pero hay un inconveniente en el uso de TextFields : requiere un controlador de cada campo de texto que cree en Flutter. Entonces para Superar hace uso de Formas. Los formularios en flutter no necesitan ningún controlador de texto para almacenar datos. Solo necesita 1 GlobalKey que se establece en FormState.
Nota: El siguiente código no tiene un botón de envío ya que no hay requisitos para ello aquí. Los lectores pueden agregar su propia funcionalidad al formulario y usar el siguiente código como plantilla.
Código fuente:
Dart
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: "FormValidation",
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
final GlobalKey<FormState> _formKey = GlobalKey();
String email = "";
String password = "";
void _submit() {
// you can write your
// own code according to
// whatever you want to submit;
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Form Validation"),
),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
children: <Widget>[
Form(
key: _formKey,
child: Column(
children: <Widget>[
TextFormField(
decoration: InputDecoration(labelText: 'E-Mail'),
keyboardType: TextInputType.emailAddress,
onFieldSubmitted: (value) {
setState(() {
email = value;
});
},
validator: (value) {
if (value.isEmpty || !value.contains('@')) {
return 'Invalid email!';
}
},
),
// this is where the
// input goes
TextFormField(
decoration: InputDecoration(labelText: 'password'),
keyboardType: TextInputType.visiblePassword,
obscureText: true,
validator: (value) {
if (value.isEmpty && value.length < 7) {
return 'Invalid password!';
}
},
onFieldSubmitted: (value) {
setState(() {
password = value;
});
},
),
RaisedButton(
onPressed: _submit,
child: Text("submit"),
),
],
),
),
// this is where
// the form field
// are defined
SizedBox(
height: 20,
),
Column(
children: <Widget>[
email.isEmpty ? Text("No data") : Text(email),
SizedBox(
height: 10,
),
password.isEmpty ? Text("No Data") : Text(password),
],
)
],
),
),
);
}
}
Producción:
El código fuente completo en:- https://github.com/codec-akash/FormData
Publicación traducida automáticamente
Artículo escrito por AkashDubey3 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA