Contenido del curso
Definiendo los layouts de nuestra interfaz
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🐱💻 Para mejorar nuestro análisis de interfaces, necesitamos practicar constantemente y desafiarnos. Encuentra inspiración: https://dribbble.com/
Jonathan Castañeda
EstudianteExcelente aporte compañero
Luis Caceres Faundez
EstudianteGracias, por el aporte
Juan Jesus Morales Ortiz
EstudiantePara 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 ;)
Francisco José Reyes José Reyes
EstudianteMe surge una duda, ¿algunos de los row y columns que aparecen como el último no serían al contrario?
Julio J Yépez
EstudianteUna 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.
Carlos Enrique Ramírez Flores
Estudiante@jjyepez gracias excelente respuesta!
Pedro Alejandro Rodríguez García
EstudianteMe gusta mucho esto de analizar la interfaz para luego acomodarlo cual bloques de tetris jaja :3
Juan Eduardo Quintero Palacio
EstudianteEs una muy buena analogía JAJAJAJA
Álvaro Fabian M
EstudianteRow es el equivalente a linearLayout horizontal de android nativo y Colum seria el linear layout vertical
Diego Alfonso Najera Ortiz
EstudianteEs lo que también noté, será más fácil ya con ese background
Alejandro Cadena Florián
Estudiante
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?
Leonardo Campo Romero
EstudianteLos cuadros violetas pertenecen al widget column debido a que si fuera row, se pondrían uno al lado del otro
Alejandro Cadena Florián
EstudiantePero son un solo widget column, verdad? No son varios @leocmpro
Cristhian Camilo Pérez Estrada
EstudianteMuchas 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
Allan Alexis Orellana Orellana
EstudianteUna consideracion que deben tener en cuenta en que Flutter como en React Native, las filas son columnas y las columns son filas
José Guillermo
EstudianteLo estás interpretando mal. Se comportan exactamente igual que los rows y columns de flexbox en CSS...
Allan Alexis Orellana Orellana
EstudianteGracias 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.
George M
EstudianteTengo 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
Jhon Alexander Romero Gonzaga
EstudianteEsto 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.
Eduardo Rivera
EstudianteMe animare a realizar la aplicación a la par pero con modificaciones personales a ver que tal sale
Daniel Buitrago
EstudiantePara realizar mis diagramas utilizo https://app.diagrams.net/, es gratuita y tiene muchas herramientas que les pueda ayudar.
Yulianny Betancourt
EstudianteY 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.
Ciro Edgardo Camey Valdez
EstudianteConsidero que empezaré trabajando los desgloses con papel y lápiz.
Marcos Genolet
EstudianteMuy acertada la elección de esta interfaz, tiene de todo un poco!
Marco Puenayan
EstudianteExcelente
Juan Pablo Avila Garza
Estudiantegenial
Jorge Wenner Arévalo Alvis
EstudianteTengo 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 ?
Fernando Pioli Martínez
EstudianteYo 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.
Fernando Pioli Martínez
EstudianteLuego me di cuenta que estaba equivocado! Al ver la clase “Flutter Widgets: Conteiner, Text, Icon; Row”.** Me retracto.**
Carlos Enrique Ramírez Flores
Estudianteesto de widgets es mas parecedio a un objeto json de lo que imagine!!
Hector Benitez
EstudianteTotalmente 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.
