Flutter

Flutter Ventajas de Flutter:

Flutter Ventajas de Flutter:

Dart

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: https://medium.com/@roipeker/caracter%C3%ADsticas-interesantes-de-dart-7322fc09faa0 https://dart.dev/guides/language/language-tour

Flutter Flutter para Android y iOS

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: https://flutter.dev/docs/get-started/install

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

Hola Mundo dart https://dart.dev/#try-dart

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();

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

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

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

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

Estructuras de Control

Estructuras de Control

Estructuras de Control

Estructuras de Control

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

Creación de mi Primer Proyecto Application

Creación de mi Primer Proyecto Seleccionamos la carpeta

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

Creación de mi Primer Proyecto Obtenemos lo siguiente

Creación de mi Primer Proyecto Ejecutamos en genymotion

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

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.

Explicación Breve Nuestro entorno de trabajo:

Explicación Breve Quitamos los comentarios-clean code:

Explicación Breve Lo ejecutamos en genymotion:

Explicación Breve Documentamos Temporalmente

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

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.

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.

Explicación Breve Documentamos Temporalmente

Algo de Teoría Previamente Arbol de Widget

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.

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

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

Algo de Teoría Previamente Arbol de Widget

Explicación Breve Observando el Arbol de Widget o Controles

Explicación Breve Observando el Arbol de Widget o Controles

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

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

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

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

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

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

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

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

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

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++

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++

Examinamos los diferentes iconos del boton Desde la siguientes url: https://fontawesomeicons.com/flutter/icons https://api.flutter.dev/flutter/material/Icons-class.html https://www.fluttericon.com/

cambiando iconos del boton

Distribución de la Apps (carpeta)