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

Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Curso Avanzado de Flutter

Curso Avanzado de Flutter

Anahí Salgado Díaz de la Vega

Anahí Salgado Díaz de la Vega

Creación de Pantalla de Login con Flutter

12/58
Recursos

Aquí puedes ver el repositorio.

Aportes 14

Preguntas 4

Ordenar por:

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

Para crear StatefulWidgets en Android Studio es más rápido hacerlo escribiendo: stful. Igual para el caso de StatelessWidget hacerlo escribiendo: stless

Para los que tuvieron el problema de que el GradientBack no ocupaba todo el height de la pantalla, pueden intentar con:

GradientBack("", MediaQuery.of(context).size.height),

A mi me encanta trabajar con Visual Studio Code y el hot reload que es simplemente genial.

Dato curioso que ahorra tiempo si ponen después de importar el material.dart “st” les sale si quieren que les aparezca un statefull o un stateless les ahorra tiempo.

Hay que hacer una actualizacion del curso…
dure como 4 horas corrigiendo widgets y funciones que ya estan obsoletos!!

todavia tengo mas pero ya los deje porque pude lanzar la app!

Ann es una experta pero lástima que ya no está

Mas atajos en flutter y sobre todo la utilidad del Alt+Enter

Una mejor aproximación para el GradientBackground es desacoplando las cabeceras con el titulo.

class GradientBackground extends StatelessWidget {
  Widget child = Container();
  double height;
  GradientBackground({@required this.child, this.height });

  @override
  Widget build(BuildContext context) {
    return Container(
      height: height,
      decoration: BoxDecoration(
        gradient: LinearGradient(
          colors: [
            Color(0xFF4268D3),
            Color(0xFF584CD1),
          ],
          begin: FractionalOffset(0.2, 0.0),
          end: FractionalOffset(1.0, 0.6),
          stops: [0.0, 0.6],
          tileMode: TileMode.clamp,
        ),
      ),
      child: child
    );
  }
}

Y creando otro Widget que sea TitleHeader y se pase por el atributo child

GradientBackground(
          child: TitleHeader(
            title: "Popular",
            alignment: Alignment(-0.9, -0.6),
          ),
          height: 250,
        ),```


Algo importante que pueden hacer es utilizar media query para las medidas en la aplicación y las guardan en una variable:

Documentación
MediaQuery class - Flutter API Docs

Video
MediaQuery (Flutter Widget of the Week)

ya que están hablando de atajos para buscar un archivo pueden usar: “control + n” 😃

Genial

Para los que tocan el tema de los atajos: En VSCode creas un stateless widget tipeando algo como ‘stls’ (Ojo, esto después de importar la librería de material), y en el tooltip que se te despliega seleccionas ‘Stateless Widget’. El mismo procedimiento para un stateful, sólo que escribes algo como ‘stf’. 😃

Además puedes importar tus librerías / dependencias faltantes usando el atajo Ctrl + . (Control + Punto).

De hecho, pienso que es muy interesante usar este último atajo después de que escribes los widgets que necesitas en tu screen o widget, ya que así te aseguras de que usarás el import correspondiente (Y, de paso, te evitas tener que escribir el import manual).

Además, una pequeña sugerencia de cómo pueden centrar el titulo de la pantalla de login:

Widget signInGoogleUI() {
    return Scaffold(
      body: Stack(
        alignment: Alignment.center,
        children: <Widget>[
          GradientBack("", null),
          Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(
                'Welcome\nThis is your Travel App.',
                style: TextStyle(
                  fontSize: 37.0,
                  fontFamily: 'Lato',
                  color: Colors.white,
                  fontWeight: FontWeight.bold,
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }

Un atajo para el “import ‘package:flutter/material.dart’” en VSCode es importm. (No sé si funcione en android Studio).

Podriamos usar el MediaQuery.of(context).size.height para obtener el tamaño de cada pantalla tambien