https://uplabs.com es un sitio increíble para inspiración … incluso hacen competencias muy seguido para diseñar UIs para empresas como Google, Netflix, etc. Está de lujo!
Bienvenida e Introducción
¡Renovaremos este curso!
Desarrollando en Flutter
¿Qué es Flutter?
Dart y Flutter
Sintaxis de Dart
¡Renovaremos este curso!
Flutter para desarrolladores Android, iOS y Xamarin.forms
Flutter para desarrolladores React Native
¿Cómo luce una app construída en Flutter?
Primer reto
Creando mi entorno de desarrollo
¡Renovaremos este curso!
Requerimientos de Hardware y Software
Instalando Flutter en Android Studio y Visual Studio Code
Composición de un proyecto en Flutter
Interfaces en Flutter
¡Renovaremos este curso! Te quedan unos días para concluirlo.
Programación Declarativa en Flutter
Estructura de un programa en Flutter
Hola Mundo en Flutter
Widgets básicos
Widgets con estado y sin estado
Análisis de Interfaces de Usuario en Flutter
Definiendo los layouts de nuestra interfaz
Segundo reto
Widgets sin estado en Flutter
¡Renovaremos este curso! Te quedan unos días para concluirlo.
Flutter Widgets: Container, Text, Icon, Row
Flutter Widgets: Column
Recursos en Flutter: Tipografías y Google Fonts
Widget Image
Widget Apilando Textos
Widgets Decorados
Widget Imagen Decorada
Widget Listview
Widget Button, InkWell
Tercer reto
Widgets con estado en Flutter
¡Renovaremos este curso! Te quedan unos días para concluirlo.
Botones en Flutter
Clase StatefulWidget: Cómo se compone
Widget Floating Action Button
Widgets BottomNavigationBar
Generando Navegación en BottomNavigationBar
Personalizando nuestro BottomNavigation Bar a Cupertino iOS BottomBar
Cuarto reto
Fin del Curso
¡Renovaremos este curso!
Conclusiones
¡Terminamos!
You don't have access to this class
Keep learning! Join and start boosting your career
If you already have an account,
Resources
Analyzing user interfaces to determine the best way to compose the different groups of visual or interaction elements that make up our application is a common task among mobile application developers. In fact, Flutter' s own official documentation recommends it.
The analysis basically consists of identifying or visually detecting what would be the best way to build the different sections of our interface, taking into account the basic widgets we have in Flutter. Foreseeing the way in which the different basic widgets can be nested or organized, even determining which groups of widgets could become new composite widgets will facilitate the later work when we go to the code of the program.
One technique used to represent the widget tree resulting from the analysis of the interface is by means of a tree diagram, in which each widget is represented by a circular symbol in a structure of dependencies or derived associations displayed in the form of a descending tree.
Contributions 45
Questions 9
Sort by:
✨ Start Flutter permite obtener plantillas de código abierto para cualquier uso, realizadas en Flutter. Encuentra lo que necesites: https://startflutter.com/
Son excelentes fuentes:
uplabs
https://uplabs.com
startflutter
https://startflutter.com
Lo logre!
No se si soy yo ó la profe se equivocó.
Cuando se refiere a filas y columnas…
Ó es que las toma como columnas y y le pone una altura maxima.
Porque principalmente yo veo son filas y no columnas
Disculpen, pero alguien comparte que esto tiene un error? A lo que se hace referencia deberían ser Rows y no Columns?
1:40 Corrección: No son cuatro columnas, es 1 columna y 4 rows.
3:30 Presumo que cuando Anahí dice renglón se refiere a un row.
*Buena práctica* : Layouts en forma de Arbol
Excelente explicación. Muchas veces pasamos por alto este tipo de análisis y pasamos directo a la programación, pero considero que es importante ya que facilita muchísimo la construcción de la interfaz.
Si alguien como yo tiene dudas de por que dice que son Colums y no rows les dejo este link con documentacion oficial
Ya me emocioné de entender cómo funcionan los sistemas de columnas y filas y que pronto iniciaremos el desarrollo de nuestra primera aplicación. Muy feliz de iniciar.
Se me hace mucho más fácil entenderle desde el tipo árbol.
Como decía mi maestro de lógica de Programación, divide y vencerás 😃
Ya vamos casi a la mitad del curso y apenas hicimos un hola mundo 😕
Para más iconos pueden entrar a https://www.flaticon.com/
Interesante como Flutter puede ser usado para implementar tanto estilos propios de iOS y de Android en una sola app.
Siendo honesto, el primer ejemplo del layout es confuso en cuanto a la distribución, es decir, la imagen, el título, el set de botones y el texto…pensaba que serian rows anidados.
programacion declarativa, widget three, diagrama de arbol que intersante. widgets dentro de widgets
Muy buena clase anncode, estoy llevando el curso de forma muy emocianada !!!
Seria como cuando lo hacias con CSS Grid Layout?
Disculpen, entiendo que Plazi hace hincapié en la importancia del idioma inglés. En el minuto 5:33 de este video Anahí (@anncode) pronuncia UPLABS como “Oplabs”. Es correcto también o en este caso pronunciar con la “O” o debería pronunciarse “Aplabs”?
Minuto 1:43 habla de columnas, y creo que se refiere a filas.
Definitivamente la forma de analizar las interfaces que propone es muy buena me hubiera servido bastante si lo hubieran comentado en cursos anteriores, ahora a poner en practica.
manos al codigo
Definitivamente muy buenas fuentes de inspiración en los recursos del curso.
Gracias!!!
Me es muy fácil de entender por las bases solidas que tengo como Frontend (HTML y CSS)
Que empiece el reto 😄
No esta el link de ese diseño en uplabs, alguno lo encontrro?
La clase de la universidad de Estructura de Datos está dando sus frutos, se me hizo muy fácil de entender esta clase 😄
muy buena exposición
Pinterest es otro recurso interesante para encontrar inspiración en cuanto a diseño de apps, en este tablero hay varias ideas que les pueden servir:
https://pin.it/3s5orima2sg5dq
No entiendo bien la transición desde Adobe Illustrator a Android-Studio. Faltó aquí, que la profesora pudiera explicarlo.
He trabajado escasamente con herramientas de diseño. Vengo de mundo Linux.
Excelente explicaciòn
Buenas, Alguien tiene este error Error: Entrypoint isn’t within the current project ?
aparece despues de obeneter las dependencias para un proyecto
Para los que no tengan Adobe Illustrator, lo que pueden hacer es descargar la versión gratuita de Adobe XD y convertir el template a SVG para que se pueda abrir con otros programas como Figma, Sketch, etc.
Muy buena la clase.
Cómo se abre o dónde el archivo *.ai??
Qué genial!! estoy muy emocionado!
muy bien como lo explicas
Algo similar se hace al diseñar interfaces web usando bootstrap, muy buena explicacion al final se entiende la idea.
Apuntes de clase:
El análisis consiste básicamente en identificar o detectar visualmente cuál sería la mejor forma de construir las diferentes secciones de nuestra interfaz, tomando en cuenta los widgets básicos de los cuales disponemos en Flutter.
Está Excelente la técnica 👨💻
Todo excelente, hasta ahora voy en contexto
Pues manos a la obra!
Para quienes buscan un diseño basado en Material Design más conservador, les dejo un rediseño de la misma maqueta con la que pueden trabajar también:
Todos los iconos pueden obtenerlos de Material Icons, y las imágenes las pueden dejé en Google Drive.
Want to see more contributions, questions and answers from the community?