Scratch the image to get a discount on your course. You'll be able to apply the coupon at checkout.

5.0 /5
(18)

148
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?
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
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
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
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
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
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
Hemos terminado una aventura juntos, ¡pero vamos a por la siguiente!

instructor

5.0 /5
(18)

  • Avatar
    Gustavo
    (5)
    Flutter Design Lab: Explorando Material Design, Cupertino y Web

    The "Flutter Design Lab: Exploring Material Design, Cupertino and Web" course is a training experience focused on designing modern, responsive and cross-platform interfaces using Flutter. Ideal for those who want to create visually appealing and consistent applications on Android, iOS and Web, this program combines design theory with technical practice, unlocking the true potential of the framework.

  • Avatar
    Nieves
    (5)
    Flutter Design Lab: Exploring Material Design, Cupertino and Web – master cross-platform design with style, fluidity and precision 📘 Personal review: "This course was a revelation. I already knew how to use Flutter to build functional screens, but I'd never stopped to think about design as experience. Here I learned to work with Material Design and Cupertino not just as visual styles, but as interaction philosophies. I loved seeing how the same widget can adapt to Android, iOS and Web without losing coherence. The best part was understanding how to use themes, typography, colors and animations to make each app feel polished and professional. Now when I design, I think about consistency, accessibility and aesthetics. This course gave me real tools to create interfaces that look good and feel better." 🔹 Level: Intermediate 🔹 Format: Video + project-driven development 🔹 Ideal for: UI/UX designers, Flutter developers, technical educators and cross-platform app creators 🧩 What you'll master: - Design fundamentals in Flutter: Material vs Cupertino - Adaptive visual widgets for Android, iOS and Web - Customization of themes, colors, typography and styles - Responsive and adaptive design with MediaQuery and LayoutBuilder - Smooth animations with Hero, AnimatedContainer and Transitions - Creation of accessible and scalable interfaces - Best practices in cross-platform design - Export and testing on different devices Do you want me to connect it with advanced design Paths, custom animations or Figma integration? I can also help you create a version for social media or catalog. You set the pace, B.

    This course was a revelation. I already knew how to use Flutter to build functional screens, but I'd never stopped to think about design as experience. Here I learned to work with Material Design and Cupertino not just as visual styles, but as interaction philosophies.

  • Avatar
    Jorge
    (5)
    Pure and clean style

    I loved the freedom it gives you to play with app designs, I was able to experiment with interfaces that previously seemed impossible to me and the final result feels super modern and polished, perfect for what I was looking for.

  • Avatar
    Jackeline
    (5)
    Design for Android, iOS and Web while keeping your style

  • Avatar
    Angel
    (5)
    Flutter Design Lab: Explorando Material Design, Cupertino y Web

    This specialized course focuses on interface design with Flutter, exploring Material Design, Cupertino and Web adaptation systems. You'll learn how to create custom visual components, apply consistent styles, manage themes and build multiplatform experiences with an aesthetic and functional approach. It includes practical projects that simulate real applications with emphasis on usability, accessibility and visual consistency. Ideal for designers and developers who want to master modern interface design with Flutter.

  • Avatar
    Caty
    (5)
    Excellenteeee

    I completed the Flutter Design Lab online course and I'm thrilled with the quality of teaching and the knowledge I gained. The course comprehensively covers Material Design, Cupertino, and Web concepts, which has given me a broad understanding of design in Flutter.

  • Avatar
    Gabriela
    (5)
    I can't wait to apply everything I learned in my future projects

    The course is absolutely amazing! Exploring Material Design and Cupertino opened my eyes to new possibilities. I loved experimenting with the different styles and seeing how it comes together on web.

  • Avatar
    Javi
    (5)
    Great eye for design!

    It's fascinating to see how you can make an app look good across different systems without losing your mind. Experimenting with different styles and seeing everything fit perfectly on the web was amazing. It gave me aesthetic tools I didn't know I needed

  • Avatar
    Santiago
    (5)
    The course was great

  • Avatar
    Nicolás
    (5)
    Great course

  • Avatar
    Rocío
    (5)
    Interesting and very practical

  • Avatar
    María
    (5)
    Exploring design with Flutter like never before

    Designing with Flutter is no longer confusing for me. I learned how to apply Material Design, Cupertino, and web design from a single environment. It was like discovering a new way to create beautiful interfaces.

  • Avatar
    Rosa
    (5)
    good course :)

  • Avatar
    Samuel
    (5)
    Excellent course

    Now my apps have a super professional look and I can't believe I made them myself

  • Avatar
    Yvonne
    (5)
    Great quality

    The audio and image quality and content consistency are excellent! Congratulations

  • Avatar
    danison
    (5)
    Recommended Flutter Design Lab

    Great practical introduction to design and UX principles for creating attractive mobile applications, 10/10

  • Avatar
    Joiser
    (5)
    Clear explanations

    The curriculum covers everything from interface design with Flutter, through creating applications like Netflix and Instagram clones, to internationalization in Flutter

  • Avatar
    Carlos
    (5)
    Recommended Course

    The Flutter Design Lab course is fantastic! The instructor shows you how to create attractive and functional designs for applications using the Flutter framework. Plus, you get practical examples that let you learn how to apply what you've learned to creating a real-time App. If you're looking to learn how to create truly attractive and unique app designs, this is the course for you!

PLANS TO MATCH YOUR GOALS AND NEEDS

Buy the individual course, get all the learning path or access to the entire platform

Choose the payment method that works best for your needs and budget with a one-time course payment, monthly or yearly access to the learning Path, or even to the entire platform.

One-Time Payment

Buy the course once and access it for life

49.99

  • A single payment
  • Instant lifetime access to the course
  • Access the course community
El Más
Popular

Bronze Frog

Access all Frogames courses, communities and extras

39 /month

  • Single payment of 39€ per month
  • Instant access to all courses
  • Access the platform and communities 24/7, wherever and whenever you want
  • Cancel anytime without losing your progress

Cross-Platform Development Path

Access all courses in the Multiplatform Development Path

19.99 /month

  • Single payment of 19.99€ per month
  • Instant access to the +10 courses in the Path
  • Access the Path 24 / 7, wherever and whenever you want
  • Cancel anytime without losing your progress

One-time payment

Buy the course once and access it for life

49.99

  • A single payment
  • Instant lifetime access to the course
  • Access the course community
El Más
Valorado

Gold Frog

Access all Frogames courses, communities and extras

349 /year

  • Single payment of €349 per year
  • 3 months of discount
  • Instant access to all courses
  • Access the platform and communities 24/7, wherever and whenever you want
  • Cancel anytime without losing your progress
  • Resource Library
  • Monthly Q&A livestreams
  • Premium support

Cross-Platform Development Path

Access all courses in the Multiplatform Development Path

199 /year

  • Single annual payment of €199
  • 4 months of discount
  • Instant access to the +10 courses in the Path
  • Access the Path 24 / 7, wherever and whenever you want
  • Cancel anytime without losing your progress
  • Premium support

* All prices include taxes.

For your security, all orders will be processed on a secure server.

Cross-Platform Development Path

The ultimate bundle with all our Cross-Platform Development courses to create web applications and mobile apps for Android and iOS. Includes upcoming courses and updates and improvements to current ones.

Git y GitHub de la A a la Z: Todo sobre el control de versiones

Learn the fundamental concepts and essential workflow for version control using Git and GitHub from scratch!

106 classes

Curso de Dart de la A a la Z

Dart, the programming language developed by Google: a powerful choice for web and mobile app development

135 classes

From Dart to Flutter: Fundamentals in Hybrid Mobile Apps

Get into the world of programming with Flutter through different projects that guarantee you solid, dynamic learning

198 classes

Aprende C# en 6 horas

Learn C#, the programming language used to create video games in Unity or backends in .Net in just 6 hours!

54 classes

App Store Optimization (ASO) de la A a la Z

Master App Store Optimization (ASO) techniques like an expert, starting from the fundamentals, and increase downloads of your apps and games for both iOS and Android

34 classes

Flutter Design Lab: Explorando Material Design, Cupertino y Web

Discover the magic of app design with Flutter's powerful tools to take your skills to the next level

148 classes

Programación Orientada a Objetos con C#

Apply object-oriented programming concepts in C# practically and master class creation, inheritance, polymorphism, encapsulation, and more.

107 classes

SQL from A to Z

From creating databases to having total control of your queries, this course will take you from beginner to expert in handling data efficiently

86 classes

Inteligencia Artificial en Flutter con Firebase AI

Build a fully functional Chat-GPT using Flutter and Firebase AI

39 classes

React Native: Aprende React Native con ejercicios prácticos

Learn the fundamentals of React Native from scratch. Use React Native to build hybrid mobile applications for both iOS and Android.

52 classes

Masterclass de productividad utilizando Visual Studio y C#

Drastically boost your productivity using C# with Visual Studio, mastering all its shortcuts and available tools

48 classes

Domina Android desde cero con Kotlin, Compose y Gemini AI

Android 16: Learn Kotlin, Compose, Retrofit, Room and Artificial Intelligence. Build real apps in Android Studio

692 classes

50 días de programación: Domina iOS 17 como un profesional

Develop 50 projects while you learn different iOS programming techniques

489 classes