Udemy

Platform

Español

Language

Web Development

Category

Flutter Web: Aplicaciones y páginas web profesionales

Sound null-safety, responsive design, carga de archivos, listas páginadas, admin dashboard, landing pages y mucho más

4.87 (158 reviews)

Students

20.5 hours

Content

Jun 2021

Last Update
Regular Price

SKILLSHARE
SkillShare
Unlimited access to 30 000 Premium SkillShare courses
30-DAY FREE TRIAL

What you will learn

Flutter Web

Rutas con segmentos y parámetros opcionales

Estructura de archivos funcionales para proyectos medianos y gran escala

Carga de archivos en Flutter Web

Crear landing pages

Diseño responsive

Crear paneles administrativos


Description

Flutter está siendo una revolución en la industria del desarrollo, con la misma base de código puedes crear aplicaciones nativas para IOS, Android y ahora también Web y Desktop. El curso esta construido totalmente con Null-Safety el cual es un estándar hoy en día para crear aplicaciones modernas con Flutter.

En este curso nos enfocamos en tomar tu conocimiento existente sobre Flutter y expandirlo a la creación de aplicaciones web, estos son algunos de los temas que aquí veremos:

  1. Responsive design

  2. Router

    1. Lectura de segmentos

    2. Parámetros opcionales (query parameters)

    3. Configuración de rutas

    4. Protección de rutas

  3. Manejo de formularios

  4. Carga de archivos

  5. Creación de landing pages

  6. Creación de un panel administrativo

  7. Páginas 404

  8. Tablas

    1. Paginadas

    2. Orden por columnas

    3. Edición en línea

  9. Modals

  10. Alertas

  11. Navegación

  12. Layouts

  13. Views

  14. Hover effects

  15. Animaciones

  16. Controladores

  17. Keys

  18. Despliegues a producción

  19. Peticiones HTTP

  20. Manejo de tokens

  21. Uso de interceptores

  22. LocalStorage

  23. Mucho más


Importante:

El curso no es para empezar con Flutter, es necesario tener ciertos conocimientos básicos de la tecnología porque dentro no nos dedicaremos a enseñar las bases de Dart o Flutter, rápidamente nos enfocamos en lo que es nuevo en la web creando aplicaciones básicas al inicio hasta crear un panel administrativo con cientos de widgets en un proyecto de mediana escala.

Si quieres empezar con flutter toma mi curso gratuito en esta misma plataforma para tener la base antes de empezar este curso.

No es necesario tener configurado ningún emulador, todo lo haremos utilizando Google Chrome y las DevTools que nos ofrece Flutter.


Screenshots

Flutter Web: Aplicaciones y páginas web profesionales
Flutter Web: Aplicaciones y páginas web profesionales
Flutter Web: Aplicaciones y páginas web profesionales
Flutter Web: Aplicaciones y páginas web profesionales

Content

Introducción

Introducción

Pre-requisitos del curso

¿Cómo funciona el curso?

¿Cómo hacer preguntas?

Instalaciones recomendadas y obligatorias

Flutter Web - Introducción

Introducción a la sección

Temas puntuales de la sección

Introducción a Flutter Web - Consideraciones importantes

Recursos adicionales de Flutter Web antes de comenzar

Materiales y enlaces

Primeros pasos en Flutter Web

Introducción a la sección

Temas puntuales de la sección

Inicio de proyecto - Bases de Flutter Web

Página de contador con Stateful Widget

Re-utilización de Widgets

Creando un menú de navegación

Navegación tradicional en Flutter

Router Generator

Transición entre páginas

Código específico para la web

CounterProviderPage - Implementar Provider

Layout Pages

GlobalKey - NavigatorState

Get_it

Menú Responsivo

Artículo sobre Flutter Navigation 2.0

Código fuente de la sección

Segmentos de URL y Query Parameters

Introducción a la sección

Temas puntuales de la sección

Demostración del objetivo final de la sección

Continuación de proyecto y explicación breve sobre Flutter Navigator 2.0

Fluro - Router

Rutas de mi aplicación y animaciones

404 Page

Obtener segmentos del URL

Leer la base por URL y aplicarlo al contador

Leer la base por un query parameter

Multiples segmentos de URL

Separar los handlers de las rutas

Código fuente de la sección

Scrollable Landing Page

Introducción a la sección

Temas puntuales de la sección

Demostración del objetivo final de la sección

Créditos al que me dio la inspiración

Inicio de proyecto - Scrollable Landing Page

Configurando las rutas

HomePage

Crear un gradiente de fondo

Menú superior - Botón y Texto

Animaciones del menú

Opciones del menú

Detalles estéticos del menú

Scroll hacia una página en específico

Cambiar el URL al hacer click en un enlace

Utilizar el segmento para definir la pantalla inicial

Añadir un listener de movimiento del PageController

Cambiar el titulo de la página web

Código fuente de la sección

Desplegando una aplicación de Flutter Web

Introducción a la sección

Temas puntuales de la sección

Generar el build web

Configuración básica de una PWA

Desplegar la aplicación de Flutter Web

Flutter Web App - Android

Admin Dashboard - UI Login

Introducción a la sección

Temas puntuales de la sección

Demostración del objetivo final de la sección

Inicio de proyecto - AdminDashboard

Definir rutas y AuthLayout

No Page Found - Route

Diseño del AuthLayout

BackgroundTwitter

Custom Title y espacio para la vista

Barra de enlaces inferior y enlaces

Anchor Tag

Diseño para teléfonos

Scrollbar

Formulario de Login

Botón personalizado de ingreso

Formulario de Registro

Centralizar estilos de los inputs

Código fuente de la sección

Formularios de ingreso, registro y navegación

Introducción a la sección

Temas puntuales de la sección

Demostración del objetivo final de la sección

Continuación de proyecto - Admin Dashboard

Formulario de ingreso

Obtener email y contraseña

Formulario de Registro

AuthProvider - Autenticación Global

Pequeña corrección de un expanded

Remover inyección de dependencias

LocalStorage

NavigationService

Dashboard Layout

Splash Layout

Dashboard Routes

Condicionalmente mostrar el DashboardView o el LoginView

Código fuente de la sección

Admin Dashboard Diseño

Introducción a la sección

Temas puntuales de la sección

Demostración del objetivo final de la sección

Continuación de proyecto - AdminDashboard

Sidebar

Items de menú y separadores

Llenar las opciones del menú

Navbar

Notificaciones y Avatar

Navbar y Sidebar responsive

Controlador del sidebar

Animar menú lateral

Cerrar el menú lateral

Dashboard View y Blank View

Icons View y Ruta

Navegación utilizando el sidebar

Activando opciones del menú

Tarea Blank View, ruta y menú

Detalles finales del panel administrativo

Código fuente de la sección

Backend para el panel administrativo

Inicio de sección

Temas puntuales de la sección

Configuración de proyecto

Conectar Backend con MontoAtlas

Probar inserciones y queries

Autenticación y protección de rutas

Introducción a la sección

Temas puntuales de la sección

Demostración del objetivo al final de la sección

Continuación de proyecto

Dio - Centralizar los llamados a nuestro backend

Crear usuario - Http post

Autenticando usuario en el registro

Mostrar snackbars - NotificationsService

Login de usuario

Validar JWT

Logout

Submit cuando se presiona ENTER

Código fuente de la sección

Mantenimiento de categorías

Introducción a la sección

Temas puntuales de la sección

Demostración de la sección

Continuación de proyecto

Crear ruta y vista para las categorías

PaginatedDataTable

Configuraciones adicionales del PaginatedDataTable

Cargar las categorías desde el backend

Mapear categorías

PaginatedDataTable con la información del Backend

Mensaje de confirmación de eliminación

Modal para editar y agregar categorías

Contenido del modal de categoría

Crear categorías

Actualizar categoría

Resolver tarea de actualización

Eliminar categoría

Snackbars de creación y actualización

Código fuente de la sección

Optimizaciones

Introducción a la sección

Optimizaciones en el manejo de rutas

Crear múltiples usuarios en nuestra base de datos

Mantenimiento de usuarios

Introducción a la sección

Temas puntuales de la sección

Demostración del objetivo final de la sección

Continuación de proyecto - Admin Dashboard

Ruta y vista de usuarios

UsersView temporal

UsersProvider

Llenar la tabla con los usuarios

Ordenar la lista de usuarios

Indicadores visuales de la columna ordenada

User View y Ruta para un usuario independiente

Validar UID contra el backend

Diseño de la pantalla de User View

Espacio para el avatar del usuario

Espacio para el formulario de actualización

Formulario de actualización de usuario

Validaciones y valores actualizados del usuario

Notificar Listeners cuando se cambia el usuario

Actualizar usuario en el Backend

Actualizar el listado de usuarios

Manejo de errores

Código fuente de la sección

Carga de archivos y versión de producción

Introducción a la sección

Temas puntuales de la sección

Demostración del objetivo final de la sección

Continuación de la sección

Seleccionar una imagen

Subir imagen al backend

Mensaje de carga de imagen

Mostrar imagen actualizada

Mostrar imagen del usuario en la lista de usuarios

Reduciendo la cantidad de importaciones

Generar build de producción

Desplegar aplicación de Flutter en la Web

Variables de entorno y logs de Heroku

Actualizar version de producción

Código fuente de la sección

Despedida del curso

Cierre del curso


Reviews

J
Juan20 June 2021

Muy buen curso, bastante completo... Explica bastante de arquitectura y el por que crea las carpetas y archivos (algo que no estaba tan claro sus otros cursos). 100% recomendado!

M
Miguel15 June 2021

Este curso específico para Flutter web es enormemente útil aunque tengas conocimientos de Flutter para desplegar en Apps nativas. Además todo el aprendizaje se basa en funcionalidades que seguro vas a necesitar en entorno empresarial/productivo. ¡Excelente inversión!

A
Arturo13 June 2021

Me gustan los cursos de Fernando, explica muy bien y presenta temas que nos sirven para ser mejores programadores.

L
Luis10 June 2021

Excelente curso y muy bien explicado. Recomendado para los que quieran adquirir mas conocimientos en flutter web. Esperemos se siga actualizando

N
Natalia10 June 2021

Excelente, super completo el curso, Fernando Herrera explica de mil maravillas.. Muchisimas gracias!!!

X
Xavier8 June 2021

Me va encantando el curso, se aprende muchas cosas y se ve un punto de vista diferente de como estructurar lógica.

J
Juanchileira7 June 2021

con el profesor Fernando Herrera da gusto estudiar, estoy aprendiendo flutter de una manera divertida y que además me gusta

M
Martín6 June 2021

Excelente, como todos los cursos. Aumentando mis conocimientos y hablilidades gracias a el profesor Fernando Herrera.

N
Nicolas1 June 2021

I really like the instructor`s background, he contextualices all the course very well in the scope the actual web designe.

X
Xirs31 May 2021

Otro excelente curso de Fernando, lo único, seria bueno que tuviera calidad de 1080p para q este a la altura del instructor.


Coupons

DateDiscountStatus
5/30/202195% OFFExpired
6/1/202195% OFFExpired
6/16/202194% OFFExpired
6/21/202195% OFFExpired
7/21/202194% OFFValid

4001926

Udemy ID

4/23/2021

Course created date

5/30/2021

Course Indexed date
Bot
Course Submitted by