29/4/2020 Formularios en Flutter en Curso Avanzado de Flutter

4.471 pts Menú

 Curso Avanzado de Flutter

35
Artículo
Formularios en Flutter
camilabs  27 de Mayo de 2019

36

37
Acabamos de ver una forma de trabajar con formularios haciendo que todos los elementos
vivan independientemente, este comportamiento funciona cuando tenemos pocos elementos
38 que componen el formulario, como es en nuestro caso.

39 Pero cuando tienes formularios de registro u otros cuya cantidad de campos ya oscila entre los
5 o más es momento de usar un Widget especializado llamado Form .
40

La composición de este Widget es la siguiente:

41

42
Form(
key:
child:
43 );
)
44

   Acceso a la cámara en Flutter

https://platzi.com/clases/1603-flutter-avanzado/20594-formularios-en-flutter/ 1/8
29/4/2020 Formularios en Flutter en Curso Avanzado de Flutter

El primer parámetro key nos indicará el identi cador del form, para esto podemos usar un
objeto de tipo GlobalKey que además de fungir como un identi cador único del formulario nos
ayudará también a validarlo.

Podemos declararlo así:

GlobalKey _formKey = GlobalKey();

Form(
key: _formKey
child:
);
)

Como vimos en clases anteriores los campos de texto se crearán a partir del Widget
TextFormField , este tendrá un estilo natural de Material Design lo que signi ca que está
preparado para mostrarnos el input en ciertas tonalidades al ser validado. Estos campos
estarán presentes en la propiedad child del Form de esta forma:

GlobalKey _formKey = GlobalKey();

Form(
key: _formKey,
child: TextFormField()
);
)

   Acceso a la cámara en Flutter

https://platzi.com/clases/1603-flutter-avanzado/20594-formularios-en-flutter/ 2/8
29/4/2020 Formularios en Flutter en Curso Avanzado de Flutter

Ya que estamos hablando de validaciones veamos cómo podemos generarlas.

Para que el TextFormField pueda tener una validación personalizada podemos asignarla a
partir de su propiedad validator como se muestra a continuación:

TextFormField(
validator: (value) {
if (value.isEmpty) {
return 'Por favor ingresa tu nombre';
}
},
);

Ahora pasemos al botón de submit o enviar datos. Este botón no debe recaer la
responsabilidad de validar cada dato sino simplemente veri car que cada dato cumplió con su
validación especi cada. Un botón de submit podría verse así:

RaisedButton(
onPressed: _validateInputs,
child: Text('Validate'),
)

void _validateInputs() {
if (_formKey.currentState.validate()) {

}
}

   Acceso a la cámara en Flutter

https://platzi.com/clases/1603-flutter-avanzado/20594-formularios-en-flutter/ 3/8
29/4/2020 Formularios en Flutter en Curso Avanzado de Flutter

Como observas estamos usando el identi cador del form que contiene todos los campos para
veri car si todas las validaciones pasaron. Si todo se cumple entonces ya podemos ejecutar la
siguiente fase que tengas pensada en el formulario.

Dada la naturaleza el input cuando abramos la ventana los campos estarán vacíos por lo tanto
aparecerán todos marcados según la validación que estemos haciendo. Hay una forma de hacer
que los campos a pesar de estar vacíos no aparezcan resaltados y esto es usando la propiedad
autovalidate del Form como se muestra a continuación:

bool _autoValidate = false;

Form(
key: _formKey,
autovalidate: _autoValidate,
child: TextFormField(
validator: (value) {
if (value.isEmpty) {
return 'Por favor ingresa tu nombre';
}
},
)
);
)

De esta forma ponemos por defecto en falso que los elementos contenidos en el formulario no
se acentúen la primera vez pero, debemo cambiarlo a true una vez el botón submit veri que
las validaciones para que, en caso de que no pasen el formulario esté habilitado para resaltar
   Acceso a la cámara en Flutter
los elementos que no cumplan la validación.
https://platzi.com/clases/1603-flutter-avanzado/20594-formularios-en-flutter/ 4/8
29/4/2020 Formularios en Flutter en Curso Avanzado de Flutter

RaisedButton(
onPressed: _validateInputs,
child: Text('Validate'),
)

void _validateInputs() {
if (_formKey.currentState.validate()) {

} else {
setState(() {
_autoValidate = true;
});
}
}

Ahora, si queremos recuperar los datos ingresados en cualquier campo basta con llamar al
método onSave(String val){} .

//Campo de Texto
TextFormField(
validator: validateName,
onSaved: (String val) {
_name = val;
}
)

//Email
TextFormField(
keyboardType: TextInputType.emailAddress,
validator: validateEmail,
onSaved: (String val) {    Acceso a la cámara en Flutter
_email = val;
https://platzi.com/clases/1603-flutter-avanzado/20594-formularios-en-flutter/ 5/8
29/4/2020 Formularios en Flutter en Curso Avanzado de Flutter

},
),

//Phone
TextFormField(
keyboardType: TextInputType.phone,
validator: validateMobile,
onSaved: (String val) {
_mobile = val;
},
)

//Switch estilo Cupertino iOS

SwitchListTile(
title: Text('Accept Terms'),
value: false,
onChanged: (bool val) {
_terms = val;
}
)

//Checkbox Material Design Android

CheckboxListTile(
title: Text('Accept Terms'),
value: false,
onChanged: (val) {
_terms = val
}
)

Y por último para generar consistencia debemos poner _formKey.currentState.save(); en el

botón submit de la siguiente forma:    Acceso a la cámara en Flutter

https://platzi.com/clases/1603-flutter-avanzado/20594-formularios-en-flutter/ 6/8
29/4/2020 Formularios en Flutter en Curso Avanzado de Flutter

RaisedButton(
onPressed: _validateInputs,
child: Text('Validate'),
)

void _validateInputs() {
if (_formKey.currentState.validate()) {
_formKey.currentState.save();
} else {
setState(() {
_autoValidate = true;
});
}
}

Escribe aquí tu pregunta +2 

Bob Estudiante · hace 21 días

Dos preguntas:
1.¿Cómo metemos todos los TextFormField al widget FORM?
2. Ya sabemos como guardar en variables los valores de los inputs cuando se llama al método save del FORM, pero
¿Cómo accedemos luego a esas variables?
Gracias.
Saludos

 1 

Javier Batres Estudiante · hace 11 meses

Si no tienen casos de uso muy particulares en los formularios de la aplicación, entiendase tanto de lógica como de
  Acceso a la cámara en Flutter
rápido.
vista. Pueden usar la libreria utter form builder para crear un formulario y vlaidarlo

https://platzi.com/clases/1603-flutter-avanzado/20594-formularios-en-flutter/ 7/8