Análisis de Interfaces de Usuario en Flutter

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!

✨ 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

https://flutter-es.io/docs/development/ui/layout#:~:text=Para crear una fila o,dentro de filas o columnas.

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.