Curso Flutter desde cero creando mas de 10 proyectos

25-01-2021 - Andrés Cruz

Curso Flutter desde cero creando mas de 10 proyectos

Precio mínimo:

$8.0

Condiciones:

  • Todo el curso de por vida y descarga individual
  • Un único pago para todo el curso
  • Actualizaciones más frecuentes que en Udemy para agregar más y más clases al curso.
  • Contacto por mensajes

Precio mínimo:

$9.9

Hasta el --/--

Condiciones:

  • Todo el curso de por vida
  • Un único pago para todo el curso
  • Actualizaciones frecuentes para agregar más y más clases al curso.
  • Contacto por mensajes

En este curso vas a aprender Flutter y Dart desde cero, no requieres conocimientos previos pero sí es importante que sepas programar en cualquier cosa para tomar este curso.

Este es un curso progresivo, por lo tanto vamos a ir de a poco, entre lo más básico hasta cosas más complicadas; pero, antes de entrar en detalle.

¿Qué es Flutter?

Flutter es por una parte un framework y por otra parte una SDK, que fue desarrollada por la propia Google para desarrollar aplicaciones nativas para Android e iOS basados en los principios del Material Design impulsado por Google para su ecosistema de aplicaciones y adoptada por Android desde la versión 5.

  • Porqué es Flutter importante para ti

    Aunque, es importante notar que Flutter está en constante crecimiento, al igual que mi curso :), va incorporando nuevas funcionalidades e ir extendiéndose hacia otras plataformas, como lo es el Web, y app de escritorios también; por lo tanto, con un proyecto base, puedes desarrollar para un montón de plataformas.

    Además de que el desarrollo en Flutter, al ser modular como vamos a ver en el curso, nos permiten desarrollar rápidamente aplicaciones si lo comparamos con el viejo esquema de desarrollo con Android Studio con Kotlin o Xcode con Swift empleando las herramientas oficiales.

    Es multiplataforma, por lo tanto puedes desarrollar tus apps en Windows, Linux o Mac aunque solamente este último está disponible el desarrollo de la app para iOS.

  • El curso está estructurado para ir creando proyectos y más proyectos

    Crearemos múltiples proyectos desde los más bases para ir conociendo los elementos bases de Flutter hasta conocer características más avanzadas del Framework, como puedes ver en algunos de los proyectos principales en pantalla.

    Términos como widgets, patrón bloc, singletons, base de datos con Sembast, Firebase, SQlite, peticiones http, CRUDs, diálogos, preferencias de usuario, forms, Streams, Futures, navs, Redux y mucho + todos estos elementos y más los abordaremos en el curso desarrollando múltiples aplicaciones entiéndase proyectos.

  • Aprende sobre Flutter

    El curso es bastante sencillo de seguir, en las primeras secciones hablaremos sobre aspectos generales del curso y dar los primeros pasos con Dart, conocer su sintaxis, así como los elementos básicos de cualquier lenguaje de programación como las variables, ciclos, condicionales, clases entre otros; para luego pasar al siguiente bloque que consiste en crear las aplicaciones en Flutter y conocer aspectos básicos sobre el Framework; entre los más importantes tenemos.

    1. Instalación de las herramientas necesarias.
    2. Crear nuestras primeras apps y conocer los primeros widgets fundamentales para cualquier aplicación.
    3. Conocer los estados en Flutter para actualizar la data en pantalla.
    4. Guardar los datos de manera local y persistente.
    5. Empezar a trabajar con procesos asíncronos con los Stream.
    6. Navegación básica entre pantallas.
    7. Enviar y consumir peticiones HTTP a un servicio aparte.
    8. Creación de listados y páginas de detalle.
    9. Manejo y carga de recursos como imágenes.
    10. Transiciones y animaciones de widgets y en pase de pantallas.
    11. Patrón bloc para globalizar el manejo de la data y pase de eventos.
    12. Redux, para globalizar el manejo de la data, emisión o pase de eventos y la lógica de negocios.
       

Con todo estos conocimientos podrás emplearlos para crear tus propias aplicaciones en Flutter.

Estructura del curso

Por aquí te dejo mi lista de reproducción del curso sobre Flutter para que veas las introducciones de cada sección:

Vamos a evaluar uno a uno cada una de las secciones que veremos en el curso:

  • 1 Hola mundo en Dart

    En esta primera parte damos los primeros pasos con Dark, conocemos este lenguaje de programación que es el corazón de Dart; elementos básicos como el uso de condicionales, ciclos, listas, funciones, clases y muchos más! en pocas palabras conocer los aspectos básicos de Dart.

  • 2 Null Safety

    Conoceremos el uso del Null Safety que es una característica que tienes que conocer en Flutter 2, ya que cambia de una forma importante la estructura de nuestro código, abriendo nuevas posibilidades en un código más conciso, sostenible y por supuesto seguro.

    En esta siguiente parte, tenemos que aprender uno de los elementos básicos en Dart y Flutter, antes de iniciar con Flutter vamos a conocer el uso de una nueva característica que viene siendo la del Null Safety, una característica que es empleada en otros lenguajes de programación como Kotlin y Swift ahora también se encuentra de manera nativa en Dart y por supuesto Flutter, lo cual es excelente para crear nuestras apps de manera segura.

  • 3 Instalación de las herramientas necesarias

    Las herramientas son todos los frameworks, IDEs y SDKs que vamos a necesitar para crear nuestras primeras aplicaciones; ¿suena enredado y completo de hacer? realmente no lo es tanto y en el curso lo hacemos paso a paso, visitando las páginas correspondientes, explicando para qué funcionan, para qué vamos a emplearlo y comentando el proceso de instalación.

    La instalación de Android Studio tanto como editor como SDK de Android, la instalación de Xcode como SDK y editor, Postman para realizar peticiones y por supuesto Visual Studio Code como editor seleccionado para crear nuestras apps.

  • 4 Aspectos generales de Dart y Flutter

    En esta sección damos los primeros pasos entre Dart y Flutter, el lenguaje de programación y el framework (y SDK) para crear nuestras apps para Android, iOS, escritorio, web...

    Conocer porque Flutter es una SDK, también un framework para el desarrollo de apps y TODO esto es clave para poder conocer esta tecnologías y con esto dar los primeros pasos con Flutter y Dart.

  • 5 Creando tu primera aplicación:

    Conociendo los componentes bases

    En esta primera parte en la cual ya entramos al ciclo de vida de una app en Flutter, vamos a conocer aspectos básicos de una app; la función de arranque de TODO conocida como main, el Material App como envoltorio, el árbol del widget, componentes o widgets básicos para la creación de cualquier app como texto, imágenes, campos de texto, botones... todo esto lo veremos en detalle para dar los primeros pasos con el framework.

  • 6 Convertidor de medidas: Trabajando con los Statefulwidgets

    Siguiendo avanzando en el curso, lo siguiente que tenemos que conocer, son como podemos crear una aplicación más dinámica, en la cual podamos cambiar aspectos de la misma a nuestro antojo; si tenemos una propiedad y a partir del valor de la misma queremos cambiar el estado de un widget... hasta este punto la app anterior NO permite este comportamiento, solamente eran bloques de lego o widgets que estaban por la interfaz regados, pero con los Stateful Widgets ya no es así.

    Los Statefulwidgets nos permiten agregar esa parte de flexibilización que necesitamos sí o sí para crear nuestras apps más dinámicas, así que, vamos a crear un conversor de medidas para dar un poco más de dinámica a nuestra app, veremos elementos que cambian según algunas condiciones...

    Vamos a crear un conversor de medidas para conoce en detalle como actualizar los widgets en la pantalla.

  • 7 Guardar datos de manera local

    La persistencia es una característica que usan las aplicaciones modernas para tener resguardada los datos de la aplicación y que se encuentren solo en la memoria volátil (La Ram), si no que estos datos sean guardadas en el Disco Duro, en el caso de Flutter mobile seria en una SD o la memoria interna del dispositivo, esto es útil para guardar por ejemplo, la información del login del usuario, dados eh cache, etc; en esta sección vamos a crear una aplicación en la cual vamos a almacenar datos de manera local y de manera persistente.

    Vamos a guardar datos de un sencillo formulario de manera persistente, para cuando cerremos la aplicación o reiniciamos el dispositivo, esos datos sigan alli.

  • 8 Ruteo y navegación básica

    En este apartado vamos a aprender un tema fundamental que es la navegación entre pantallas; sin importar lo imponente que sea tu aplicación, con el mejor estilo y diseño, si no puedes crear más de una pantalla en la cual puedas pasar de una pantalla a otra no tiene sentido alguno.

    En esta sección vamos a aprender la navegabilidad entre distintas pantallas con el componente de ruteo que tenemos definido en Flutter. .

  • 9 Secciones app Timer

    Tenemos un par de secciones en las cuales creamos un Timer, de esta manera sabemos cómo trabajar de una manera más completa, creando otra aplicación real en la cual tiene un alto grado de interacción con el usuario.

    Instalaremos nuestros primeros paquetes y luego le daremos un funcionamiento asíncrono mediante los Streams, para usar hilos secundarios en la aplicación y la misma NO se detenga o quede pegada.

  • 10 Consumir data de una web

    En esta sección es una de las más importantes y largas del curso, en las cuales vamos a crear una aplicación REAL, una app de películas de las cuales vamos a consumir los datos de una Rest API real, vamos a crear una app modular, en la cual sería un listado, página de detalle, listado de las últimas películas, calificaciones, imágenes TOP 10, entre otros, estará consumida desde una Rest Api de la app de un tercero que se aloja en Internet.

    Para esto, vamos a realizar peticiones HTTP mediante un paquete, usa el FutureBuilder para manejar peticiones asincronas, y conocer otros widgets como el ListView, ListTile, Card, paginación, funciones de promesa y mucho más.

  • 11 Introducción al ruteo con transiciones y animaciones

    En esta sección, vamos a construir presentar las animaciones y transiciones entre páginas, pero dándole estilos personalizados en cuanto a la animación de una página a otra y regresando a la anterior. Estas transiciones son para personalizar la animación de una pantalla a otra; sin embargo, en otra sección trataremos las transiciones de tipo Hero, para animar los widgets comunes entre páginas.

  • 12 Algo de estilos e Introducción a las animaciones

    En Flutter es muy fácil realizar cambios suaves entre un estado a otro, entiéndase colores, bordeados, transparencia, tamaños entre otras operaciones, para eso tenemos animaciones de tipo Builder, container, entre otras que veremos en esta sección.

  • 13 TodoApp patrón bloc

    Aprenderemos el patrón original en Flutter para trabajar con los estados, el patrón de Bloc, con esto, podremos tener datos comunes en un solo lugar y poder ser fácilmente accesible desde un repositorio central; para esta sección haremos una aplicación tipo TODO.

  • 14 Tienda en línea en Flutter con Strapi, MongoDB y una Rest Api

    Finalmente, tenemos una sección para crear una tienda en línea con Strapi y Flutter, empleando el patrón de Redux; que es otro patrón para mantener el estado de nuestra aplicación en un solo lugar; en esta sección, vamos a poner en práctica:

    • Crear una app con múltiples pantallas.
    • Usar el patrón de Redux como repositorio de datos central.
    • Crear una app en Node con Strapi, cargar datos y crear la Rest Api.
    • Conectar una app en Flutter a la Rest Api con MongoDB.
    • Consumir la Rest Api de Strapi mediante peticiones HTTP.
    • Realizar operaciones CRUD desde la app en Flutter a Strapi.
    • Carrito de compras con CRUD de productos
    • Favoritos.
    • Y mucho más.
  • 15 App de Sitios

    Crearemos una aplicación para administrar sitios en varias secciones mediante un formulario y registrando imágenes mediante la cámara del dispositivo o desde la galería, usaremos Provider como manejador de estado.

  • 16 App de to do web

    Crearemos una aplicación de to do list con Flutter web en varias secciones y administramos las tareas mediante un formulario en un alerta, usaremos animaciones para el listado, los flex y expanded para organizar el contenido y sincronización con Firebase con el Cloud Storage y Cloud Firestore para almacenar las imágenes y los to do respectivamente.

Mas inspiración para llevar tu carrera a Flutter

Grandes empresas están adoptando Flutter para desarrollar sus apps, en un mundo cada vez más grande y con cada vez más empuje en los dispositivos móviles con la cabeza para Android e iOS, cada vez habrá más demanda para desarrollar mas y mas aplicaciones, por lo tanto, tendrás trabajo de sobra, y Flutter al ser un ambiente que nos permite desarrollar con un solo proyecto múltiples aplicaciones, está tomando cada vez más impulso ya que nos permite economizar tiempo, y el tiempo es dinero...

Aprender Flutter te abrirá las puertas a excelentes empresas y puede ser el inicio de tu carrera ya sea para desarrollar solamente para móvil, e inclusive para otras plataformas, por ejemplo webs, para lograr la interconexión de aplicaciones cosa que vemos en este curso y que también puedes profundizar tomando cursos especializados para CodeIgniter, Laravel, Django, Flask que son los frameworks webs con mayor crecimiento y que permiten realizar este tipo de integraciones.

Requisitos previos y requisitos

Para tomar este curso, es importante que sepas programar y conozcas la programación orientada a objetos, en lenguajes de programación como Java, Swift o Python.

Como aprender Flutter

En mi blog, encontrarás múltiples post de interés para dar algunos pasos con Flutter, así como hacer algunos desarrollos interesantes; ve directamente a la categoría Flutter y veras todo lo publicado.

Además que en mi canal de YouTube, cuento con múltiples recursos, por ejemplo este que es ideal para seguir dando algunos pasos en la creación de un CRUD que comunicamos con SQlite con el paquete de SQFlite y la plataforma de Firebase.

Conceptos claves a tener en cuenta antes de iniciar el curso:

Dart

Lenguaje de programación Dart Flutter utiliza el lenguaje de programación Dart porque se puede utilizar para desarrollar en diferentes plataformas (ios, android, web). También tiene un ciclo de desarrollo rápido al hacer uso de la recarga en caliente (hot reload). Cualquier cambio que realice en su aplicación Flutter se refleja automáticamente en la interfaz de usuario al instante (en pocos segundos).

Dart le resultará familiar si ha utilizado JavaScript, Swift o Koltin.

No es necesario que los tipos de datos de las variables se indiquen explícitamente. Sin embargo, cuando crea una función, los parámetros deben tener sus tipos de datos especificados.

Dart es un lenguaje muy ameno, fácil de manejar y aprender, además de bastante intuitivo. 

Veamos algunos ejemplos de código de dart:

function void main() { print("Hello World"); }

Cada aplicación tiene una función main() y tiene la palabra clave void para indicar que no devuelve nada; la función main también es empleada en Flutter. 

Widgets

En Flutter, el término widgets es fundamental, ya que vienen siendo las piezas de lego que nos permiten crear rápidamente componentes como app bar, botones, textos... y esto es lo que permite crear rápidamente nuestras aplicaciones.

Todo elemento de interfaz gráfica en Flutter es un widget. 
 

Secciones del curso:

Hola mundo en Dart
  1. Tipos de datos
    • Vamos a presentar los tipos de datos en Dart, que son los mismos que en cualquier lenguaje de programación pero de esta manera vamos familiarizándonos con la sintaxis en Dart.
  2. Condicionales
    • Vamos a conocer los condicionales en Dart, cuyo uso es básico es idéntico que en cualquier lenguaje de programación.
  3. Listas y tipos dinámicos
    • Vamos a crear una lista dinámica, estática y conocer un poco más los tipos dinámicos en Dart.
  4. Funciones
    • Vamos a explicar como es el uso de las funciones en Dart, también explicaremos el uso de los parámetros con nombre.
  5. Clases y constructores
    • Vamos a ver el uso de las clases en Dart, cómo podemos crear un objeto y los constructores con nombre y sin nombre.
  6. Gets Sets y tipos privados
    • Vamos a seguir trabajando con las clases en Dart, y ahora le llega el turno a los tipos get y set, que al igual que ocurre en Kotlin, su uso es opcional.
  7. Herencia en nuestras clases
    • Vamos a conocer el uso de la herencia en las clases en Dart.
  8. El uso de los Future para hacer peticiones asíncronas
    • Vamos a conocer el uso de los Futures que serán un elemento fundamental cuando queramos realizar peticiones a nuestra Rest Api.
  9. Los Future los async y los await
    • Vamos a conocer como podemos emplear los async y los await en conjunto con nuestros Future.
  10. Propiedades y métodos static
    • Vamos a conocer como funcionan los static en Dart.
  11. Los mixin en Dart
    • Vamos a conocer como podemos emplear la herencia múltiple en Dart.
  12. Funciones de flecha
    • Vamos a conocer las funciones de flecha.
Null Safety en Dart
  1. Introducción y entender el porqué del Null Safety en Dart
    • Vamos a hablar un poco sobre las ventajas que tiene emplear este esquema de Null Safety en Dart y las implicaciones del mismo.
  2. Null Safety en Flutter 2 y en Dart 2.12 (y superiores) + actualizar Flutter y conocer versiones
    • Vamos a hablar sobre como puedes comprobar que versiones de Dart y Flutter estás empleando y cómo puedes actualizar a nuevas versiones.
  3. Emplear tipos nulos: (op ?) forzar valores nulos (op !) y condicionales
    • Vamos a empezar con los ejercicios y conocer los operadores por excelencia para trabajar con los Nul Safety.
  4. Trabajando con tipos nulos
    • Vamos a realizar algunos ejercicios para practicar los tipos de datos que pueden ser nulos con los que no en base a operadores.
  5. Argumentos con nombre y el atributo required
    • Vamos a conocer el uso del atributo required cuando estamos trabajando con clases o funciones y los argumentos con nombre.
  6. Argumentos opcionales
    • Vamos a trabajar con los argumentos opcionales, valores por defecto y el null safety.
  7. Uso de las variables late y nos finals
    • Vamos a trabajar con las variables de tipo late que las empleamos cuando tenemos un valor que NO puede ser nulo y le queremos dar un valor "despues".
  8. Resolviendo ejercicios 1
    • Vamos a resolver algunos ejercicios de la página oficial.
  9. Resolviendo ejercicios 2
    • Vamos a resolver algunos ejercicios de la página oficial.
  10. Ejemplo: En Clases

 

Por aquí tienes el listado completo de clases que vamos a cubrir en el libro y curso:

Introducción

  • 1 Introducción

Hola mundo en Dart

  • 1 Introducción

  • 2 Tipos de datos

    Vamos a presentar los tipos de datos en Dart, que son los mismos que en cualquier lenguaje de programación pero de esta manera vamos familiarizándonos con la sintaxis en Dart.

  • 3 Condicionales

    Vamos a conocer los condicionales en Dart, cuyo uso es básico es idéntico que en cualquier lenguaje de programación.

  • 4 Listas y tipos dinámicos

    Vamos a crear una lista dinámica, estática y conocer un poco más los tipos dinámicos en Dart.

  • 5 Funciones

    Vamos a explicar como es el uso de las funciones en Dart, también explicaremos el uso de los parámetros con nombre.

  • 6 Clases y constructores

    Vamos a ver el uso de las clases en Dart, cómo podemos crear un objeto y los constructores con nombre y sin nombre.

  • 7 Gets Sets y tipos privados

    Vamos a seguir trabajando con las clases en Dart, y ahora le llega el turno a los tipos get y set, que al igual que ocurre en Kotlin, su uso es opcional.

  • 8 Herencia en nuestras clases

    Vamos a conocer el uso de la herencia en las clases en Dart.

  • 9 El uso de los Future para hacer peticiones asíncronas

    Vamos a conocer el uso de los Futures que serán un elemento fundamental cuando queramos realizar peticiones a nuestra Rest Api.

  • 10 Propiedades y métodos static

    Vamos a conocer como funcionan los static en Dart.

  • 11 Funciones de flecha

    Vamos a conocer como podemos emplear la herencia múltiple en Dart.

  • 12 Los mixin en Dart

    Vamos a conocer las funciones de flecha.

Null Safety en Dart

  • 1 Introducción y entender el porqué del Null Safety en Dart

    Vamos a hablar un poco sobre las ventajas que tiene emplear este esquema de Null Safety en Dart y las implicaciones del mismo.

  • 2 Null Safety en Flutter 2 y en Dart 2.12 (y superiores) + actualizar Flutter y co

    Vamos a hablar sobre como puedes comprobar que versiones de Dart y Flutter estás empleando y cómo puedes actualizar a nuevas versiones.

  • 3 Emplear tipos nulos: (op ?) forzar valores nulos (op !) y condicionales

    Vamos a empezar con los ejercicios y conocer los operadores por excelencia para trabajar con los Nul Safety.

  • 4 Trabajando con tipos nulos

    Vamos a realizar algunos ejercicios para practicar los tipos de datos que pueden ser nulos con los que no en base a operadores.

  • 5 Argumentos con nombre y el atributo required

    Vamos a conocer el uso del atributo required cuando estamos trabajando con clases o funciones y los argumentos con nombre.

  • 6 Argumentos opcionales

    Vamos a trabajar con los argumentos opcionales, valores por defecto y el null safety.

  • 7 Uso de las variables late y nos finals

    Vamos a trabajar con las variables de tipo late que las empleamos cuando tenemos un valor que NO puede ser nulo y le queremos dar un valor "después".

  • 8 Resolviendo ejercicios 1

    Vamos a resolver algunos ejercicios de la página oficial.

  • 9 Resolviendo ejercicios 2

    Vamos a resolver algunos ejercicios de la página oficial.

Aspectos generales de Dart y Flutter

  • 1 ¿Qué es Flutter?

  • 2 Los widgets como componentes fundamentales en Flutter

  • 3 Requerimientos técnicos

  • 4 Instalaciones necesarias: Android Studio, git y VSC

    Vamos a instalar Flutter en nuestra PC y configurar el Path del sistema.

  • 5 Instalando Flutter en MacOS y Windows

    Vamos a instalar Flutter en nuestra PC y configurar el Path del sistema.

  • 6 Configurar Flutter en Windows: VS

    Vamos a configurar C++ para Desktop en Windows.

  • 7 Extra: Instalar Flutter en una Mac con M1

    Extra: Instalar Flutter en una Mac con M1

  • 8 Configurando Flutter en nuestro equipo Mac o Windows y el VSC

    Vamos a configurar nuestro equipo para que una vez tengamos instalado Flutter, ahora podamos emplearlo sin problemas en nuestro equipo.

  • 9 Crear un emulador en Android Studio

    Vamos a crear un emulador en Android Studio que es el que vamos a emplear para el curso.

  • 10 Atajo de teclado en VSC

    Vamos a conocer algunos atajos de teclado que te recomiendo si desarrollas en VSC.

  • 11 Crear una aplicación mediante la línea de comandos

    Atajo de teclado en VSC

  • 12 Crear una aplicación mediante Visual Studio Code

    Vamos a conocer como podemos crear un proyecto en Flutter mediante VSC.

  • 13 Elementos básicos de una aplicación

    Vamos a presentar la estructura base de un proyecto en Flutter.

  • 14 Seleccionar dispositivo al momento de desarrollar

    Vamos a aprender a seleccionar un dispositivo para desarrollar.

Creando tu primera aplicación: Conociendo los componentes bases

  • 1 Introducción

  • 2 Texto y Center

    Vamos a presentar unos widgets muy sencillos como el de Texto y el de Center.

  • 3 Árbol de Widgets en los StatelessWidget y StatefulWidget

    Vamos a explicar los dos tipos de widgets que tenemos que emplear para crear cualquier tipo de página en widget.

  • 4 MaterialApp

    Vamos a emplear el widget de MaterialApp para poder emplear elementos del Material Design.

  • 5 Scaffold

    Vamos a crear una página en blanco para definir como elemento padre nuestros elementos.

  • 6 AppBar

    Vamos a crear el header o appBar para nuestra app en nuestro Scaffold.

  • 7 Estilos para los widgets

    Vamos a presentar el uso de los estilos para los textos.

  • 8 Reto: crear estilo personalizado

    Vas a crear un estilo personalizado para tu app, en base a lo que vimos anteriormente.

  • 9 Columnas, para mostrar uno o más widgets en un mismo espacio

    Vamos a presentar el mecanismo por excelencia para poder embeber uno o más widgets en nuestra página en Flutter.

  • 10 Filas, para mostrar uno o más widgets en un mismo espacio

    Vamos a presentar como podemos organizar contenido en filas.

  • 11 Imágenes, referenciadas de Internet

    Vamos a conocer como podemos mostrar imágenes desde Internet.

  • 12 Imágenes, referenciadas en el dispositivo

    Vamos a conocer como podemos mostrar imágenes instaladas localmente en la app.

  • 13 Botones

    Vamos a conocer algunos botones en Flutter.

  • 14 Botones: Versiones recientes de Flutter:FlatButton y RaisedButton

    Vamos a hablar sobre los botones que son más empleados y que en versiones recientes de Flutter cambiaron de nombre.

  • 15 Alertas/Dialogs

    Vamos a crear un componente de Alerta personalizado para mostrar un mensaje.

  • 16 Navegación, primeros pasos

    Vamos a presentar el componente de navegación para visitar otras páginas o cerrar las mismas.

  • 17 Carpeta de helpers

    Vamos a crear una carpeta de helpers para crear funciones globales y reutilizables en toda la app.

  • 18 Detectar Plataforma: Diálogo con diseño iOS

    Vamos a detectar el Sistema Operativo para mostrar una interfaz u otra para nuestro diálogo.

  • 19 Padding y Margin

    Vamos a conocer como podemos agregar espacios.

  • 20 Container, el layout por excelencia

    Vamos a crear un contenedor para aplicarle algo de estilo.

  • 21 SingleChildScrollView, componente de desplazamiento

    Vamos a adaptar la app para que no se rompa si tenemos más contenido que pantalla con un scroll automático.

  • 22 Opcional: Publicar aplicación en github

    Vas a subir la app a tu repositorio en github.

Convertidor de medidas: Trabajando con los Statefulwidgets

  • 1 Introducción

  • 2 Creando un nuevo proyecto

    Vamos a crear un nuevo proyecto mediante VSC.

  • 3 Creando el layout base de nuestra app

    Vamos a crear el layout base de la app.

  • 4 TextField, Leyendo data de entrada

    Vamos a presentar un widget para obtener contenido/texto del usuario.

  • 5 DropdownButton, campo de selección, mapas y items

    Vamos a presentar un widget para la selección.

  • 6 Reto: Mostrar el valor actual del DropdownButton

    Vas a intentar mostrar el valor actual o seleccionado del DropdownButton en un componente de texto.

  • 7 Convertir la app en un Statefulwidgets

  • 8 setState, para notificar cambios en el estado

    Vamos a recargar el widget de flutter mediante el state que cambiamos de la app.

  • 9 initState, para inicializar la data

    Vamos a inicializar datos de entrada.

  • 10 Ciclo de vida de nuestra app

    Vamos a conocer el ciclo de vida de nuestra app.

  • 11 Reto: Completar la interfaz de la app

    Vamos a crear la interfaz completa para la app.

  • 12 Definiendo el placeholder para los input

    Vamos a mostrar el texto por defecto en el widget de tipo texto.

  • 13 Detalles finales en la interfaz

    Vamos a acomodar un poco más la UI para hacerla más agradable para el usuario.

  • 14 Estilo para los textos

    Vamos a aplicar estilos para los textos.

  • 15 Los widgets SingleChildScrollView y Spacer

    Vamos a adaptar un poco la posición o distribución de la app y agregar un scroll.

  • 16 Control para el campo de texto

    Vamos a crear un componente o control para controlar el campo de texto.

  • 17 Validar que el dato sea de tipo double

    Vamos a hacer una validación y casteo para el valor introducido por el usuario que el mismo sea numérico.

  • 18 Opcional: Calcular las medidas

    Vamos a hacer una tabla de Excel o cálculo para las fórmulas de conversiones.

  • 19 Implementar la lógica de la aplicación

    Vamos a adaptar la app con la lógica necesaria para que funcione.

  • 20 Publicar en git

Guardar datos de manera local

  • 1 Introducción

  • 2 Creando un nuevo proyecto

    Vamos a crear un nuevo proyecto mediante VSC.

  • 3 Creando el layout base de nuestra app

    Creando el layout base de nuestra app

  • 4 Crear algunos campos de texto

    Vamos a crear los campos de texto que vamos a emplear para guardar la información en los mismos de manera persistente.

  • 5 Instalar dependencia para guardar datos

    Vamos a instalar nuestra primera dependencia para guardar los datos de manera persistente.

  • 6 Implementar lógica para guardar datos

    Vamos a implementar la lógica para guardar los datos.

  • 7 Guardar datos

    Vamos a establecer la lógica para guardar los datos de manera persistente según la estructura que creamos anteriormente.

  • 8 Establecer valores en los campos de formulario

    Vamos a mostrar los datos en los campos de formulario.

  • 9 Botón de reset

    Vamos a implementar un botón para limpiar los datos de las preferencias de usuario.

  • 10 Convertir a un statefulwidget

    Vamos a convertir la app a un stateful y hacer algunos cambios sutiles en la app para aprovechar este tipo de widget.

  • 11 Crear una configuración de tipo lista de String

    Vamos a probar las configuraciones de tipo list de String, crearemos el get y set.

  • 12 Registrar los estilos musicales en la configuración

    Vamos a registrar los click a los checkbox en nuestras preferencias.

  • 13 Popular un listado de checkbox en base a una lista de string

    Vamos a crear un listado de String que vamos a convertir el checkbox para poder ser seleccionadas.

  • 14 CheckboxListTile, Checkbox y Listtile en un widget

    Vamos a colocar el estilo para los checkbox y colocar un label.

  • 15 Demo: Mapear widgets en una propiedad de columnas

    Vamos a dar una demostración de cómo podemos manejar columnas y otro contenedor mediante una propiedad.

  • 16 Publicar en git

Timer

  • 1 Introducción

  • 2 Creando un nuevo proyecto

    Vamos a crear un nuevo proyecto mediante VSC.

  • 3 Creando el layout base de nuestra app

    Vamos a crear el layout base de la app.

  • 4 Expanded, Llena el espacio disponible

    Vamos a presentar un widget para expandir el contenido según el espacio que tenga disponible.

  • 5 Crear widget botón reutilizable

    Vamos a crear un widget de botones y lo haremos reutilizable.

  • 6 required y @required

  • 7 Crear los botones en nuestra interfaz con los expanded

    Vamos a crear el diseño principal de la app.

  • 8 Instalar una extensión para el indicador

    Vamos a instalar una extensión para dibujar un indicador.

  • 9 Crear widget para el porcentaje

    Vamos a crear el widget para manejar el timer.

  • 10 Crear función contadora, primeras pruebas

    Vamos a crear la primera parte de la función que se va a encargar de llevar el conteo.

  • 11 Funcionalidad del botón start/stop

    Vamos a implementar la función para iniciar y detener el timer.

  • 12 Reto: Reiniciar funcionalidad

    Vas a crear la función para reiniciar.

  • 13 Opcional: Detalles finales

    Vamos a aplicar algunos detalles finales de la app.

  • 14 Publicar en git

Timer parte 2, Stream

  • 1 Introducción

  • 2 Stream y StreamBuilder

    Vamos a explicar algunos conceptos claves sobre el Stram, su widget el StreamBuilder y los procesos asíncronos.

  • 3 Construir la lógica inicial del stream

    Vamos a elaborar la lógica inicial del stream.

  • 4 Construir la función de stream

    Vamos a construir la función de stream que vamos a consumir en el siguiente vídeo.

  • 5 StreamBuilder, Widget que se construye mediante la última interacción

    Vamos a crear el componente/widget que va a consumir el stream, el streamBuilder y generar nuestro widget de manera dinámica según los cambios que mande el stream.

  • 6 Validar data nula

    Vamos a agregar una bandera para devolver el indicador cuando la data es nula.

  • 7 Habilitar funciones para los botones de reiniciar e iniciar/detener

    Vamos a agregar las funciones para los botones inferiores.

  • 8 Terminar de adaptar y limpiar el código

    Vamos a terminar algunos pequeños detalles en la app.

  • 9 LayoutBuilder, Obtener las dimensiones del elemento padre

    Vamos a presentar un tipo de widget con el cual podemos obtener las dimensiones de nuestro elemento padre.

  • 10 Publicar en git

Ruteo y navegación básica

  • 1 Introducción

  • 2 Creando un nuevo proyecto

    Vamos a crear un nuevo proyecto mediante VSC.

  • 3 Creando el layout base de nuestra app

    Vamos a crear el layout base de la app.

  • 4 Crear varias páginas

    Vamos a crear algunas páginas para probar el componente de navegación.

  • 5 Definir rutas de navegación en el MaterialApp

    Vamos a definir las rutas de las páginas que creamos anteriormente.

  • 6 Navigator.pushNamed, Navegar hacia otras páginas

    Vamos a aprender a navegar a una ruta con nombre.

  • 7 Navigator.pop, Volver a la página anterior

    Vamos a volver a la página anterior.

  • 8 Crear un componente reutilizable para navegar hacia otras páginas

    Vamos a crear un componente para colocar tantos botones como páginas tengamos para navegar y navegar hacia las mismas.

  • 9 required y @required

  • 10 CanPop, verifica si podemos hacer el pop de las rutas

    Vamos a verificar mediante una función si existe o no una página a la cual volver al hacer el pop.

  • 11 Argumentos en las rutas

    Vamos a pasar argumentos mediante las rutas.

  • 12 Reto: Página única

    Vas a crear una página única para ganar reutilización en la app.

  • 13 Opcional: Publicar aplicación en github

Consumir data de una web

  • 1 Introducción

  • 2 Creando un nuevo proyecto

    Vamos a crear un nuevo proyecto mediante VSC.

  • 3 Creando el layout base de nuestra app

    Vamos a crear el layout base de la app.

  • 4 Rest Api y recursos Json, trabajando con una web existente

    Vamos a hablar sobre el proyecto, el backend que vamos a emplear para obtener los datos y cómo podemos consumirlos en Flutter.

  • 5 Instalar la dependencia de http

    Vamos a instalar una dependencia para poder hacer peticiones http.

  • 6 Sobre el paquete de la siguiente clase

  • 7 Realizar la primera petición

    Vamos a realizar la primera petición de ejemplo a la Api Rest.

  • 8 Peticiones http y definir la URI, nuevo formato

    Vamos a hablar sobre la definición de la URI de manera obligatoria al momento de crear una petición mediante el paquete de http.

  • 9 Conectarse a un web server y obtener datos vía HTTP

    Al día de hoy la mayoría de las aplicaciones móviles como podcast, streaming de música, películas, series, o videos en general, emails, libros y un enorme etc, se conectan a internet para obtener estos recursos y desplegarlos desde dicha aplicación.

  • 10 Crear clase de ayuda

    Vamos a crear una clase de ayuda para componer datos básicos para hacer la petición.

  • 11 Demo: Uso de los constructores con el Null Safety

  • 12 Clase Movie: Constructor para castear datos de mapa a objeto

    Vamos a crear la función constructora para mapear de un mapa a un objeto.

  • 13 Crear clase response

    Vamos a crear una clase para manejar toda la respuesta.

  • 14 Consumir recurso: Obtener películas populares

    Vamos a consumir el recurso de películas con todo lo que creamos hasta este punto.

  • 15 Funciones de promesa

    Vamos a crear una función de promesa para probar el Future que creamos anteriormente y consumirlo desde una página.

  • 16 Agregar la lógica de rutas y páginas a la app

    Vamos a crear la estructura de páginas para la app.

  • 17 ListView, primera impresión

    Vamos a presentar el componente por excelencia para los listados.

  • 18 FutureBuilder, esperar la respuesta asíncrona y armar un widget

    Vamos a presentar el widget que nos permite consumir futures que creemos.

  • 19 ListView.builder, componentes reutilizables

    Vamos a emplear el componente reutilizable para construir el listado de elementos.

  • 20 CircleAvatar, Cargar imagen

    Vamos a mostrar la imagen de la película.

  • 21 Card, Componente para la carta

    Vamos a crear el componente de carta.

  • 22 Reto: Implementación sin FutureBuilder

    Vas a adaptar la página para que ya no sea necesario emplear un Future para construir el listado.

  • 23 Detalles en la página de listado

    Vamos a implementar algunas propiedades más para el listado.

  • 24 Preparar el listado para la navegación

    Vamos a hacer algunos cambios más en el listado para trabajar en el componente de navegación.

  • 25 Crear página para detalle

    Vamos a crear la página de detalle de la movie para nuestra app.

  • 26 Más detalle para la página para detalle

    Vamos a trabajar un poco más en la página de detalle para darle un poco más de vida.

  • 27 ClipRRect, Redondear widgets

    Vamos a conocer un widget que nos permite redondear las esquinas de un contenedor.

  • 28 Visualizar el rating de la película

    Vamos a crear un componente de raiting para mostrar los votos de la película.

  • 29 ListView horizontal, ver top de películas

    Vamos a crear nuestro listado horizontal para mostrar las imágenes de las películas.

  • 30 Implementar la paginación en el listado

    Vamos a habilitar el componente de paginación para el listado.

  • 31 Mejorar la paginación

    Vamos a mostrar un ícono cuando estemos cargando la paginación.

  • 32 Implementar la búsqueda de películas

    Vamos a implementar la búsqueda de películas mediante el appbar.

  • 33 Implementar la búsqueda de películas parte 2

    Vamos a terminar de implementar la búsqueda.

  • 34 Opcional: Publicar aplicación en github

Introducción al ruteo con transiciones y animaciones

  • 1 Introducción

  • 2 MaterialPageRoute, Navegación con push

    Vamos a conocer el componente de navegación por defecto para navegar.

  • 3 PageRouteBuilder, agrega transiciones entre pase de páginas

    Vamos a hacer el ruteo inicial o la estructura inicial para poder emplear las transiciones.

  • 4 PageRouteBuilder, agrega transiciones entre pase de páginas -ScaleTransition-

    Vamos a presentar un esquema para poder emplear las transiciones en las páginas, tomando como caso de estudio el escalado.

  • 5 Otras transiciones de ejemplo

    Vamos a conocer otros ejemplos de transiciones.

  • 6 Crear clases reutilizables para las transiciones

    Vamos a crear clases para poder reutilizar más fácilmente las transiciones vistas hasta este punto.

  • 7 Crear clase reutilizable para las transiciones

    Vamos a crear una clase para poder reutilizar más fácilmente las transiciones.

  • 8 Animaciones de tipo slide

    Vamos a emplear una animación de tipo slide en las traslaciones de pantalla.

  • 9 Componente de animaciones

    Vamos a explicar un poco el componente de animación para introducir su funcionamiento.

  • 10 Publicar en git

Introducción a los temas y Hero animations

  • 1 Introducción

  • 2 Hero animations en nuestros elementos

    Vamos a trabajar en las animaciones con los widgets llamados heros.

  • 3 Definir un tema: Introducción a los temas

    Vamos a introducir el uso de los temas globales en Flutter.

  • 4 Definir un tema: Temas oscuros y claros

    Vamos a conocer un poco más los temas y conocer los dos temas existentes

  • 5 Publicar en git

Algo de estilos e Introducción a las animaciones

  • 1 Creando un nuevo proyecto

    Vamos a crear un nuevo proyecto mediante VSC.

  • 2 Adaptaciones al Null Safety

  • 3 Creando el layout base de nuestra app

    Vamos a crear el layout base de la app.

  • 4 Crear una página para el login o el registro

    Vamos a crear la pantalla de login que también vamos a emplear para registro.

  • 5 Campo de texto; Crear un campo de texto agradable a la vista

    Vamos a aprender a hacer un buen diseño para los campos de texto.

  • 6 Campo de texto; Hacer reutilizable

    Vamos a hacer el campo de texto personalizado como componente reutilizable.

  • 7 Definir resto de los campos

    Vamos a definir el resto de los campos para la página de formulario.

  • 8 Adaptar la página para el registro

    Vamos a adaptar la página para que podamos emplearla para registrarse.

  • 9 Animar el escalado de la carta

    Vamos a animar cuando escalamos la carta.

  • 10 AnimatedBuilder, Animando una caja: Escalado

    Vamos a hacer un ejemplo para escalar un contenedor.

  • 11 AnimatedBuilder, Animando una caja: Animación infinita

    Vamos a definir algunos cambios para poder animar de manera indefinida.

  • 12 AnimatedBuilder, Animando una caja: Rotación, translación y opacidad

    Vamos a aplicar más cambios geométricos sobre la caja.

  • 13 AnimatedBuilder, Variar colores

    Vamos a variar los colores de la caja.

  • 14 AnimatedBuilder, Encadenar animaciones

    Vamos a encadenar las animaciones para que se ejecuten en un momento dado del rango definido.

  • 15 Función repeat

    Vamos a explorar el uso de la función repeat para repetir en ciclos las animaciones.

  • 16 AnimatedContainer

    Vamos a conocer un componente animable.

  • 17 AnimatedContainer, más propiedades

    Vamos a aplicar algunas propiedades más para trabajar con el contenedor de tipo animable.

  • 18 Pruebas con el contenedor para el login: AnimatedBuilder y AnimatedContainer

    Vamos a aplicar los dos tipos de contenedores que nos permite realizar animaciones para nuestro contenedor del login.

  • 19 Animar el campo de texto para repetir la contraseña

    Vamos a animar el campo para repetir la contraseña.

  • 20 Componente para las imágenes

    Vamos a crear un componente para mostrar las imágenes con un buen diseño.

  • 21 Componente para las imágenes, Efecto Fade en la carga

  • 22 Componente para las imágenes, Efecto de traslado

    Vamos a crear el efecto de traslado de la imagen en su contenedor.

  • 23 Componente para las imágenes, Efecto de traslado con listeners

    Vamos a colocar un listener a la imagen.

  • 24 Opcional: Publicar aplicación en github

    Vas a subir la app a tu repositorio en github.

TodoApp patrón bloc

  • 1 Introducción

  • 2 Adaptaciones al Null Safety

  • 3 Creando un nuevo proyecto

    Vamos a crear un nuevo proyecto mediante VSC.

  • 4 Creando el layout base de nuestra app

    Vamos a crear el layout base de la app.

  • 5 Definir modelo Todo

    Vamos a crear el modelo principal para la Todo app.

  • 6 Instalar Sembast la base de datos NoSQL y path_provider

    Vamos a instalar la base de datos y un componente que nos va a permitir trabajar con la misma.

  • 7 Crear estructura base para las operaciones CRUD en la base de datos

    Vamos a crear el esqueleto y conexión con la base de datos instalada anteriormente.

  • 8 Adaptar la apertura de la base de datos al Null Safety

  • 9 Op CRUDs: Crear y listar

    Vamos a comenzar definiendo un par de operaciones CRUD.

  • 10 Op CRUDs: Probar operaciones anteriores

    Vamos a probar las operaciones anteriores.

  • 11 Op CRUDs: Actualizar y eliminar

    Vamos a comenzar definiendo un par de operaciones CRUD.

  • 12 Op CRUDs: Probar operaciones anteriores

    Vamos a probar las operaciones anteriores.

  • 13 Reto, Op CRUDs:Buscar por el id de un elemento

    Vas a realizar la operación para obtener un todo por el ID.

  • 14 Bloc, sobre el patrón, definir controladores y getters

    Vamos a aprender un poco sobre una posible implementación del patrón bloc, definir dónde lo vamos a almacenar, controladores y sus gets.

  • 15 Bloc, agregar la lógica y el constructor

    Vamos a agregar la lógica de negocio, interacción con la base de datos y el constructor.

  • 16 Bloc, usando el patrón, primera conexión

    Vamos a implementar la conexión desde nuestras páginas al bloc.

  • 17 Dismissible, Borrar un todo

    Vamos a implementar la función para eliminar un registro.

  • 18 Página para crear un todo, enfoque inicial

    Vamos a crear la página básica para crear un todo.

  • 19 Página para crear un todo, definir controladores

    Vamos a definir el controlador para los campos de texto.

  • 20 Página para crear un todo, definir el tipo de campo de texto

    Vamos a definir el tipo de campo para el campo de texto.

  • 21 Pruebas con la inserción de un todo

    Vamos a realizar algunas pruebas para guardar un todo mediante el bloc.

  • 22 Null Safety: Antes de crear el proceso de actualizar

    Importante

  • 23 Página para actualizar un todo

    Vamos a crear el proceso para actualizar el todo.

  • 24 Opcional: Detalles en la vista de listado

    Vamos a aplicar unos pequeños detalles sobre la página de listado.

  • 25 Singletons y constructores factory

    Vamos a resolver el problema que tenemos con las instancias del patrón bloc y crear una instancia única de la misma.

  • 26 Opcional: Publicar aplicación en github

    Vas a subir la app a tu repositorio en github.

App móvil E-Commerce: Páginas iniciales

  • 1 Introducción

  • 2 Creando un nuevo proyecto

    Vamos a crear un nuevo proyecto mediante VSC.

  • 3 Creando el layout base de nuestra app

    Vamos a crear el layout base de la app.

  • 4 Página de Login: Estructura inicial para los campos: Email

    Vamos a crear un campo del formulario que luego vamos a replicar.

  • 5 Página de Login: Resto de los campos: Contraseña y botón

    Vamos a definir el resto de los elementos del formulario.

  • 6 Página de Login: Procesar formulario

    Vamos a colocar los elementos para procesar el formulario de login.

  • 7 Definir tema de la aplicación

    Vamos a definir un tema para la aplicación, algunos colores principales y estilo para el texto principal.

  • 8 Página de Login: Variar el tema

  • 9 Toggle para el password

    Vamos a mostrar la contraseña bajo de manda cuando le demos click a un icono de un ojo.

  • 10 Cambios menores: Botón para ir a registrarse y título

    Vamos a hacer unos últimos cambios en la página de login y vamos a colocar un botón para navegar a la página de registrarse y un título.

  • 11 Página de Registrar: Crear la página

    Vamos a crear la página para registrar.

  • 12 Opcional: Publicar aplicación en github

    Vas a subir la app a tu repositorio en github.

App móvil E-Commerce: MongoDB, Strapi (Node.js) y Flutter

  • 1 Introducción

  • 2 Configurar la base de datos en MongoDB en MongoAtlas

    Vamos a crear la base de datos en la nube en MondoDB.

  • 3 Instalar Strapi

    Vamos a instalar Strapi para crear rápidamente nuestra Api Rest.

  • 4 Primeros pasos con Strapi

    Vamos a conocer algunos aspectos claves sobre Strapi.

  • 5 Página de Registrar: Crear un usuario en Strapi mediante Flutter

    Vamos a crear un usuario en Mongo mediante Strapi enviando una petición mediante Flutter.

  • 6 Página de Registrar: Ocultar botón al momento de enviar la petición

    Vamos a ocultar el botón cuando enviamos una petición.

  • 7 Página de Registrar: Guardar datos de usuario

    Vamos a guardar los datos de usuario en las preferencias del usuario.

  • 8 SnackBar, mostrar mensajes al usuario

    Vamos a conocer un nuevo componente para mostrar mensajes.

  • 9 Página de Registrar: Mostrar mensaje de éxito o error

    Vamos a emplear nuestro SnackBar para mostrar mensajes de estado de la aplicación.

  • 10 SnackBar, personalizar

    Vamos a variar algo de estilo de nuestro componente de SnackBar.

  • 11 Página de Registrar: Redireccionar al momento de crear el usuario

    Vamos a hacer una redirección programada, cuando nos damos de alta.

  • 12 Reto, Página de Login, replicar cambios

    Vamos a aplicar los cambios anteriores sobre la página de Login.

  • 13 Opcional: Publicar aplicación en github

    Vas a subir la app a tu repositorio en github.

App móvil E-Commerce: Redux

  • 1 Introducción

  • 2 Patrón Redux

    Vamos a presentar el patrón Redux y conocer los gestores de estado.

  • 3 Instalar las dependencias y presentar estructura inicial

    Vamos a explicar la estructura que vamos a crear e instalar las dependencias.

  • 4 Crear estructura inicial

    Vamos a crear la estructura inicial de Redux.

  • 5 Consumir información del usuario

    Vamos a crear la estructura para obtener los datos de usuario.

  • 6 Mostrar información del usuario en el AppBar

    Vamos a mostrar datos de usuario vía el AppBar.

  • 7 Crear modelo para la data del Usuario

    Vamos a adaptar la data de usuario a una clase modelo.

  • 8 Terminar de configurar el AppBar

    Vamos a terminar de adaptar el diseño del appbar para nuestra aplicación.

  • 9 Strapi: Creador de tipos de contenido para los productos

    Vamos a crear la estructura de contenido para los productos en Strapi.

  • 10 Strapi: Crear productos

    Vamos a crear un conjunto de productos con los cuales trabajar.

  • 11 Strapi: Configurar acceso a los recursos del producto

    Vamos a configurar el acceso a los recursos rest del producto.

  • 12 Flutter: Consumir listado de productos mediante Strapi y Redux

    Vamos a consumir los productos mediante la app en Flutter.

  • 13 Flutter: Mapear Map para un producto

    Vamos a mapear el mapa de un producto a un objeto.

  • 14 Flutter: Terminar diseño del GridView para el listado de productos

    Vamos a terminar de crear el diseño para nuestra grilla.

  • 15 Flutter: Colocar precio

    Vamos a colocar el precio en el listado.

  • 16 Flutter: Variar cantidad de elementos según orientación y tamaño

    Vamos a hacer un cambio que ayudará al diseño adaptativo y es variar la cantidad de items por filas según el tamaño u orientación del dispositivo.

  • 17 Flutter: Crear pantalla de detalle, interfaz inicial

    Vamos a crear la pantalla de detalle inicial.

  • 18 Flutter, variar el estado en Redux: Funcionalidad de Favoritos

    Vamos a variar el estado de nuestra data mediante Redux; específicamente variar un booleano para indicar si el producto esta en favoritos o no.

  • 19 Flutter, variar el estado en Redux: Funcionalidad de Favoritos parte 2

    Vamos a terminar la implementación anterior.

  • 20 Flutter, variar icono favoritos en página de detalle

    Vamos a variar el estado del icono de favorito para que aparezca relleno si el mismo está seleccionado como favorito.

  • 21 Reto: Flutter, Funcionalidad de Carrito

    Vamos a plantear un reto de hacer la misma lógica que implementamos anteriormente pero esta vez con la opción del carrito de compras.

  • 22 Flutter: Opción para el login

    Vamos a crear la opción de login desde el appBar de los productos.

  • 23 Flutter: Opción para cerrar la sesión

    Vamos a crear la opción de cerrar la sesión desde el appbar.

  • 24 Flutter: Toggle para los productos favoritos

    Vamos a crear un toggle para mostrar todos los productos o los favoritos.

  • 25 Flutter: Página para los productos del carrito

    Vamos a crear una página para mostrar los productos que se encuentran en el carrito.

  • 26 Flutter: Página para los productos del carrito, Listar productos

    Vamos a crear la lógica para listar los productos del carrito.

  • 27 Flutter: Clase CartItem

    Vamos a crear una clase para mantener un poco más organizado el código que nos permitirá crear un item para el producto.

  • 28 Flutter: Eliminar productos del carrito; Dismissible

    Vamos a crear la opción de dismissible para el listado en el carrito.

  • 29 Flutter: Eliminar productos del carrito; Confirmación

    Vamos a crear un diálogo de confirmación para cuando se quiera eliminar un producto del carrito.

  • 30 Reto: Flutter: Página para los productos del carrito, Eliminar producto

    Vamos a crear la lógica para eliminar un producto del listado de carritos.

  • 31 Problema al eliminar un producto

    Vamos a realizar una corrección al momento de eliminar un producto.

  • 32 Migrar StoreConnector del carrito de compras y esquema de modelo

    Vamos a hacer una adaptación de la aplicación para que sea más fácilmente manejable el siguiente cambio.

  • 33 Flutter: Variar cantidades en el carrito parte 1

    Vamos a implementar la lógica para poder seleccionar más de un producto para los items del producto.

  • 34 Flutter: Variar cantidades en el carrito parte 2

    Vamos a implementar la lógica para poder seleccionar más de un producto para los items del producto.

  • 35 Flutter: Variar cantidades en la página de detalle

  • 36 Flutter: Adaptar el modelo de productos para las cantidades del carrito

    Vamos a hacer algunas adaptaciones en el modelo de datos para que podamos trabajar con las cantidades para el carrito.

  • 37 Strapi: Crear esquema para el carrito de compras

    Vamos a crear el esquema que vamos a emplear desde el lado del backend.

  • 38 Flutter: Crear carrito al momento de registrar un usuario

    Vamos a crear el carrito de compras cuando creemos o registremos un usuario desde la app en Flutter.

  • 39 Flutter: Crear el "action" tipo "toggle" para los productos del carrito

    Vamos a crear el action del lado de Redux de tipo toggle para el carrito de compras.

  • 40 Flutter: Crear state para los productos del carrito

    Vamos a crear el estado para manejar el carrito de compras desde una propiedad aparte en nuestro state.

  • 41 Flutter: Inicializar carrito de compras, parte inicial

    Vamos a inicializar el carrito de compras desde nuestra app en Flutter desde lo consumido mediante nuestra RestApi.

  • 42 Flutter: Inicializar carrito de compras, cargar datos

    Vamos a cargar los datos del carrito de compras en la app.

  • 43 Flutter: Guardar las cantidades en la base de datos

    Vamos a establecer las cantidades en la base de datos mediante la Rest Api.

  • 44 Flutter: Detalles en la página del carrito, cantidades y eliminar

    Vamos a terminar aspectos importantes en la página del carrito como el uso de las cantidades y la opción de eliminar.

  • 45 44_pagina_detalle.mp4

    Vamos a terminar aspectos importantes en la página de detalle del producto como el uso de las cantidades y la opción de eliminar.

  • 46 Flutter: Detalles en la página de detalle, cantidades y eliminar

  • 47 Flutter: Mostrar loading en procesos de carga

    Vamos a colocar un icono o widget para la carga al momento de darle un click al ícono de carrito de compra en la página de detalle.

  • 48 Flutter: Despachar acciones al detectar actualizaciones en el state

    Vamos a mostrar un mecanismo más flexible en caso de que tengas que despachar acciones de manera inicial en base a algún cambio en el state.

  • 49 Flutter: Actualizar las cantidades en la base de datos desde el carrito

    Desde el listado del carrito, vamos a actualizar las cantidades.

  • 50 Strapi: Reto, crear estructura para los favoritos

    Vamos a replicar lo creado para el carrito de compras, para los favoritos.

  • 51 Flutter: Reto, favoritos: actualizaciones en el manejo del usuario

    Vamos a continuar con la adaptación de los favoritos con los usuarios, y vamos a configurar el manejo de usuarios.

  • 52 Flutter: Reto, favoritos: Implementar toggle y guardado de favoritos

    Vamos a continuar con la adaptación de los favoritos con los usuarios, vamos a implementar los actions.

  • 53 Flutter: Reto, favoritos: usar toggle y obtener los favoritos

    Vamos a continuar con la adaptación de los favoritos con los usuarios, y vamos a terminar la integración.

  • 54 Resumen

    Vamos a hablar sobre lo desarrollado hasta este punto.

  • 55 Opcional: Publicar aplicación en github

App móvil E-Commerce: Cambios globales en la app

  • 1 Bucle de peticiones a nuestra Rest

    Vamos a hablar sobre un bucle que existe actualmenten en la app.

  • 2 Part of, para los actions de Redux

  • 3 Capturar errores de conexión

    Vamos a hablar sobre la inclusión del try/catch para capturar excepciones en la app.

  • 4 Errores con Redux: Manera manual

    Vamos a presentar una forma en la cual puedes manipular los errores empleando redux que sería la manera más manual posible.

  • 5 Errores con Redux: Uso de Funciones

    Vamos a presentar una forma en la cual puedes manipular los errores empleando redux que sería pasando una función al action.

  • 6 Errores con Redux: Uso de Acciones

    Vamos a presentar una forma en la cual puedes manipular los errores empleando redux que sería creando acciones para los errores.

  • 7 Errores con Redux: Mi criterio en cuanto a los tipos que vimos

    Vamos a dar un pequeño resumen de lo realizado hasta este punto con los tres métodos que vimos anteriormente.

  • 8 Errores con Redux: Mostrar pantalla de carga nuevamente

    Vamos a crear una pantalla para recargar la página cuando ocurran errores en la carga.

  • 9 Demo: Importancia de clonar objetos y listas del AppState en Redux

    Vamos a hablar sobre un aspecto fundamental para trabajar con Redux y es la de evitar por error modificar listas u objetos por una asignación simple.

  • 10 Códigos 401 en las respuestas

    Vamos a hablar sobre los errores de tipo 401 que pueden ocurrir cuando existen problemas con el login.

  • 11 Destruir la información del usuario al obtener un 401

    Vamos a hacer un logout de la app al recibir un código 401 en determinada acción.

  • 12 Primeros pasos con los Middleware

    Vamos a explicar cual es el funcionamiento de los Middleware en Flutter Redux.

  • 13 Middleware: Crear la estructura inicial

    Vamos a presentar la estructura inicial de los middleware de tipo función.

  • 14 Middleware: Realizando las primeras pruebas y ver su funcionamiento

    Vamos a realizar algunas pruebas y evidenciar cómo funcionan los middlewares en la app.

  • 15 Middleware en base a clases: Crear la estructura inicial

    Vamos a presentar la estructura inicial de los middleware de tipo clase.

  • 16 TypedMiddleware para ejecutar el middleware en acciones marcadas

    Vamos a emplear la clase de TypedMiddleware para ejecutar acciones marcadas.

  • 17 Middleware, Resumen

    Vamos a resumir las configuraciones a nivel de middleware que realizamos hasta este punto.

  • 18 Middleware, Adaptar acciones para el login requerido

    Vamos a realizar algunas adaptaciones en las acciones para el usuario autenticado.

Paquetes imprescindibles para Flutter

  • 1 Generar un fondo dinámico

    Vamos a conocer un paquete que nos permite generar fondos dinámicos para nuestras apps.

App de sitios

  • 1 Introducción

  • 2 Crear proyecto

    Vamos a crear el nuevo proyecto.

  • 3 Pantallas y navegación inicial

    Vamos a crear el esquema inicial para la aplicación de lugares.

  • 4 PlaceAdd: Contenedor de imagen seleccionada

    Vamos a crear una caja para mostrar la imagen seleccionada.

  • 5 PlaceIndex: Menú de acción

    Vamos a agregar un menú para agregar lugares.

  • 6 PlaceAdd: Contenedor de imagen seleccionada

    PlaceAdd: Contenedor de imagen seleccionada

  • 7 PlaceAdd: Seleccionar una imagen desde la galería

    Vamos a configurar la app para seleccionar una imagen desde la app de galería.

  • 8 PlaceAdd: Establecer imagen

    Vamos a establecer la imagen seleccionada por el usuario en el contenedor construido anteriormente.

  • 9 PlaceAdd: Tomar una imagen con la cámara

    Vamos a configurar la app para seleccionar una imagen desde la app de la cámara.

  • 10 PlaceAdd: Crear formulario

    Vamos a crear un formulario con un campo para crear un sitio con el nombre.

  • 11 PlaceAdd: Crear modelo

    Vamos a crear un modelo de place.

  • 12 PlaceAdd: SQFlite para almacenar los sitios

    Vamos a instalar y configurar SQFlite para almacenar los place de manera persistente.

  • 13 PlaceAdd: Crear un place en la base de datos

    De manera demostrativa, se va a crear un registro en la base de datos.

  • 14 PlaceAdd: Guardar imagen en la base de datos

    Vamos a guardar la referencia a la imagen en la base de datos.

  • 15 PlaceIndex: Generar listado

    Vamos a generar un listado inicial.

  • 16 PlaceAdd: Guardar imagen en la base de datos

    Vamos a guardar la referencia a la imagen en la base de datos.

  • 17 PlaceIndex: Mostrar imagen en el listado

    Vamos a mostrar la imagen desde el listado.

  • 18 PlaceAdd: Validar imagen seleccionada

    Vamos a realizar una sencilla validación sobre la imagen seleccionada o no por el usuario y evitar enviar el formulario.

  • 19 Database: Completar CRUD para la base de datos

    Vamos a completar las operaciones CRUD con eliminar y actualizar.

  • 20 PlaceIndex: Implementar el efecto swipe para eliminar

    Vamos a implementar el efecto Swipe para eliminar desde el listado de sitios.

  • 21 PlaceAdd: Editar un sitio, navegación, parámetros y late

    Vamos a editar un sitio, comencemos con la navegación y recibiendo el parámetro del sitio.

  • 22 PlaceAdd: Editar un sitio, actualizar sitio

    Vamos a terminar la edición de un registro.

  • 23 PlaceAdd: Generar una Key para actualizar widget de imagen

    Vamos a crear una key para el componente de imagen y poder recargar la misma.

  • 24 Mensaje de confirmación con showSnackBar

    Vamos a mostrar un mensaje mediante un SnackBar al usuario cuando elimine o cree sitios.

  • 25 Publicar en git

App de sitios: Provider

  • 1 Introducción

  • 2 Árbol de widgets y manejadores de estado

    Daremos una explicación sobre el árbol de widget y la importancia de los manejadores de estados.

  • 3 Provider: Instalar y primeros pasos

    Daremos los primeros pasos con Provider instalandolo y mostrando como funciona.

  • 4 Provider: Configuración inicial

    Implementaremos la parte inicial de Providers.

  • 5 Provider: Agregar un sitio

    Vamos a implementar el apartado de agregar un sitio.

  • 6 Provider: MultiProvider

    Vamos a presentar la variación del multi provider para usar varios providers en la aplicación.

  • 7 Provider: Consumer

    Vamos a presentar la variación del Consumer, para interactuar con la clase provider.

  • 8 Provider: Resumen

    Vamos a resumir lo explicado hasta este punto con sus variantes.

  • 9 Provider: Modificar un sitio

    Vamos a implementar el apartado de modificar un sitio.

  • 10 Provider: Eliminar un sitio

    Vamos a implementar el apartado de eliminar un sitio.

  • 11 Publicar en git

TodoList: App web, estructura

  • 1 Introducción

  • 2 Crear proyecto

    Vamos a crear el nuevo proyecto.

  • 3 Definir el AppBar inicial

    Vamos a cambiar el diseño del appbar.

  • 4 AppBar: Crear componente de Dropdown

    Vamos a crear un listado de selección en el appbar.

  • 5 AppBar: Crear avatar

    Crear widget para el avatar en el appbar.

  • 6 AppBar: Diálogo, crear formulario

    Vamos a crear el formulario

  • 7 AppBar: Diálogo para editar

    Vamos a crear un diálogo para editar la información del usuario.

  • 8 Vamos a crear el formulario AppBar: Diálogo, definir estilo al formulario

    Vamos a dar un poco de estilo al formulario.

  • 9 AppBar: Diálogo, establecer constraint al formulario

    Vamos a establecer reglas para limitar el tamaño del formulario.

  • 10 Extra: obtener el tamaño de un widget

    Vamos a definir conocer un mecanismo para obtener el tamaño de un widget.

  • 11 Body: Dividir en dos bloques

    Vamos a dividir el body en dos partes.

  • 12 Body: Configurar plugin de calendario para manejar las fecha

    Vamos a instalar un plugin de calendario.

  • 13 Crear el modelo para los to do

    Vamos a crear el modelo para los to do.

  • 14 Listado inicial

    Vamos a crear un listado inicial de to do estático.

  • 15 Listado animado

    Vamos a realizar una animación para el listado.

  • 16 Listado vacío

    Vamos a crear la página cuando no hay to do en el listado.

  • 17 Listado con imagen

    Vamos a crear un listado con imágenes.

  • 18 Deshabilitar/Habilitar imagen

    Vamos a crear una opción para ver u ocultar la imagen bajo demanda del usuario.

  • 19 Animación de las imágenes

    Vamos a usar el widget de AnimatedContainer para el efecto de desaparecer y aparecer las imágenes.

  • 20 Botones para crear un to do

    Vamos a crear dos botones para la acción de crear to do.

  • 21 Formulario to do: Crear el diálogo

    Vamos a crear el diálogo para manejar los to do.

  • 22 Formulario to do: Formulario inicial

    Vamos a crear el esquema inicial para el formulario.

  • 23 Formulario to do: Campo para la fecha

    Vamos a crear el campo para la fecha.

  • 24 Formulario to do: Fecha por defecto

    Vamos a establecer una fecha por defecto.

  • 25 Formulario to do: Seleccionar imagen

    Vamos a realizar la operación para seleccionar una imagen.

  • 26 Formulario to do: Validar y componer los datos

    Vamos a organizar los datos para crear el to do.

  • 27 Manejar listado de to do

    Vamos a crear un listado en base a to do.

  • 28 Filtros por fecha

    Vamos a crear un filtro para seleccionar las to do.

  • 29 Ordenación

    Vamos a implementar la ordenación del listado de to do.

  • 30 Modal para eliminar

    Vamos a crear el modal para eliminar los to do.

  • 31 Modal para eliminar: Reutilizar

    Vamos a pasar el mensaje para el dialog de confirmación.

  • 32 Edición de los to do: Estructura inicial

    Vamos a crear la funcionalidad de editar to do.

  • 33 Limpiar filtros

    Crearemos la opción para limpiar el filtro.

  • 34 Publicar en git

TodoList web: Adaptativa

  • 1 Introducción

  • 2 Bloque de calendario y listado

    Vamos a definir el bloque de calendario y listado como adaptable.

  • 3 Listado

    Vamos a cambiar el estilo si el tamaño es más pequeño.

  • 4 Publicar en git

TodoList web: Pequeños cambios

  • 1 Introducción

  • 2 Borde redondeado imágenes

    Vamos a colocar un bordeado para las imágenes.

  • 3 Separador entre columna

    Vamos a crear un separador entre el calendario y el listado.

  • 4 Overflow en reescalado

    Vamos a manejar un overflow que ocurre al momento de realizar la animación.

  • 5 Centrar titulo

    Vamos a centrar el título.

  • 6 Mover titulo izquierda

    Vamos a variar el título a la izquierda al momento de escalar la ventana.

  • 7 Publicar en git

TodoList: App web, Firebase on Cloud Firestore

  • 1 Introducción

  • 2 Preparar proyecto

    Vamos a crear el proyecto en firebase y configurar a nivel del proyecto.

  • 3 Primera conexión, crear un registro

    Vamos a probar la conexión anterior y crear un registro desde el proyecto en Firebase.

  • 4 Obtener un listado de to do mediante Firebase, primera conexión

    Vamos a consumir el listado de to do desde la base de datos.

  • 5 Construir un listado de to do desde firebase

    Vamos a crear un listado mediante los datos recibidos de Cloud Firestore.

  • 6 Demo: Consumir listado de manera asíncrona

    Vamos a realizar una demostración de cómo obtener los datos de Cloud Firestore quitando la sincronización.

  • 7 Error en el StreamBuilder

    Vamos a solventar un problema desde el StreamBuilder.

  • 8 Crear un to do en Firebase

    Vamos a crear un to do en Cloud Firestore desde la app.

  • 9 Pasar del modelo de todo a un QueryDocumentSnapshot

    Vamos a migrar desde un esquema de todo a QueryDocumentSnapshot.

  • 10 Actualizar un to do en Firebase, parte final

    Vamos a terminar el proceso de actualizar.

  • 11 Eliminar un to do en Firebase

    Vamos a implementar la función de eliminar un to do.

  • 12 Filtrado

    Vamos a habilitar el filtrado.

  • 13 Ordenación

    Vamos a habilitar una ordenación.

  • 14 Carga de imágenes con Firebase Storage

    Vamos a cargar imágenes en Firebase.

  • 15 Registrar imagen en la base de datos

    Vamos las imágenes en la base de datos.

  • 16 Mostrar imagen en el listado

    Vamos a mostrar imágenes de Firebase en listado de to do.

  • 17 Cambios en el widget de ImageField para la imagen

    Aplicaremos algunos cambios en el campo de ImageField para el manejo de la imagen.

  • 18 Publicar en git


Andrés Cruz
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz en Udemy

Acepto recibir anuncios de interes sobre este Blog.

Conozca nuestros cursos sobre Laravel, CodeIgniter, Flutter, Electron, Django, Flask y muchos más!

Ver los cursos
¡Hazte afiliado en Gumroad!

!Cursos desde!

4$

En Academia

Ver los cursos

!Libros desde!

1$

Ver los libros
!Web Alojada en Hostinger!