Bienvenida e Introducción

1

¡Renovaremos este curso!

2

Desarrollando en Flutter

3

¿Qué es Flutter?

4

Dart y Flutter

5

Sintaxis de Dart

6

¡Renovaremos este curso!

7

Flutter para desarrolladores Android, iOS y Xamarin.forms

8

Flutter para desarrolladores React Native

9

¿Cómo luce una app construída en Flutter?

10

Primer reto

Creando mi entorno de desarrollo

11

¡Renovaremos este curso!

12

Requerimientos de Hardware y Software

13

Instalando Flutter en Android Studio y Visual Studio Code

14

Composición de un proyecto en Flutter

Interfaces en Flutter

15

¡Renovaremos este curso! Te quedan unos días para concluirlo.

16

Programación Declarativa en Flutter

17

Estructura de un programa en Flutter

18

Hola Mundo en Flutter

19

Widgets básicos

20

Widgets con estado y sin estado

21

Análisis de Interfaces de Usuario en Flutter

22

Definiendo los layouts de nuestra interfaz

23

Segundo reto

Widgets sin estado en Flutter

24

¡Renovaremos este curso! Te quedan unos días para concluirlo.

25

Flutter Widgets: Container, Text, Icon, Row

26

Flutter Widgets: Column

27

Recursos en Flutter: Tipografías y Google Fonts

28

Widget Image

29

Widget Apilando Textos

30

Widgets Decorados

31

Widget Imagen Decorada

32

Widget Listview

33

Widget Button, InkWell

34

Tercer reto

Widgets con estado en Flutter

35

¡Renovaremos este curso! Te quedan unos días para concluirlo.

36

Botones en Flutter

37

Clase StatefulWidget: Cómo se compone

38

Widget Floating Action Button

39

Widgets BottomNavigationBar

40

Generando Navegación en BottomNavigationBar

41

Personalizando nuestro BottomNavigation Bar a Cupertino iOS BottomBar

42

Cuarto reto

Fin del Curso

43

¡Renovaremos este curso!

44

Conclusiones

45

¡Terminamos!

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Curso de Flutter

Curso de Flutter

Anahí Salgado Díaz de la Vega

Anahí Salgado Díaz de la Vega

Análisis de Interfaces de Usuario en Flutter

21/45
Recursos

Analizar las interfaces de usuario para determinar la mejor forma de componer los diferentes grupos de elementos visuales o de interacción que conforman nuestra aplicación es una tarea común entre desarrolladores de aplicaciones móviles. De hecho la propia documentación oficial de Flutter lo recomienda.

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. Prever la manera en que pueden ser anidados u organizados los diferentes widgets básicos, incluso determinar qué grupos de widgets pudieran pasar a ser nuevos widgets compuestos nos facilitará mucho el trabajo posterior ya cuando pasemos al código del programa.

Una técnica usada para representar el widget tree resultante del análisis de la interfaz es mediante un diagrama de árbol, en el que cada widget se representa con una símbolo circular en una estructura de dependencias o asociaciones derivadas desplegadas en forma de árbol descendente.

Aportes 46

Preguntas 9

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Como decia jack el destripador, solo hay que dividirlo en partes

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?

*Buena práctica* : Layouts en forma de Arbol

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.

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.