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

¡Renovaremos este curso! Te quedan unos días para concluirlo.

7

BLoC + Clean Architecture en Flutter

8

Estructurando nuestro proyecto utilizando la Arquitectura BLoC

9

Haciendo BLoC Singleton en Flutter

10

Aplicando Providers al Proyecto

Firebase y Flutter

11

¡Renovaremos este curso! Te quedan unos días para concluirlo.

12

Integrando Firebase Authentication, Cloud Firestore y Firebase Storage al proyecto

13

Integrando Firebase a Flutter para iOS

14

Integrando Firebase a Flutter para Android

15

Creación de Pantalla de Login con Flutter

16

Creando botones reutilizables en Flutter

17

Autenticación de Firebase con Google

18

¡Renovaremos este curso! Te quedan unos días para concluirlo.

19

Implementando Firebase Authentication en BLoC Pattern

20

Streams en Flutter

21

Manejando una sesión con Firebase Authentication y Flutter

22

Implementando Google SignOut en BLoC

23

Implementando Google SignOut en View

24

Monitoreando y validando la conexión al Sign con Google

25

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

Cloud Firestore de Firebase en Flutter

26

¡Renovaremos este curso! Te quedan unos días para concluirlo.

27

¿Qué es Cloud Firestore de Firebase?

28

Analizando un modelo de datos no relacional

29

Creando un Modelo de datos en Cloud Firestore

30

Enviando datos a Cloud Firestore

31

Creando un Widget gradiente personalizado

32

Manejo de Desbordamiendo de Texto de Widget Text

33

Botón de Back en un Appbar en Flutter

34

Navegación entre pantallas en Flutter

35

Widget Text Appbar personalizado en Flutter

36

¡Renovaremos este curso! Te quedan unos días para concluirlo.

37

Widget TextField personalizado en Flutter

38

Creando una Safe Area para una interfaz que tiene un AppBar

39

Widget TextField con iconos en Flutter

40

Retocando el CardView

41

Mostrando imágenes en un CardView

42

Creando un botón de Submit en Flutter

43

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

44

Subiendo datos a Firestore de Firebase

45

Formularios en Flutter

Acceso al Hardware con Flutter

46

¡Renovaremos este curso! Te quedan unos días para concluirlo.

47

Acceso a la cámara en Flutter

48

Librerías de acceso a Hardware en Flutter

Firebase Storage en Flutter

49

¡Renovaremos este curso! Te quedan unos días para concluirlo.

50

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

51

Subiendo una imagen a Firebase Storage desde Flutter

Querys avanzados en Cloud Firestore de Firebase en Flutter

52

¡Renovaremos este curso! Te quedan unos días para concluirlo.

53

Manejo de imágenes en Cloud Firestore

54

Cloud Firestore insertando referencias y arrays en la base de datos

55

Descargar imágenes de Firebase Storage y mostrarlas en Flutter

56

Procesando datos con BLoC Pattern

57

Trayendo datos de Cloud Firestore

58

Persistiendo datos de un usuario logueado

59

Aplicando Filtros en Cloud Firestore

60

¡Renovaremos este curso! Te quedan unos días para concluirlo.

61

Construyendo los Places en la pantalla de Home

62

Mostrando los Places en la pantalla de Home

63

Actualizando datos en tiempo real

64

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

65

Insertando y obteniendo referencias en datos de Firestore.

66

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

67

StreamController, sink, add y StreamBuilder

Conclusiones

68

¡Renovaremos este curso! Te quedan unos días para concluirlo.

69

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

Haciendo BLoC Singleton en Flutter

9/69
Recursos

"En la clase anterior estructuramos nuestro código usando BLoC Pattern, ahora en esta clase usaremos otro patrón de diseño llamado Singleton.

Un archivo de vista debe tener su archivo de lógica de negocio, se podrán comunicar, llamarse, sí una vista necesita hacer login, entre otros. Podemos tener varias vistas comunicándose con una sola lógica de negocio.

Usaremos éste ejemplo para ilustrar lo que queremos hacer, recuerda que queremos exponer la lógica de negocio lo más alto posible para que sus hijos puedan acceder a el:

class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        return BlocProvider (
            bloc: AppBloc(),
            child: MaterialApp(
                title: 'Yo Sleep',
                home: MainPage(),
                initialRoute: ‘main’,
                routes: {
                    'main': (context) => MainPage(),
                }
            ),
        );
    }
}```

Aportes 26

Preguntas 3

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

o inicia sesión.

Hola a todos me gusta mucho sus cursos chicos, pero siento que para haber hablado de bloc singleton, debieron explicar sobre como funciona el tema de herencia, el contexto y los métodos de los statefuls widgets en paticular el didChangeDenpendecies ya con el podemos hacer llamado al bloc provider por que es el primero que carga el contexto de nuestro widget, justo antes del build.

Vi el curso de flutter básico y me encantó (gracia por el Ana!!), por ello seguí investigando por mi cuenta, y el camino que me tocó recorrer para entender el patrón bloc fue pasar primero por entender como funcionan los métodos propios de los stateful y stateless widgets, luego por el InheritedWidget (propio de flutter) y al final - ya habiendo entendido el tema de contexto- el patrón bloc con los respectivos streams y programación reactiva.

Voy en orden con el curso, no sé si luego esto será topado, pero siento que faltó esa información antes de hablar sobre el patrón bloc.

Para los que no conocen el patrón Singleton les comparto un link de una web que explica este patrón de manera bastante sencilla
SINGLETON

**El proyecto no me corría **😦 me aparecíann un montón de errores y al final me marcaba Gradle task assembleDebug failed with exit 1. Después de probar muchas cosas, me funcionó cambiar el minSdkVersion a 21 y el targetSdkVersion a 28. Esto en la ruta android/app/build.gradle.

También pueden probar con el comando flutter clean en la consola, estando en el directorio de la aplicación.

Todo este tiempo desarrollando a ensayo y error para saber que NO se debe REINVENTAR la rueda.

Por aqui les dejo mi repositorio actualizado y funcionando hasta este punto.

Para instalarlo en tu terminal de visual code escribe el siguiente comando:

 flutter pub add generic_bloc_provider

Muchas Views relacionados a un mismo Bloc no creo alto acoplamiento y podria causar problemas a futuro? no hay forma de hacer Bloc y View mas descontraidas?

El curso me parece fantástico, pero esta muy desactualizado.

El proyecto de GIT ya no funciona debido a que fue hecho con una version muy vieja de flutter y android. Seria una buena idea darle una actualizada al repo

Singleton

Patrón de diseño que restringe la multiplicidad de instancias, a una sola.

.
La utilidad de este patrón radica en la necesidad de coordinar las acciones a lo largo del sistema.
.

Singleton como State Store

En el ecosistema web, se conoce como al Store como el único estado de verdad donde la aplicación registra y gestiona la información a lo largo de una aplicación.
.
Siendo Flutter inspirado en React + Redux, menciona la importancia de un adaptador o abstracción de un solo nicho de verdad.

import React from 'react';
import { render } from 'react-dom';

import { createStore, applyMiddleware } from 'redux';
import { Provider } from 'react-redux';
import reduxThunk from 'redux-thunk'

import reducers from './reducers/index.js';

const store = createStore(
	reducers,// All reducers
	{},// Initial state
	applyMiddleware(reduxThunk)
);


render(
	<Provider store={store}>
		<App />
	</Provider>,
	document.getElementById('root')
);

.
En el caso de Flutter:

void main() => runApp(
      // Create and provide the bloc.
      BlocProvider<CounterBloc>(
        creator: (_context, _bag) => CounterBloc(),
        child: App(),
      ),
    );

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // Access the bloc with O(1) computation complexity.
    final bloc = BlocProvider.of<CounterBloc>(context);
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: StreamBuilder<int>(
            stream: bloc.count,
            initialData: bloc.count.value,
            builder: (context, snap) => Text(
                  'count: ${snap.data}',
                  style: Theme.of(context).textTheme.title,
                ),
          ),
        ),
        floatingActionButton: FloatingActionButton(
          child: const Icon(Icons.add),
          onPressed: () => bloc.increment.add(null),
        ),
      ),
    );
  }
}

Les comparto la URL del paquete de generic_bloc_provider
BLOC_PROVIDER

Gran clase

Gracias a este video entendí el patrón Singleton.

Interesante 😮

Libreria:
generic_bloc_provider: ^1.0.9

Hola buen día a todos, por favor: alguien tiene una idea de cómo calcular la distancia y tiempo aproximado entre dos puntos usando la librería de Google Maps usando flutter?

De antemano agradezco por su ayuda.
Saludos,

Estoy viendo este curso, y está súper bien, pero creo que el salto desde el curso básico y este es demasiado grande. Quizá hablar de bloc sin usarlo con autenticación sería más claro. Tuve que ver los videos varias veces para entender la parte de bloc y luego la de login

estoy me suena muy a redux! jeje

Ok

Genial!

me agrada esa libreria provider

Cuando se dictó este curso, BLoC esta muy joven. Ahora existen más herramientas dentro de la librería que lo hacen eficientes. Ya no es necesario ni recomendado exponerlos con un Singleton de blocs.

Recomendable el Curso de Buenas Prácticas para Escritura de Código, aqui explican SOLID y Patrones de diseño.

Para poder entender mejor este video me ayudo leer la documentación oficial de flutter de manejo de estados y provider:

https://esflutter.dev/docs/development/data-and-backend/state-mgmt/simple

Comprende el concepto de singleton , básicamente, es un patrón de diseño que se enfoca en que haya solo una instancia de un objeto. Para este caso, esta idea de utilizar un estado global caería en la categoría de singleton.

Para los que vienen de React, todos estos conceptos se relacionan mucho con Redux.

Considero super utíl el siguiente video para profundizar mas sobre el tema de BLoC en Flutter

https://www.youtube.com/watch?v=vY4KmVqXEGE&t=173s&ab_channel=HenryCode

Hola,

a ver si entendí:

Los provider, exponen la lógica del negocio para que las demas vistas puedan acceder a ella, esto evita que tengamos que realizar un Bloc por cada vista que tengamos. 😄