Arquitectura de Aplicaciones

1

Pasos para aprender Flutter Avanzado

2

¿Qué es una Arquitectura de software?

3

Tipos de Arquitecturas para Flutter

4

Arquitectura BLoC en Flutter

5

BLoC + Clean Architecture en Flutter

6

Estructurando nuestro proyecto utilizando la Arquitectura BLoC

7

Haciendo BLoC Singleton en Flutter

8

Aplicando Providers al Proyecto

Firebase y Flutter

9

Integrando Firebase Authentication, Cloud Firestore y Firebase Storage al proyecto

10

Integrando Firebase a Flutter para Android

11

Integrando Firebase a Flutter para iOS

12

Creación de Pantalla de Login con Flutter

13

Creando botones reutilizables en Flutter

14

Autenticación de Firebase con Google

15

Implementando Firebase Authentication en BLoC Pattern

16

Streams en Flutter

17

Manejando una sesión con Firebase Authentication y Flutter

18

Implementando Google SignOut en BLoC

19

Implementando Google SignOut en View

20

Monitoreando y validando la conexión al Sign con Google

21

Mostrando los datos de usuario de Google en la interfaz en Flutter

Cloud Firestore de Firebase en Flutter

22

¿Qué es Cloud Firestore de Firebase?

23

Analizando un modelo de datos no relacional

24

Creando un Modelo de datos en Cloud Firestore

25

Enviando datos a Cloud Firestore

26

Creando un Widget gradiente personalizado

27

Manejo de Desbordamiendo de Texto de Widget Text

28

Botón de Back en un Appbar en Flutter

29

Navegación entre pantallas en Flutter

30

Widget Text Appbar personalizado en Flutter

31

Widget TextField personalizado en Flutter

32

Creando una Safe Area para una interfaz que tiene un AppBar

33

Widget TextField con iconos en Flutter

34

Retocando el CardView

35

Mostrando imágenes en un CardView

36

Creando un botón de Submit en Flutter

37

Envío de datos de un fórmulario en Flutter

38

Subiendo datos a Firestore de Firebase

39

Formularios en Flutter

Acceso al Hardware con Flutter

40

Acceso a la cámara en Flutter

41

Librerías de acceso a Hardware en Flutter

Firebase Storage en Flutter

42

Qué es y cómo funciona Firebase Storage en Flutter

43

Subiendo una imagen a Firebase Storage desde Flutter

Querys avanzados en Cloud Firestore de Firebase en Flutter

44

Manejo de imágenes en Cloud Firestore

45

Cloud Firestore insertando referencias y arrays en la base de datos

46

Descargar imágenes de Firebase Storage y mostrarlas en Flutter

47

Procesando datos con BLoC Pattern

48

Trayendo datos de Cloud Firestore

49

Persistiendo datos de un usuario logueado

50

Aplicando Filtros en Cloud Firestore

51

Construyendo los Places en la pantalla de Home

52

Mostrando los Places en la pantalla de Home

53

Actualizando datos en tiempo real

54

Manejando la lógica de likes, como botón toggle.

55

Insertando y obteniendo referencias en datos de Firestore.

56

Usando el caché para cargar imágenes más rápido

57

StreamController, sink, add y StreamBuilder

Conclusiones

58

Conclusiones

Curso Avanzado de Flutter

Curso Avanzado de Flutter

Camila Barajas Salej

Camila Barajas Salej

Formularios en Flutter

39/58

Lectura

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

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.

La composición de este Widget es la siguiente:

Form(
    key: 
    child:
    );
)

El primer parámetro key nos indicará el identificador del form, para esto podemos usar un objeto de tipo GlobalKey que además de fungir como un identificador ú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 significa 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()
    );
)

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 verificar que cada dato cumplió con su validación especificada. Un botón de submit podría verse así:

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

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

    }       
}

Como observas estamos usando el identificador del form que contiene todos los campos para verificar 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 verifique las validaciones para que, en caso de que no pasen el formulario esté habilitado para resaltar los elementos que no cumplan la validación.

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) {
        _email = val;
    },
),

//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:

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

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

Aportes 3

Preguntas 0

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

Si no tienen casos de uso muy particulares en los formularios de la aplicación, entiendase tanto de lógica como de vista. Pueden usar la libreria flutter form builder para crear un formulario y vlaidarlo rápido.

Bastante interesante la lectura, seria bueno tener un ejemplo de un caso de uso dónde se indique el uso del Widget.Form, para así poder comprender mejor el uso del mismo.

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