Héctor Álvarez

Taller tecnologías móviles

Introducción a Flutter

Esquema de la clase

  • Introducción
  • Widgets
  • Arbol de Widgets
  • Estructura de proyecto

Introducción a Flutter

Introducción a Flutter

Flutter lanza su versión estable 1.0 a fines del 2018 (las versiones alpha podían obtenerse desde mayo del 2017).

Flutter nos permite desarrollar aplicaciones multiplataforma realmente nativas.

Se desarrolla con el lenguaje de programación Dart, desarrollado por el mismo Google. Por lo que para crear aplicaciones con flutter, el primer paso es revisar las bases de Dart.

Su entorno de desarrollo la hacen de los frameworks más rápidos para poder desarrollar una aplicación, gracias al hot reload de DartVM (en modo debug).

Introducción a Flutter

Introducción a Flutter

Algunas características de Flutter.

Rápido desarrollo:

Gracias al “hot reload”, puedes debuggear la aplicación más rápido y ver tus cambios aplicados en un par de segundos.

Puedes refrescar la aplicación sin perder el estado actual de lo que estás observando y/o realizar el hot reload reiniciado los estados de toda la aplicación.

Introducción a Flutter

Algunas características de Flutter.

Diseño de interfaces:

Podemos realizar múltiples diseños de interfaces, ya sea utilizando Material Design, Cupertino (iOS) o crear un diseño propio, esto sin bajar el rendimiento de la aplicación.

En Flutter cada componente es un Widget (o bloque de interfaz).

Introducción a Flutter

Algunas características de Flutter.

Rendimiento de aplicación nativa:

Flutter al momento de generar una aplicación para su distribución (release), compila el código dart a código máquina (directo al procesador sin VMs ni interpretes).

Para desarrollar (debug), utiliza la máquina virtual de Dart para realizar hot reload y ver nuestros cambios sin necesidad de volver a recopilar.

¿Qué es un Widget?

Un Widget es un pequeño fragmento u bloque de código que nos permite representar un componente gráfico en pantalla.

Es una clase que puede tener argumentos y/o argumentos con nombre, posee su propia funcionalidad y características.


Lectura recomendada:
Introducción a Widgets

¿Qué es un Widget?

¿Qué es un Widget?

¿Qué es un Widget?

Al momento de definir nuestras pantallas debemos especificar si estas tendrán estado o no, acá entran dos Widgets que se podrían considerar obligatorios.

StatelessWidget: Es un tipo de Widget de clase abstracta (solo se puede extender), que nos permite crear una clase que no sea consiente de su estado (estática).

StatefulWidget: Es un tipo de Widget de clase abstracta, que nos permite crear una clase consiente de su estado. Útil para dar seguimiento a atributos de la clase ya que es consiente de cambios de estados.

¿Qué es un Widget?

Lecturas recomendadas:
StatelessWidget
StatefulWidget

¿Qué es un árbol de Widgets?

En Flutter tenemos una jerarquía u order para ir implementando nuestros elementos gráficos, a esta jerarquía se le llama árbol de widgets.

Tenemos por ejemplo un Widget principal, en este caso Scaffold que nos crea un lienzo en blanco o pantalla vacía. Este widget permite múltiples Widget como hijos que se acomodan en la pantalla dependiendo de cual sea el widget implementado.

Podremos ir agregando capas de Widget o Anidando Widget hijos dentro de un Widget padre.

¿Qué es un árbol de Widgets?

¿Qué es un árbol de Widgets?

Estructura de proyectos en Flutter