¿Qué quieres aprender?

Flutter Design Lab: Explorando Material Design, Cupertino y Web

Flutter Design Lab: Explorando Material Design, Cupertino y Web

Frogames Formación

Curso online


hasta 150 €

Sumérgete en una experiencia única al descubrir la magia del diseño a través del apasionante curso "Flutter Design Lab: Explorando Material Design, Cupertino y Web". Este programa cautivador no solo te introducirá en el vibrante mundo del diseño de aplicaciones, sino que también te proporcionará las poderosas herramientas de Flutter para llevar tus habilidades al siguiente nivel.

¿Quieres hablar con un asesor sobre este curso?

Temario completo de este curso

Introducción
Flutter Design Lab, explorando Material Design, Cupertino y Web
Bienvenidos al curso Flutter Design Lab
Cómo sacarle el máximo partido al curso
Comunidad de Discord para Aprender con Amigos
Toma notas de tu curso en tiempo real en Frogames Formación
¿Quién es el Instructor?

Cupertino Catalog App
Presentación de la sección y objetivos
Descarga de contenido para esta sección
Nueva App Cupertino Catalog
¿Qué es CupertinoApp?
Definiendo el main y diseñando las rutas
Diseñando el AppBar
Diseñando el HomeScreen
Creando un widget personalizado
Actualizando el pubspec.yaml
Añadiendo evento de clic con navegación
Creando vista base del WidgetScreen
Widget CupertinoActionSheet
Widget CupertinoActivityIndicator
Widget CupertinoAlertDialog
Widget CupertinoButton
Widget CupertinoContextMenu
Widget CupertinoDatePicker
Widget CupertinoDialogAction
Widget CupertinoListSection
Widget CupertinoListTile
Widget CupertinoNavigationBar
Widget CupertinoPageScaffold
Widget CupertinoPageTransition
Widget CupertinoPicker
Widget CupertinoPopupSurface
Widget CupertinoScrollBar
Widget CupertinoSearchTextField
Widget CupertinoSegmentedControl
Widget CupertinoSlider
Widget CupertinoSlidingSegmentedControl
Widget CupertinoSliverNavigationBar
Widget CupertinoSwitch
Widget CupertinoTabBar
Widget CupertinoTabScaffold
Widget CupertinoTextField
Widget CupertinoTimePicker
Mejores Prácticas
Cuestionario de la Sección
Resumen de la sección

Material Catalog App
Presentación de la Sección y Objetivos
Descarga de contenido para esta sección
Nueva app Material Catalog
¿Qué es MaterialApp?
Definiendo el main y diseñando las rutas
Diseñando el AppBar
Creando ItemCardWidget
Creando ItemSectionWidget
Diseñando el HomeScreen
Añadiendo evento de clic con navegación
Creando vista base de Widgets
Widget Buttons
Widget FloatingActionButton
Widget ExtendedFloatingActionButton
Widget IconButton
Widget SegmentedButton
Widget LinearProgressIndicator
Widget SnackBar
Widget AlertDialog
Widget Bottom sheet
Widget Card
Widget Divider
Widget ListTile
Widget Bottom app bar
Widget AppBar
Widget NavigationBar
Widget Badge
Widget NavigationDrawer
Widget Navigation rail
Widget TabBar
Widget Checkbox
Widget Chip
Widget DatePicker
Widget Menu
Widget Radio
Widget Slider
Widget Switch
Widget TimePicker
Widget Text Inputs
Mejores Practicas
Solución tarea mejores practicas
Cuestionario de la Sección
Resumen de la Sección

Material Design 3
Introducción a la Sección
¿Qué es Custom Colors en Material Design 3?
Crear paleta una Custom Color Palette
Añadir colores Custom App Material Design 3
Instalar provider y crear clase ThemeProvider
Cambiar Theme desde CustomAppBar
¿Qué es Dynamic Colors en Material Design 3?
Instalando dependencia de Dynamic Color y Configurando
Resumen De La Sección

Netflix UI Clone
Presentación de la sección y objetivos
Descarga de contenido para esta sección
Nueva App Netflix
Preparar colores para la aplicación
Preparando estilos de texto para la aplicación
Creación de AppBar Personalizado
Creación del NavigationBar Personalizado
Definiendo temas personalizados para widgets
Creando el CardMovie
Configurando el ListView.builder
Mejoras UI - Lista Vacía
Mejoras UI - Error
Mejoras UI - Carga
Crear ProfileScreen
Definiendo Header personalizado
Definiendo listado y agregando recursos
Creando vista de perfiles
Definiendo el GridView
Habilitando evento Tap y navegación
Fin de la sección
Bonus: ShimmerEfect

Instagram UI Clone
Presentación de la sección y objetivos
Descarga de contenido para esta sección
Nueva App Instagram
Obtener ApiKey
Creando Assets
Creando Colores
Creando Fuentes
Crear ItemPost
Crear Header para el Post
Crear Información del Post
Añadir acciones al Post
Crear AppBar personalizado
Creando BottomNavigationBar
Crear LoginScreen
Creando TextFields
Reutilizar Diseño del TextField
Creando Button Personalizado
Creando Separador Personalizado
Creando Textos con Tap
Fin de la Sección

Internacionalización en Flutter
Presentación de la sección y objetivos
Instalar paquete adicional
Inicializar el intl y configurar el pubspec.yaml
Explicando archivos generados
Editando textos de Login
Corrección de Errores
Editando textos del Feed
Ocultando ApiKey
Fin de la sección

Ver más