Fundamentos de Flutter y Dart Por Andrs Snchez

Fundamentos de Flutter y Dart Por: Andrés Sánchez Ingeniero Electrónico – Universidad Nacional MSc Aerospace Systems – University of Glasgow

Contenido Bienvenida e Introducción Primeros pasos con Flutter Manejo de datos ¿Qué es Flutter? Estructura de un programa en Flutter Formularios Flutter en el mundo del desarrollo móvil (y web) Hola Mundo en Flutter Ejercicio Dart y Flutter Widgets básicos Flutter para Android y i. OS Widgets con estado y sin estado Otras funcionalidades Recibir datos de internet El entorno de desarrollo Layouts Enviar datos a internet Instalación de Flutter Definiendo el Layout Ejercicio Composición de un proyecto en Flutter Ejercicio Fin del Curso Navegación Rutas Ejercicio Conclusiones

Introducción • ¿Qué es Flutter? • SDK de Google creado para desarrollar aplicaciones nativas multiplataformas, que permite a los desarrolladores crear aplicaciones i. OS y Android utilizando exactamente el mismo código. • Utiliza como lenguaje de programación Dart es un lenguaje orientado a objetos con varias características útiles: mixint, generics, isolates y tipos opcionales estáticos. • Motor propio de renderización basado en Skia (No utiliza el Web View de las aplicaciones híbridas ni los widgets que vienen en los dispositivos). • Existen una gran cantidad de widgets propios listos para ser utilizados. Las aplicaciones en Flutter están compuestas por un árbol de widgets, que mantienen entre ellos una relación de padre-hijo. • Tiene una funcionalidad llamada Hot Reload que permite realizar los cambios en caliente, sin necesidad de parar y arrancar la aplicación. Esto hace que la programación sea más productiva y con menos esperas. • Todo en Flutter es un widget. Existen dos tipos de widget: Stateful (con estado) y Stateless (Sin estado). Los widgets Stateful permiten interacción por parte del usuario, pudiendo cambiar su estado y por lo tanto su apariencia en el UI.

Introducción • Tipos de desarrollo de aplicaciones móviles 1. Aplicaciones nativas: están escritas en el lenguaje propio de cada sistema operativo. Esto significa que cada sistema (Android, i. OS…) requerirá un desarrollo diferente (Android Studio, Xcode). 2. Aplicaciones Multiplataforma: tienen un solo código que es ajustado posteriormente a cada sistema operativo. a) Utilizando lenguaje propio del desarrollo web, como es el HTML 5, CSS y Java. Script. Este código se presenta después dentro de un contenedor nativo, el Web. View. Las aplicaciones creadas de esta manera se conocen también como aplicaciones híbridas. Herramientas: Apache Cordova, Angular. JS, Ionic. b) Utilizando herramientas de rendering a nativo. Estas sirven como puente entre el código multiplataforma y los componentes nativos. Este tipo de desarrollo se realiza con frameworks como Xamarin, React Native o Flutter. NOTA: Aunque las aplicaciones sean multiplataforma hay que generar una APK (Android Package) o IPA (i. OS App Store Package) para que sea legible y se muestre en los dispositivos móviles. Por eso mismo nos harán falta los SDK (Software Development Kit) de cada plataforma.

Introducción • Dart y Flutter • DART – Lenguaje estructurado (Java) y dinámico (Javascript). • Dart es AOT (Ahead Of Time) compilado en código nativo rápido y predecible. • Dart también puede ser compilado JIT (Just In Time) para ciclos de desarrollo excepcionalmente rápidos (Hot Reload — recarga en caliente con manejo de estado). • Dart facilita la creación de animaciones y transiciones suaves que se ejecutan a 60 fps. • Dart permite que Flutter evite la necesidad de un lenguaje de diseño declarativo separado como JSX o XML, o constructores de interfaces visuales separados, porque el diseño declarativo y programático de Dart es fácil de leer y visualizar. • Los desarrolladores han descubierto que Dart es particularmente fácil de aprender porque tiene características que son familiares para los usuarios de lenguajes estáticos y dinámicos. • Recursos: • https: //medium. com/@roipeker/caracter%C 3%ADsticas-interesantes-de-dart-7322 fc 09 faa 0 • https: //dart. dev/guides/language-tour

Introducción • Flutter para Android y i. OS

Introducción • Flutter para Android y i. OS Guías de Diseño • Material Design: Desarrollado por Google. Énfasis en Android, pero también aplicable a web y otra plataformas móviles. • https: //material. io/ • Human Interface: Guías de diseño de Apple para i. OS. • https: //developer. apple. com/design/human-interface-guidelines/ • Para Flutter • Material. App • Cupertino. App

Introducción • Flutter para Android y i. OS Más diferencias • https: //dyna. mo/en/blog/a-beginners-introduction-to-the-differences-in-ios-android-design

El entorno de desarrollo • Instalación de Flutter Requerimientos: 1. Flutter SDK 2. Editor 3. 1. Android Studio / Intelli. J 2. Visual Studio Code 3. Emacs SDK Nativo (para simulación y despliegue) 1. Android Studio 2. Xcode Toda la información: https: //flutter. dev/docs/get-started/install

El entorno de desarrollo • Composición de un proyecto en Flutter Elementos de interés: • Archivo main. dart (carpeta lib) • Carpeta ios • Carpeta android • Archivo pubspec. yaml

Primeros pasos con Flutter • Estructura de un programa Árbol de widgets run. App Center Text

Primeros pasos con Flutter • Hola, Mundo

Primeros pasos con Flutter • Los widgets • UI basado en Widgets -> ¡Todo son widgets! • Los Widgets describen una vista en función de la configuración y el estado actual • Widgets básicos:

Primeros pasos con Flutter • Widgets con estado y sin estado (Stateless & stateful) • Stateless widgets: El cambio en sus propiedades no afecta la visualización. • Stateful widgets: El cambio de sus propiedades afecta la visualización

Layouts • Definiendo el Layout 1. Plantear esquema en algún programa de diseño (Sketch, Illustrator) o cercano. 1. Apariencia visual 2. Rutas 2. Conceptualizar el árbol de widgets 3. Codificación

Layouts • Ejercicio práctico