Definiendo los layouts de nuestra interfaz
Contenido del curso
Comenzaremos dividiendo nuestro layout en dos partes
Comencemos por el ++HeaderAppBar++
Notarás que se compone de dos Widgets GradientBack y CardImageList
Si seguimos analizando el GradientBack tendremos lo siguiente
Ahora pasemos al CardImageList
Continuando con la zona de abajo el ListView tendríamos esto:
Veamos cómo se analiza DescriptionPlace
Y por último nuestro ReviewList
Este es un análisis que te recomiendo antes de empezar a codificar la aplicación. Ahora pasemos al siguiente reto.
Usuario anónimo
User
Jonathan Castañeda
Luis Caceres Faundez
Juan Jesus Morales Ortiz
Francisco José Reyes José Reyes
Julio J Yépez
Carlos Enrique Ramírez Flores
Pedro Alejandro Rodríguez García
Juan Eduardo Quintero Palacio
Álvaro Fabian M
Diego Alfonso Najera Ortiz
Alejandro Cadena Florián
Leonardo Campo Romero
Alejandro Cadena Florián
Cristhian Camilo Pérez Estrada
Allan Alexis Orellana Orellana
José Guillermo
Allan Alexis Orellana Orellana
George M
Jhon Alexander Romero Gonzaga
Eduardo Rivera
Daniel Buitrago
Yulianny Betancourt
Ciro Edgardo Camey Valdez
Marcos Genolet
Marco Puenayan
Juan Pablo Avila Garza
Jorge Wenner Arévalo Alvis
Fernando Pioli Martínez
Fernando Pioli Martínez
Carlos Enrique Ramírez Flores
Hector Benitez
🐱💻 Para mejorar nuestro análisis de interfaces, necesitamos practicar constantemente y desafiarnos. Encuentra inspiración: https://dribbble.com/
Excelente aporte compañero
Gracias, por el aporte
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?
Una forma de ver la diferencia es hacer la analogía con las tablas de html, por ejemplo, en las filas (Row) los elementos internos se organizan alineados horizontalmente uno seguido del otro. En las columnas se organizan alineados uno sobre otro en el mismo plano.
@jjyepez gracias excelente respuesta!
Me gusta mucho esto de analizar la interfaz para luego acomodarlo cual bloques de tetris jaja :3
Es una muy buena analogía JAJAJAJA
Row es el equivalente a linearLayout horizontal de android nativo y Colum seria el linear layout vertical
Es lo que también noté, será más fácil ya con ese background
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?
Los cuadros violetas pertenecen al widget column debido a que si fuera row, se pondrían uno al lado del otro
Pero son un solo widget column, verdad? No son varios @leocmpro
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" <3
Una consideracion que deben tener en cuenta en que Flutter como en React Native, las filas son columnas y las columns son filas
Lo estás interpretando mal. Se comportan exactamente igual que los rows y columns de flexbox en CSS...
Gracias por la observacion, no me exprese bien: Lo que quise decir es que children de una columna o fila no se refieren a estar añadiendo más filas o mas columnas como si de una lista se tratase, sino que se refiere a los elementos que estarán en esa única fila o columna.
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 ?
Yo creo que en este caso no. Imagino que el texto que esta antes que las estrellas, puede variar en su longitud (si hay 1 photo o si hay 10 photos o 100) y las estrallas le siguen en continuación cuando este termina.
En cambio si ahí agregas 2 columnas, una para el texto (review - 5 photos) y otra para las estrellas, éstas van a tener una ubicacion fija, dentro de la columna agregada, quedando un espacio en blanco variable entre los dos elementos.
Luego me di cuenta que estaba equivocado! Al ver la clase “Flutter Widgets: Conteiner, Text, Icon; Row”.** Me retracto.**
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.
