Flutter
Framework
Índice
Ejemplos de uso
¿Qué es?
Características
Contextos recomendados para usarlos
Proceso de instalación
Librerías que se pueden usar junto al framework
Ventajas y desventajas
Estructura de archivos
¿Qué es Flutter?
Flutter es un framework de código abierto creado por Google para el desarrollo de aplicaciones móviles y páginas web multiplataforma.
01
Características
Características
Código nativo
Velocidad de desarrollo
Rendimiento nativo
Flutter incluye los llamados widgets a cargo de la incorporación de diferencias críticas entre plataformas, como lo son la navegación, el scrolling o los íconos, entre otros, que permiten ofrecer un rendimiento totalmente nativo para iOS y para Android.
Flutter emplea opciones como Hot Reload, que contribuye a la rápida y fácil experimentación, así como la adición de funcionalidades y corrección de bugs de una manera más rápida.
Flutter permite el desarrollo en cualquier equipo o sistema operativo, ya sea de una versión actual o una antigua, incluso sin necesidad de impactar sobre el diseño de esta.
Características
Widgets
Multiplataforma
Lenguaje de programación
El SDK (kit de desarrollo de software) de Flutter se basa en el lenguaje de programación Dart, también desarrollado por Google con el fin de convertirse en un sucesor del clásico JavaScript que, igual que este, se ejecuta directamente en el navegador.
Flutter simplifica el desarrollo para varias plataformas ya que se usa la misma base de código para todas ellas.
Los widgets son los recursos que mantienen, principalmente, el funcionamiento de Flutter; conforman una jerarquía y toman como base su composición, por lo que los widgets más recientes se integran al interior.
02
Proceso de instalación
¿Cómo instalar Flutter?
01
02
03
Descarga el SDK de Flutter Visita la página de descarga oficial de Flutter en https://docs.flutter.dev/get-started/install/windows
Extrae el archivo ZIP y cambia su ubicaciónDescomprime el archivo ZIP descargado y luego mueve la carpeta llamada Flutter al Disco local C.
Configura el PATH del sistema Verifica que se encuentre C:\flutter\bin. Si no se encuentra, la creas dando clic en nuevo.
*Pasos para Windows.
¿Cómo instalar Flutter?
04
05
Verifica la instalación Abre una ventana de terminal (como el símbolo del sistema o PowerShell) y ejecuta el siguiente comando para verificar que Flutter se haya instalado correctamente:
flutter doctor
Configura un editor de código:
Para desarrollar aplicaciones de manera efectiva, es recomendable utilizar un editor de código; puedes instalar VS Code desde el sitio oficial de Visual Studio Code y luego instalar la extensión de Flutter para VS Code.
*Pasos para Windows.
03
Ventajas y desventajas
Ventajas
Desventajas
- Tamaño de la aplicación
- Curva de aprendizaje
- Limitaciones de API nativa
- Dependencia de terceros
- Menos maduro que las tecnologías nativas
- Desarrollo multiplataforma
- Rendimiento
- Widgets personalizables
- Productividad del desarrollador
- Comunidad activa
- Lenguaje Dart
- Licencia de código abierto
vs
04
Estructura de archivos
Las carpetas y archivos más importantes de Flutter se estructuran en...
- android, ios, linux, macos y windows: son carpetas que contienen una aplicación completa, respectivamente con todos los archivos correspondientes de cada plataforma. Siempre que se quiera implementar cualquier característica específica como, por ejemplo, los permisos, se debe implementar en estos directorios.
- lib: esta es la carpeta donde normalmente se encuentran los archivos que conforman el código fuente de la aplicación Flutter. Se puede estructurar como si fuera un sistema de archivos y permite crear directorios y subdirectorios.
- test: esta es la carpeta donde se guardan los archivos para realizar pruebas sobre la aplicación de Flutter.
+ info
Las carpetas y archivos más importantes de Flutter se estructuran en...
- build: carpeta donde se genera el código al compilar una aplicación Flutter. Es donde se guarda la aplicación android apk generada.
- .metadata: este archivo es administrado por Flutter automáticamente y se usa para controlar las propiedades del proyecto Flutter, actualizaciones, etc. Este archivo sólo lo cambia Flutter y no debe ser modificado manualmente.
- .gitignore: este archivo indica todos los archivos y directorios que deben ser ignorados en caso de subir a un repositorio git nuestro proyecto.
+ info
Las carpetas y archivos más importantes de Flutter se estructuran en...
- .packages: este archivo contiene metadatos del proyecto Flutter y la lista de dependencias del proyecto. Es generado automáticamente por el SDK de Flutter y no debe ser modificado.
- .pubspec.lock: este archivo indica cómo se construye el archivo pubspec.yaml. No debe editarse.
- .pubspec.yaml: este archivo permite establecer la configuración general del proyecto, como nombre, descripción y versión del proyecto. También permite indicar las dependencias del proyecto (cuando hacemos uso de una nueva funcionalidad, por ejemplo) e indicar archivos de recursos, como imágenes, audios, etc.
+ info
05
Ejemplos de uso
"Hola, mundo" de colores
"Hola, mundo" de colores
Botones
El "Hola, mundo"
Login sencillo con indicador de progreso animado
Login sencillo con indicador de progreso animado
Actualizar progreso del formulario
Campos del formulario
Animación del cambio de color
06
Contextos recomendados para usarlo
Desarrollo de aplicaciones para Android y iOS
Se pueden desarrollar aplicaciones desde un único código fuente; proporciona una gran cantidad de widgets incluidos en el propio framework sin limitaciones; utiliza compilación anticipada (AOT), lo que permite un mejor rendimiento en los dispositivos móviles.
Desarrollo de aplicaciones web móviles
Desarrollo de aplicaciones web de alto rendimiento para plataformas Android y iOS con compatibilidad nativa con aplicaciones web progresivas.
07
Librerías que se pueden usar junto al framework
Algunas librerías que se pueden usar con Flutter son...
Painting
Gestures
Reconocedores de gestos.
Librería de pintura de flutter.
Webview
Sirve para visualizar páginas web dentro de una aplicación.
Physics
Animation
Simulador de físicas simple de una dimensión, como resortes, fricción y gravedad.
Provee de bloques de construcción básicos para implementar animaciones.
SharedPreferences
Conjunto de herramientas para almacenamiento sostenido de datos.
¡Gracias!
Universidad Autónoma de YucatánUnidad Multidisciplinaria Tizimín
Fundamentos del Frontend para Crear Interfaces Web Atractivas
Integrantes del equipo:
Ibis Carrillo Araujo Luz Rocío García Peña Edwin Apolonio Martín Aké Angel David Ricalde Che
Licenciatura:
Ingeniería de Software
Semestre:
Séptimo
Framework Flutter
Luz Rocío García Peña
Created on September 11, 2023
Start designing with a free template
Discover more than 1500 professional designs like these:
View
Visual Presentation
View
Terrazzo Presentation
View
Colorful Presentation
View
Modular Structure Presentation
View
Chromatic Presentation
View
City Presentation
View
News Presentation
Explore all templates
Transcript
Flutter
Framework
Índice
Ejemplos de uso
¿Qué es?
Características
Contextos recomendados para usarlos
Proceso de instalación
Librerías que se pueden usar junto al framework
Ventajas y desventajas
Estructura de archivos
¿Qué es Flutter?
Flutter es un framework de código abierto creado por Google para el desarrollo de aplicaciones móviles y páginas web multiplataforma.
01
Características
Características
Código nativo
Velocidad de desarrollo
Rendimiento nativo
Flutter incluye los llamados widgets a cargo de la incorporación de diferencias críticas entre plataformas, como lo son la navegación, el scrolling o los íconos, entre otros, que permiten ofrecer un rendimiento totalmente nativo para iOS y para Android.
Flutter emplea opciones como Hot Reload, que contribuye a la rápida y fácil experimentación, así como la adición de funcionalidades y corrección de bugs de una manera más rápida.
Flutter permite el desarrollo en cualquier equipo o sistema operativo, ya sea de una versión actual o una antigua, incluso sin necesidad de impactar sobre el diseño de esta.
Características
Widgets
Multiplataforma
Lenguaje de programación
El SDK (kit de desarrollo de software) de Flutter se basa en el lenguaje de programación Dart, también desarrollado por Google con el fin de convertirse en un sucesor del clásico JavaScript que, igual que este, se ejecuta directamente en el navegador.
Flutter simplifica el desarrollo para varias plataformas ya que se usa la misma base de código para todas ellas.
Los widgets son los recursos que mantienen, principalmente, el funcionamiento de Flutter; conforman una jerarquía y toman como base su composición, por lo que los widgets más recientes se integran al interior.
02
Proceso de instalación
¿Cómo instalar Flutter?
01
02
03
Descarga el SDK de Flutter Visita la página de descarga oficial de Flutter en https://docs.flutter.dev/get-started/install/windows
Extrae el archivo ZIP y cambia su ubicaciónDescomprime el archivo ZIP descargado y luego mueve la carpeta llamada Flutter al Disco local C.
Configura el PATH del sistema Verifica que se encuentre C:\flutter\bin. Si no se encuentra, la creas dando clic en nuevo.
*Pasos para Windows.
¿Cómo instalar Flutter?
04
05
Verifica la instalación Abre una ventana de terminal (como el símbolo del sistema o PowerShell) y ejecuta el siguiente comando para verificar que Flutter se haya instalado correctamente: flutter doctor
Configura un editor de código: Para desarrollar aplicaciones de manera efectiva, es recomendable utilizar un editor de código; puedes instalar VS Code desde el sitio oficial de Visual Studio Code y luego instalar la extensión de Flutter para VS Code.
*Pasos para Windows.
03
Ventajas y desventajas
Ventajas
Desventajas
vs
04
Estructura de archivos
Las carpetas y archivos más importantes de Flutter se estructuran en...
+ info
Las carpetas y archivos más importantes de Flutter se estructuran en...
+ info
Las carpetas y archivos más importantes de Flutter se estructuran en...
+ info
05
Ejemplos de uso
"Hola, mundo" de colores
"Hola, mundo" de colores
Botones
El "Hola, mundo"
Login sencillo con indicador de progreso animado
Login sencillo con indicador de progreso animado
Actualizar progreso del formulario
Campos del formulario
Animación del cambio de color
06
Contextos recomendados para usarlo
Desarrollo de aplicaciones para Android y iOS
Se pueden desarrollar aplicaciones desde un único código fuente; proporciona una gran cantidad de widgets incluidos en el propio framework sin limitaciones; utiliza compilación anticipada (AOT), lo que permite un mejor rendimiento en los dispositivos móviles.
Desarrollo de aplicaciones web móviles
Desarrollo de aplicaciones web de alto rendimiento para plataformas Android y iOS con compatibilidad nativa con aplicaciones web progresivas.
07
Librerías que se pueden usar junto al framework
Algunas librerías que se pueden usar con Flutter son...
Painting
Gestures
Reconocedores de gestos.
Librería de pintura de flutter.
Webview
Sirve para visualizar páginas web dentro de una aplicación.
Physics
Animation
Simulador de físicas simple de una dimensión, como resortes, fricción y gravedad.
Provee de bloques de construcción básicos para implementar animaciones.
SharedPreferences
Conjunto de herramientas para almacenamiento sostenido de datos.
¡Gracias!
Universidad Autónoma de YucatánUnidad Multidisciplinaria Tizimín
Fundamentos del Frontend para Crear Interfaces Web Atractivas
Integrantes del equipo:
Ibis Carrillo Araujo Luz Rocío García Peña Edwin Apolonio Martín Aké Angel David Ricalde Che
Licenciatura:
Ingeniería de Software
Semestre:
Séptimo