08 Semana_8_Introducción_Flutter

Vista previa del material en texto

Semana 8: Introducción a Flutter
Facultad de Ingeniería de Sistema e Informática
LENGUAJE DE PROGRAMACIÓN V
Ing. Angel Marthans Ruiz, Mg.
Objetivos: 
Al finalizar, el alumno logrará:
 Configurar el entorno de desarrollo para Flutter.
 Conocer los conceptos fundamentales del framework Flutter.
2
Temas:
 Arquitectura de Flutter
 SDK de Flutter
 Entorno de desarrollo para Flutter
 Creación de un proyecto Flutter
3
Arquitectura de Flutter
4
Flutter tiene una arquitectura modular en 
capas. Esto le permite escribir la lógica de 
su aplicación una vez y tener un 
comportamiento coherente en todas las 
plataformas, aunque el código del motor 
subyacente difiera según la plataforma. La 
arquitectura en capas también expone 
diferentes puntos para la personalización 
y la anulación, según sea necesario.
Arquitectura de Flutter
5
La arquitectura de Flutter consta de tres capas principales:
1. La capa Framework está escrita en Dart y contiene las bibliotecas de alto nivel que utilizará 
directamente para crear aplicaciones. Esto incluye el tema de la interfaz de usuario, los widgets, 
el diseño y las animaciones, los gestos y los componentes básicos. Junto con el marco principal 
de Flutter, hay complementos: funciones de alto nivel como serialización JSON, geolocalización, 
acceso a la cámara, pagos en la aplicación, etc. Esta arquitectura basada en complementos le 
permite incluir solo las funciones que su aplicación necesita.
Arquitectura de Flutter
6
2. La capa Engine (motor), contiene las bibliotecas principales de C++ que conforman las 
primitivas que admiten las aplicaciones de Flutter. El Engine implementa las primitivas de bajo 
nivel de la API de Flutter, como E/S, gráficos, diseño de texto, accesibilidad, la arquitectura de los 
plugins y el runtime de Dart. El Engine también es responsable de rasterizar escenas de Flutter
para una representación rápida en pantalla (render).
3. Embedder es diferente para cada plataforma de destino y maneja el empaquetado del 
código como una aplicación independiente o un módulo integrado.
Arquitectura de Flutter
7
Cada una de las capas de la arquitectura se compone de otras subcapas y 
módulos. De particular importancia para el desarrollo general de 
aplicaciones es la composición de la capa del Framework:
• En la parte superior está el tema de la interfaz de usuario, que utiliza el 
lenguaje de diseño Material (Android) o Cupertino (iOS). Esto afecta la forma 
en que aparecen los controles, lo que le permite hacer que su aplicación se 
vea como una aplicación nativa.
• La capa de widgets es donde se compone el diseño y los elementos 
interactivos para crear la aplicación.
• Debajo, se encuentra la capa de representación(rendering), que es la 
abstracción para crear un diseño.
• La capa base proporciona bloques de construcción básicos, como 
animaciones y gestos, que construyen las capas superiores.
SDK de Flutter
8
El primer paso es descargar el SDK. Puedes seguir los pasos en flutter.dev o ingresar 
directamente aquí: https://docs.flutter.dev/release/archive
Una cosa a tener en cuenta es que Flutter organiza su SDK en torno a canales, que son diferentes 
ramas de desarrollo. Las nuevas funciones o la compatibilidad con la plataforma estarán 
disponibles primero en un canal beta para que los desarrolladores las prueben. Esta es una 
excelente manera de obtener acceso temprano a ciertas funciones, como nuevas plataformas o 
compatibilidad nativa con SDK.
Siga las instrucciones para descargar el SDK de: https://docs.flutter.dev/get-
started/install/windows
https://docs.flutter.dev/release/archive
https://docs.flutter.dev/get-started/install/windows
SDK de Flutter
9
Además del SDK de Flutter, necesitará Java, el SDK de Android, y un IDE con extensiones de 
Flutter. Para facilitar este proceso, Flutter incluye Flutter Doctor, que lo guía a través de la 
instalación de todas las herramientas que faltan. Solo seria necesaria ejecutar en una terminal de 
CMD con privilegios de administrador, el comando “flutter doctor”
Entorno de desarrollo para Flutter
1 0
El equipo de Flutter admite oficialmente tres editores: Android Studio, Visual Studio Code y 
Emacs. Sin embargo, hay muchos otros editores que admiten el lenguaje Dart, funcionan con la 
línea de comandos de Flutter o tienen complementos de Flutter de terceros.
Entorno de desarrollo para Flutter
1 1
Configuración del Android SDK
1. Instalación de Android Studio: https://developer.android.com/studio
https://developer.android.com/studio
Entorno de desarrollo para Flutter
1 2
Configuración del Android SDK
2. Descargar y Configurar el SDK
Entorno de desarrollo para Flutter
1 3
Configuración del Android SDK
3. Descargar y Configurar Build
Tools, Emulador y SDK Platform
Entorno de desarrollo para Flutter
1 4
Creación de un Emulador Android
1. Seleccionar Android Virtual Device Manager (AVD Manager)
Entorno de desarrollo para Flutter
1 5
Creación de un Emulador Android
2. Crear dispositivo virtual
Entorno de desarrollo para Flutter
1 6
Creación de un Emulador 
Android
3. Configurar Hardware del 
dispositivo a emular
Entorno de desarrollo para Flutter
1 7
Creación de un Emulador 
Android
4. Descargar e Instalar una 
imagen del sistema para el 
emulador
5. Ejecutar nuevamente el 
comando “flutter doctor”
6. En muchos casos será 
necesario aceptar las 
licencias de Android: “flutter
doctor --android-licenses”
Entorno de desarrollo para Flutter
1 8
Instalar plugins o extensiones de Flutter y 
Dart en VS Code
Creación de un proyecto en Flutter
1 9
Referencias:
 https://developer.android.com/studio
 https://docs.flutter.dev/release/archive
 https://docs.flutter.dev/get-started/install/windows
 https://docs.flutter.dev/get-started/editor
 https://docs.flutter.dev/get-started/codelab
2 0
https://developer.android.com/studio
https://docs.flutter.dev/release/archive
https://docs.flutter.dev/get-started/install/windows
https://docs.flutter.dev/get-started/editor
https://docs.flutter.dev/get-started/codelab
La manera de empezar es dejar de 
hablar y comenzar a actuar.
Walt Disney
2 1
	�����Semana 8: Introducción a Flutter
	Objetivos: �Al finalizar, el alumno logrará:
	Temas:
	Arquitectura de Flutter
	Arquitectura de Flutter
	Arquitectura de Flutter
	Arquitectura de Flutter
	SDK de Flutter
	SDK de Flutter
	Entorno de desarrollo para Flutter
	Entorno de desarrollo para Flutter
	Entorno de desarrollo para Flutter
	Entorno de desarrollo para Flutter
	Entorno de desarrollo para Flutter
	Entorno de desarrollo para Flutter
	Entorno de desarrollo para Flutter
	Entorno de desarrollo para Flutter
	Entorno de desarrollo para Flutter
	Creación de un proyecto en Flutter
	Referencias:
	La manera de empezar es dejar de hablar y comenzar a actuar.