Arquitectura de Aplicaciones

1

隆Renovaremos este curso! Te quedan unos d铆as para concluirlo.

2

Pasos para aprender Flutter Avanzado

3

驴Qu茅 es una Arquitectura de software?

4

Tipos de Arquitecturas para Flutter

5

Arquitectura BLoC en Flutter

6

BLoC + Clean Architecture en Flutter

7

Estructurando nuestro proyecto utilizando la Arquitectura BLoC

8

Haciendo BLoC Singleton en Flutter

9

Aplicando Providers al Proyecto

Firebase y Flutter

10

隆Renovaremos este curso! Te quedan unos d铆as para concluirlo.

11

Integrando Firebase Authentication, Cloud Firestore y Firebase Storage al proyecto

12

Integrando Firebase a Flutter para iOS

13

Integrando Firebase a Flutter para Android

14

Creaci贸n de Pantalla de Login con Flutter

15

Creando botones reutilizables en Flutter

16

Autenticaci贸n de Firebase con Google

17

隆Renovaremos este curso! Te quedan unos d铆as para concluirlo.

18

Implementando Firebase Authentication en BLoC Pattern

19

Streams en Flutter

20

Manejando una sesi贸n con Firebase Authentication y Flutter

21

Implementando Google SignOut en BLoC

22

Implementando Google SignOut en View

23

Monitoreando y validando la conexi贸n al Sign con Google

24

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

Cloud Firestore de Firebase en Flutter

25

隆Renovaremos este curso! Te quedan unos d铆as para concluirlo.

26

驴Qu茅 es Cloud Firestore de Firebase?

27

Analizando un modelo de datos no relacional

28

Creando un Modelo de datos en Cloud Firestore

29

Enviando datos a Cloud Firestore

30

Creando un Widget gradiente personalizado

31

Manejo de Desbordamiendo de Texto de Widget Text

32

Bot贸n de Back en un Appbar en Flutter

33

Navegaci贸n entre pantallas en Flutter

34

Widget Text Appbar personalizado en Flutter

35

隆Renovaremos este curso! Te quedan unos d铆as para concluirlo.

36

Widget TextField personalizado en Flutter

37

Creando una Safe Area para una interfaz que tiene un AppBar

38

Widget TextField con iconos en Flutter

39

Retocando el CardView

40

Mostrando im谩genes en un CardView

41

Creando un bot贸n de Submit en Flutter

42

Env铆o de datos de un f贸rmulario en Flutter

43

Subiendo datos a Firestore de Firebase

44

Formularios en Flutter

Acceso al Hardware con Flutter

45

隆Renovaremos este curso! Te quedan unos d铆as para concluirlo.

46

Acceso a la c谩mara en Flutter

47

Librer铆as de acceso a Hardware en Flutter

Firebase Storage en Flutter

48

隆Renovaremos este curso! Te quedan unos d铆as para concluirlo.

49

Qu茅 es y c贸mo funciona Firebase Storage en Flutter

50

Subiendo una imagen a Firebase Storage desde Flutter

Querys avanzados en Cloud Firestore de Firebase en Flutter

51

隆Renovaremos este curso! Te quedan unos d铆as para concluirlo.

52

Manejo de im谩genes en Cloud Firestore

53

Cloud Firestore insertando referencias y arrays en la base de datos

54

Descargar im谩genes de Firebase Storage y mostrarlas en Flutter

55

Procesando datos con BLoC Pattern

56

Trayendo datos de Cloud Firestore

57

Persistiendo datos de un usuario logueado

58

Aplicando Filtros en Cloud Firestore

59

隆Renovaremos este curso! Te quedan unos d铆as para concluirlo.

60

Construyendo los Places en la pantalla de Home

61

Mostrando los Places en la pantalla de Home

62

Actualizando datos en tiempo real

63

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

64

Insertando y obteniendo referencias en datos de Firestore.

65

Usando el cach茅 para cargar im谩genes m谩s r谩pido

66

StreamController, sink, add y StreamBuilder

Conclusiones

67

隆Renovaremos este curso! Te quedan unos d铆as para concluirlo.

68

Conclusiones

No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Curso Avanzado de Flutter

Curso Avanzado de Flutter

Anah铆 Salgado D铆az de la Vega

Anah铆 Salgado D铆az de la Vega

Creando botones reutilizables en Flutter

15/68
Recursos

Aqu铆 puedes ver el repositorio.

Aportes 26

Preguntas 3

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

A quien pueda interesar existe una dependencia de flutter llamada flutter_signin_button 0.5.2 que agrega botones muy similares a lo que estamos creando con iconos y respetan el dise帽o de google, twitter, facebook etc鈥

Tiene para agregar un metodo onTap como queremos aca con nuestro widget personalizado, es solo una opcion mas pero me parece muy buena para futuros proyectos

Hola, comparto la forma en que me quedo el constructor, ya que no me funcionaba de la forma en que esta en el video

ButtonGreen({required this.text, required this.onPressed, this.height = 0.0, this.width = 0.0});

As铆 me va quedando:


Buenas amigos ac谩 tiene una forma pr谩ctica de poner los botones de inicio de cesi贸n que quieran, la dependencia de flutter es flutter_auth_button ^0.9.0 (ultima versi贸n a la fecha):

Agregar la versi贸n que este disponible a la fecha en pubspec.yaml
Obtener packetes en 鈥済et pub鈥
importar la libreria: import 鈥榩ackage:flutter_auth_buttons/flutter_auth_buttons.dart鈥;
Agregar los botones dentro del children:
GoogleSignInButton(
onPressed: () {},
borderRadius: 10,
),
FacebookSignInButton(
onPressed: () {},
borderRadius: 10,
)```

Esta clase debe ir despu茅s de la clase 13 鈥淐reaci贸n de Pantalla de Login con Flutter鈥.

En una columna el MainAxisAlignment es alineado vertical y el CrossAxisAlignment el alineado horizontal. En el caso de las filas es viceversa.

Sera que cabellos de fuego no explicara alguna vez como implementar firebase ui auth?

El VoidCallback no retorna nada ni recibe par谩metros.
Si hay par谩metros se deber铆a usa Function

Ac谩 les dejo los colores por si alguien los necesita!

            colors: [
              Color(0xFFa7ff84), //arriba
              Color(0xFF1cbb78) //abajo
            ],

Miren banda, me qued贸 mamal贸n, s铆 o no raza??

Hola compa帽eros, para alinear el texto puedes usar:

textAlign: TextAlign.center

simplemente lo escribes debajo de la linea:

fontWeight: FontWeight.bold,

y listo, saludos!

Buenas clases

Al parecer el BorderRadius.circula(15.0) esta bien. Modifique lo alto del boton a 60 y creo que esta mucho mejor

ButtonGreen({Key key, @required this.text, @required this.onPressed, this.height, this.width}); la anterior linea la cambie a ButtonGreen({Key? key, required this.text, required this.onPressed, this.height=0, this.width=0}); 5 enero 2024

No entendi a que se refiere con ese {Key key} Alguna documentaci鈥檕n?

Va quedando genial!

Solo hay que cambiar el valor de esta linea de c贸digo para jugar con el radio del bot贸n.

borderRadius: BorderRadius.circular(15.0)

y en que momento creo el archivo SingIn??? como que faltan videos!

Cual es la diferencia entre

@override
  _ButtonGrenState createState() => _ButtonGrenState();

Y el codigo que ann implemente ??

Si desean jugar m谩s con el text les recomiendo este video:
https://youtu.be/gpWcLrcJedQ

Hola, 驴alguien podr铆a ayudarme? El texto no me aparece centrado:

Genial! 馃槈

Hola a todos al escuchar el video se menciona que es genial como flutter indica en que p谩rrafo se termina una sintaxis por ejemplo:

En el minuto 09:15 " ), // BoxDecoration " => eso a m铆 no me aparece en el IDE y debo mirar el cierre de par茅ntesis lo que lo hace engorroso 驴Hay que activar algo quiz谩s? saludos!

馃槂 next! 馃槂

Alguno le dio error el VoidCallback

The name 鈥榁oidCallback鈥 is defined in the libraries 鈥榙art:html鈥 and 鈥榙art:ui鈥

Por si necesitan un Bot贸n algo parecido aqu铆 les dejo un widget que hice yo.

import 'package:flutter/material.dart';

class ButtonAp extends StatefulWidget {
  final VoidCallback onPressed;
  final String text;
  double width = 0.0;
  double height = 0.0;
  double border;

  ButtonAp({Key key, @required this.text, @required this.onPressed, this.height, this.width, this.border});

  @override
  _ButtonApState createState() => _ButtonApState();
}

class _ButtonApState extends State<ButtonAp> {
  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: widget.onPressed,
      child: Container(
        margin: EdgeInsets.only(
          top: 30.0,
          left: 20.0,
          right: 20.0,
        ),
        height: widget.height,
        width: widget.width,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(widget.border),
          color: Colors.white,
        ),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Container(
              margin: EdgeInsets.only(right: 25),
              child: Image(image: NetworkImage("https://assets.stickpng.com/thumbs/5847f9cbcef1014c0b5e48c8.png"),
                height: 35,
              ),
            ),
            Text(widget.text,
              style: TextStyle(
                color: Color(0xff848484),
                fontSize: 18,
                fontWeight: FontWeight.w500,
              ),
            ),
          ],
        )
      ),
    );
  }
}

Cuando vallan a usarlo lo pueden hacer de esta manera

ButtonAp(text: "Iniciar Sesion con Google", onPressed: (){},width: 300.0, height: 50.0,border: 3.0,)```

Recomiendo que el border radius sea un double de 3.0