Definiendo los layouts de nuestra interfaz

🐱‍💻 Para mejorar nuestro análisis de interfaces, necesitamos practicar constantemente y desafiarnos. Encuentra inspiración: https://dribbble.com/

Para los usuarios de Android(desconozco que se pueda realizar en IOS) pueden activar el modo desarrollador de sus dispositivos y en las opciones de Dibujo hay una opción llamada Limites de diseño, la cual al activarse nos mostrara los limites de los margenes, contenedores, iconos, etc, esto les sera de mucha ayuda para ver la composición de la pantalla que ustedes quieran y de esta forma darse una mejor idea de como se pueden construir 😉

Me surge una duda, ¿algunos de los row y columns que aparecen como el último no serían al contrario?

Me gusta mucho esto de analizar la interfaz para luego acomodarlo cual bloques de tetris jaja :3

Row es el equivalente a linearLayout horizontal de android nativo y Colum seria el linear layout vertical

En esta imagen, en la parte que se menciona al widget Column, ¿Por qué? ¿No sería un widget Row?
Pienso que Duwili Ella y el “star rating” que tiene ahí están dentro de una column, si mal no estoy, ¿pero el botón Navigate?

Muchas gracias por la orientación, me adelante un poco y vi que se pueden utilizar contenedores para nuestra aplicación, veo que es bastante completo esté SDK para desarrollar, como dice platzi, “Nunca pares de aprender” ❤️

Una consideracion que deben tener en cuenta en que Flutter como en React Native, las filas son columnas y las columns son filas

Tengo una duda con el fondo de la app, o backgrounds
como puedo hacer una app con el fondo transparente? Me gustaria tener una app que al abrirse se vea el fondo del usuario y nuestra app muestre un globo en pantalla
muchas gracias

Esto de hacer el analisis por partes haciendolo directamente uno, es muy util y casi nunca lo utilizaba, ahora veo mucho más sencillo el enfoque hacia lo widgets de la aplicación.

Me animare a realizar la aplicación a la par pero con modificaciones personales a ver que tal sale

Para realizar mis diagramas utilizo https://app.diagrams.net/, es gratuita y tiene muchas herramientas que les pueda ayudar.

Y por lo que entiendo se puede seguir desglosando, porque adentro de DescriptionPlace, en la tercera columna tenemos un botón, que este a su vez tiene un texto adentro.

Considero que empezaré trabajando los desgloses con papel y lápiz.

Muy acertada la elección de esta interfaz, tiene de todo un poco!

Excelente

genial

Tengo una pregunta, en la última imagen, en la columna del medio, donde aparece el review y las estrellas, esta estaría dividida tambien en 2 filas?, una para el texto, y el otro para las estrellas ?

esto de widgets es mas parecedio a un objeto json de lo que imagine!!

Totalmente de acuerdo. Muy buena práctica el análisis de los elementos en la forma de un layout lógico antes de comenzar con cualquier proyecto de desarrollo.

Olvidamos el TabBar.

Está muy completo el análisis de este layout, dónde partiendo de ello podemos crear aplicaciones con una buena experiencia y sobre todo eficientes.

Hay varios widgets desconocidos en el análisis. Supongo que poco a poco se irán incorporando a lo largo del curso.

muy interesante el manejo y definición de los layouts.

Saludos! Me animaré a tomar este curso como guía para una aplicación del clima.

en nuestra ultima grafica, review, tenemos que dentro del segundo row, en la segunda column, podemos desprender los elementos review, photos y las estrellas en 3 rows , y las estrellas, dividarlas de igual forma que en el description place 💚

Para los comprender la estructura del análisis del proyecto de las apps, nos podemos apoyar desde los mismos wireframe de media o alta resolución del mismo product desing.

Creo que nunca volveré a ver una aplicación igual y ahora siempre estaré evaluando las filas y columnas que contiene cada una de estas aplicaciones y como se desintegran a nivel de desarrollo.

no entiendo muy bien eso del ROW y COLUMNA ,… a veces a la columna lo veo en filas, como en el video anterior … y luego vero al ROW en columnas … alguien me explica mas a detalle ? pls

Me gusto este ejercicio

Muy buen paso a paso del análisis que se puede o es aconsejable realizar.

_GENIAL _

gracias!!!

Genial!

Excelente muy práctico

Buena explicación!

Tengo 4 gb de ram 😭 existe unh stackblitz de android?

Genial!!!, Gracias por esta genial orientación al análisis de interfaz!.
.
Veamos que resulta 😄.

Excelente explicación.

Aprendí mucho y lo pondré en práctica 😃

Me queda más claro, gracias!

Al ver esta revisión se debería pensar en como se analiza el desarrollo de un sitio web, la idea de divs ayuda bastante al analizar una interfaz de una app en flutter.

Excelente Documentación!

Excelente!!!

Excelente explicación!

Es una buena practica el identificar los widgets con los que se compone la app

Me encanto, espero practicarlo en todos mis proyectos.

Excelente, qué bueno que es un proyecto interesante y atractivo visualmente

Genial, muy práctico 😃

Bien!

Buenazo, empezaré a usar esta técnica en todos mis proyectos

Excelente paso a paso del analisis.

genial

Tengo una duda con la última imagen porque ese row se divide en dos? no debería ser un row y dos columns?

es muy interesante saber analizar estas partes para poder hacer crecer un poco la imaginación de como vamos a maketar nuestra app

Motivado para codear !!! 😃

Como se llama la técnica?

Reto Cumplido!!

Al comienzo no entendía…pero poco a poco entiendo como se dividen varias partes de la interfaz.

Y cunado NO tenemos un dise;o ? como iniciamos de cero ???

geniall el diseño y analisis de la interface

Al menos lo que he visto hasta este momento me gusta porque no tengo que estar haciendo los imports para cada tipo de elemento como en React Native. Por ejemplo, si quiero un texto debo hacer el import de react-native

Bueno todo esto me resulta familiar, pero lo comprendo y siento que es igual a programar en Kotlin.

Empecemos!

A darle.!!

Hasta ahora de lo que veo del curso, no tengo tantas dudas ni nada, nunca he programado en Android pero muy bueno hasta el momento

Excelente ejemplo. Muy completo 😃

Importante tener en cuenta esta forma de analizar un diseño, facilita en gran manera la programación

Excelente !!!

Genial!

Excelente análisis… muchas gracias.

excelente