Flutter. Flutter Flutter Ventajas de Flutter:

Presentación del tema: "Flutter. Flutter Flutter Ventajas de Flutter:"— Transcripción de la presentación:

1

2 Flutter

3 Flutter Ventajas de Flutter:

4 Flutter Ventajas de Flutter:

5 Dart

6 Dart 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 60fps. 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:

7 Flutter Flutter para Android y iOS

8 El entorno de desarrollo
Instalación de Flutter Requerimientos: Flutter SDK Editor Android Studio / IntelliJ Visual Studio Code Emacs SDK Nativo (para simulación y despliegue) Android Studio Xcode Toda la información:

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

10 Hola Mundo dart

11 Tipos de Datos en dart https://dart.dev/#try-dart
A continuación, mostramos una tabla de tipos de datos numéricos: • Enteros: int • De punto punto flotante: double • Cadenas de texto: String • Booleanos: bool • Tipos dinámicos: dynamic • Listas : los arreglos son el objeto List, por lo que se le llaman listas. Las listas en Dart se construyen igual a un arreglo en Javascript o con el constructor List([int length]). Ejemplos: o List<int> numeros = [0,1,1,2,3,5]; o List<int> numeros = new List(6); • Mapas: Un mapa es un objeto que asocia una llave con un valor. Cada llave es única, pero puedes repetir los valores las veces que sean necesarias. Los mapas se construyen igual a un objeto en JavaScript o con el constructor Map(). Ejemplos: o Map<String, int> mapa = { 'uno': 1 }; Map<String, int> mapa = new Map();

12 Variables y Constantes
Variable: Espacios en memoria para almacenar un valor. Constante: Posee las mismas características de una variable, pero su contenido no cambia a lo largo de la ejecución del programa

13 Variables y Constantes
A continuación creamos las variables nombre y edad especificando su tipo de datos, luego mostramos su contenido:

14 Variables y Constantes
A continuación creamos la constante PI , luego mostramos su contenido:

15 Variables y Constantes
Método Substring .-Devuelve la subcadena de esta cadena que se extiende desde startIndex, inclusive, hasta endIndex.

16 Estructuras de Control

17 Estructuras de Control

18 Estructuras de Control

19 Estructuras de Control

20 Creación de mi Primer Proyecto
Para crear nuestro primer proyecto utilizar la combinación: Control + shift +p o MENU View-Command Palette-New Project Seleccionamos New Project

21 Creación de mi Primer Proyecto
Application

22 Creación de mi Primer Proyecto
Seleccionamos la carpeta

23 Creación de mi Primer Proyecto
Nombre de la aplicación en minuscula

24 Creación de mi Primer Proyecto
Obtenemos lo siguiente

25 Creación de mi Primer Proyecto
Ejecutamos en genymotion

26 Revisando la Estructura de un Proyectos Flutter
Carpetas: idea: Usado para que Android Studio guarde su configuración para el proyecto en curso. Podéis comprobar como dicho directorio no es tenido en cuenta si se sube a un repositorio git abriendo el archivo .gitignore. android: En esta carpeta se genera todo lo necesario para crear una aplicación Android a partir del proyecto Flutter en lenguaje Java / Kotlin. Cuando se instala la aplicación en el emulador, lo que hace Android Studio es generar el código necesario en formato 'nativo' de Android dentro de esta carpeta. Normalmente no será necesario acuadir a modificar nada en esta carpeta. ios: En esta carpeta se genera todo lo necesario para crear una aplicación IOS a partir del proyecto Flutter. Normalmente no será necesario acuadir a modificar nada en esta carpeta. build: Carpeta donde se genera el código al compilar una aplicación Flutter. Es donde se guarda la aplicación android apk generada. No es necesario modificar nada en esta carpeta. lib: Donde se encuentran normalmente los archivos que conforman el código fuente de la aplicación Flutter. Se puede estructura como si fuera un sistema de archivos y permite crear directorios y subdirectorios. test: Carpeta donde se guardan los archivos para realizar

27 Revisando la Estructura de un Proyectos Flutter
Archivos: .metadata: Administrado por Flutter automáticamente y se usa para controlar las propiedades del proyecto Flutter, actualizaciones... Este archivo solo lo cambia Flutter y no debe ser modificado manualmente. .gitignore: Indica todos los archivos y directorios que deben ser ignarados en caso de subir a un repositorio git nuestro proyecto. .packages: Metadatos del proyecto Flutter. Contiene la lista de dependencias del proyecto. Es generado automáticamente por el SDK de Flutter y no debe ser modificado. .pubspec.lock: Indica cómo se construye el archivo pubspec.yaml. No debe editarse. .pubspec.yaml: Archivo que permite: Establecer la configuración general del proyecto como nombre, descripción y versión del proyecto Indicar las dependencias del proyecto (cuando hacemos uso de una nueva funcionalidad, por ejemplo) Indicar archivos de recursos, como imágenes, audios,... Tiene en cuenta la tabulación. Cuando se produce un cambia es necesario ejecutar el comando flutter pub get (o flutter packages get) (en casi todos los IDE´s aparecerá un mensaje indicándolo y ya lo ejecutará el propio IDE). Normalmente, para que se apliquen los cambios realizados en este archivo, necesitamos hacer un full restart, parando la aplicación y volviéndola a ejecutar para que la reinstale. nombreproyecto.iml: Este archivo siempre se nombra de acuerdo con el nombre del proyecto y contiene más configuraciones del proyecto Flutter. No debe modificarse. README.md: Archivo en la que aparece la descripción del proyecto. Es el archivo que aparece en un alojamiento github en Internet.

28 Explicación Breve Nuestro entorno de trabajo:

29 Explicación Breve Quitamos los comentarios-clean code:

30 Explicación Breve Lo ejecutamos en genymotion:

31 Explicación Breve Documentamos Temporalmente

32 Algo de Teoría Previamente
Stateless(SIN ESTADO) vs. Stateful(CON SETADO)

33 Algo de Teoría Previamente
Stateless(c) vs. Stateful(CON ESTADO) Flutter tiene dos tipos principales de widgets: sin estado y con estado. Estos dos widgets son los componentes básicos de cada widget(CONTROL) que proporciona flutter. Pero antes de entrar en lo que es Stateless y Stateful, necesitamos entender qué es State. La forma más sencilla de decirlo, Estado es algo que puede cambiar dentro de un widget. Por ejemplo, digamos que tenemos un botón Me gusta. El botón se puede rellenar o no, dependiendo de si se ha hecho clic en él. Eso es un estado allí mismo. El estado de ese botón puede completarse o no completarse. Si un widget es constante y no cambia sin importar lo que se haga, entonces no tiene un estado.

34 Algo de Teoría Previamente
Stateless(SIN ESTADO) vs. Stateful(CON ESTADO) Widget sin estado Es un Widget que se construye solo con configuraciones que se iniciaron desde el principio. Entonces Widget sin estado es un widget que nunca cambiará. Por ejemplo, creamos una aplicación que contiene Text con el número 10. Entonces nuestra aplicación no tiene función para cambiar ese número. Widget con estado Es un widget que puede cambiar dinámicamente. Entonces, cualquier Widget que cambie, sí, se llama Widget con estado. Por ejemplo hacemos una aplicación donde si presionamos el botón “+1”, El número en el medio de la pantalla aumentará en uno.

35 Explicación Breve Documentamos Temporalmente

36 Algo de Teoría Previamente
Arbol de Widget

37 Algo de Teoría Previamente
Arbol de Widget Scaffold: es el encargado de implementar la estructura básica de la plantilla visual. AppBar: muestra una barra en la parte superior de la aplicación. Center: es un widget de tipo layout (diseño), que permite centrar el contenido en su padre. Column: también es un widget de tipo layout, que permite disponer verticalmente una lista de widgets. Text: permite mostrar un texto en pantalla. FloatingActionButton: este widget presenta un botón en pantalla.

38 Algo de Teoría Previamente
Arbol de Widget-Observar el AppBar

39 Algo de Teoría Previamente
Arbol de Widget-Observar el AppBar

40 Algo de Teoría Previamente
Arbol de Widget

41 Explicación Breve Observando el Arbol de Widget o Controles

42 Explicación Breve Observando el Arbol de Widget o Controles

43 Explicación Breve Que hace el setState Cuando el estado del widget cambia, se llama setState() para que redibuje todos los widget o controles

44 Explicación Breve Que hace el setState Cuando el estado del widget cambia, se llama setState() para que redibuje todos los widget o controles

45 Explicación Breve Que hace el setState OJO Lo recomendable es manear cada estado de los widget por separado , redibujar todo no es optimo

46 Boton flotante al final al presionat ejecuta la función :
Explicación Breve Boton flotante al final al presionat ejecuta la función : _incrementCounter

47 Boton flotante al final al presionat ejecuta la función :
Explicación Breve Boton flotante al final al presionat ejecuta la función : _incrementCounter

48 Rededibuja los control: INCREMENTA EL CONTADOR
Explicación Breve Rededibuja los control: setState Y INCREMENTA EL CONTADOR

49 QUITARLE EL setState Y PROBARLO
Explicación Breve QUITARLE EL setState Y PROBARLO NO REDIBUJA

50 EL setState lo podemos dejar asi
Explicación Breve EL setState lo podemos dejar asi

51 Modificando el Texto Presiona – ctrl+s y redibujara automáticamente

52 Que incrementa la variable
Examinamos el evento onPressed del boton Presiona – ctrl+s y redibujara automáticamente _incrementCounter Es un método Que incrementa la variable _counter++

53 Que incrementa la variable
Examinamos el evento onPressed del boton Presiona – ctrl+s y redibujara automáticamente _incrementCounter Es un método Que incrementa la variable _counter++

54 Examinamos los diferentes iconos del boton
Desde la siguientes url:

55 cambiando iconos del boton

56 Distribución de la Apps (carpeta)