Definiendo los layouts de nuestra interfaz

Clase 22 de 45 • Curso de Flutter

Contenido del curso

Bienvenida e Introducción

Creando mi entorno de desarrollo

Interfaces en Flutter

Widgets sin estado en Flutter

Widgets con estado en Flutter

Fin del Curso

Tomar examen

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.

Comentarios

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

student•

Excelente aporte compañero

Luis Caceres Faundez

student•

Gracias, por el aporte

Juan Jesus Morales Ortiz

student•

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 ;)

Francisco José Reyes José Reyes

student•

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

Julio J Yépez

student•

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.

Carlos Enrique Ramírez Flores

student•

@jjyepez gracias excelente respuesta!

Pedro Alejandro Rodríguez García

student•

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

Juan Eduardo Quintero Palacio

student•

Es una muy buena analogía JAJAJAJA

Álvaro Fabian M

student•

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

Diego Alfonso Najera Ortiz

student•

Es lo que también noté, será más fácil ya con ese background

Alejandro Cadena Florián

student•

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

student•

Los cuadros violetas pertenecen al widget column debido a que si fuera row, se pondrían uno al lado del otro

Alejandro Cadena Florián

student•

Pero son un solo widget column, verdad? No son varios @leocmpro

Cristhian Camilo Pérez Estrada

student•

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

Allan Alexis Orellana Orellana

student•

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

José Guillermo

student•

Lo estás interpretando mal. Se comportan exactamente igual que los rows y columns de flexbox en CSS...

Allan Alexis Orellana Orellana

student•

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.

George M

student•

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

Jhon Alexander Romero Gonzaga

student•

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.

Eduardo Rivera

student•

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

Daniel Buitrago

student•

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

Yulianny Betancourt

student•

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.

Ciro Edgardo Camey Valdez

student•

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

Marcos Genolet

student•

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

Marco Puenayan

student•

Excelente

Juan Pablo Avila Garza

student•

genial

Jorge Wenner Arévalo Alvis

student•

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 ?

Fernando Pioli Martínez

student•

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.

Fernando Pioli Martínez

student•

Luego me di cuenta que estaba equivocado! Al ver la clase “Flutter Widgets: Conteiner, Text, Icon; Row”.** Me retracto.**

Carlos Enrique Ramírez Flores

student•

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

Hector Benitez

student•

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.

Definiendo los layouts de nuestra interfaz

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