Introducción a Flutter y Dart
¿Vale la pena Aprender Flutter?
Introducción a Flutter y Dart
Estructura Básica de una Aplicación Flutter
Sintaxis Básica de Dart
Widgets en Flutter
¿Qué son los Widgets en Flutter y Cómo Funcionan?
Widgets Básicos en Flutter
¿Cómo estructurar pantallas en Flutter con TabBar?
Cómo Personalizar Widgets en Flutter
Manejo de Recursos y Formularios
Manejo de Assets en Flutter: Imágenes
Formularios en Flutter
Implementación de formularios en Flutter
Navegación y APIs
Navegación entre Pantallas en Flutter
Crea una API en Segundos con Mockoon
Conexión a APIs en Flutter
Gestión de Estados
Cómo Usar ListView en Flutter
Manejo de Estados de Carga y Errores en Flutter
Gestión del Estado con Provider en Flutter
Cómo Usar la Librería Provider en Flutter
Gestión del Estado StatefulWidget en Flutter
StatefulWidget en Flutter
Experiencia de Usuario
Flujo de una Aplicación Flutter
Animaciones en Flutter
Internacionalización y Accesibilidad en Flutter
Publicación de Apps
¿Cómo hacer APK en Flutter?
Cómo crear una cuenta de desarrollador de Google Play
¿Cómo subir una aplicación Flutter a Google Play?
Introducción a Flutter y Dart
2/26Recursos
Transcripción
Crear un entorno de desarrollo en Flutter es fundamental para empezar a construir aplicaciones móviles, web y de escritorio desde un único código base. Este proceso implica instalar herramientas clave como Android Studio y Visual Studio Code, configurar el SDK de Flutter y preparar emuladores para pruebas.
¿Qué es Flutter y por qué usarlo?
- Flutter es un framework de Google que permite crear aplicaciones multiplataforma con un único código base.
- Funciona con Dart, un lenguaje de programación diseñado para crear aplicaciones de alta calidad.
- Los widgets son los bloques de construcción esenciales en Flutter, utilizados para diseñar interfaces de usuario.
¿Cómo instalar el SDK de Flutter?
-
Descarga del SDK:
- Ve a la documentación oficial de Flutter y descarga el archivo ZIP.
- Extrae el contenido en una carpeta llamada
dev, dentro del directorio de usuario (por ejemplo,C:\Users\tu_usuario\dev).
-
Configuración de variables de entorno:
- Busca “Entorno” en el buscador de tu sistema operativo y edita las variables de entorno.
- En la sección de
Path, agrega la ubicación de la carpetabindentro del directorio de Flutter.
-
Comandos iniciales:
flutter doctor: verifica la instalación y muestra un checklist con los requisitos pendientes.flutter create: permite crear nuevos proyectos.flutter run: despliega las aplicaciones en el emulador o dispositivo.
¿Cómo instalar y configurar Android Studio?
- Descarga e instala Android Studio desde su página oficial.
- Durante la instalación:
- Acepta los términos y condiciones.
- Configura los emuladores seleccionando dispositivos como Pixel 3.
- Descarga la versión recomendada del sistema operativo Android.
- Instala el plugin de Flutter desde la sección de Plugins en Android Studio.
- Crea un nuevo proyecto seleccionando el generador de Flutter y verificando la ruta del SDK.
¿Cómo instalar y configurar Visual Studio Code?
- Descarga e instala Visual Studio Code desde su sitio oficial.
- Agrega la extensión de Flutter desde el Marketplace de extensiones.
- Crea un nuevo proyecto:
- Usa la barra de comandos (Ctrl+Shift+P) y selecciona
Flutter: New Project. - Define el nombre y ubicación del proyecto.
- Usa la barra de comandos (Ctrl+Shift+P) y selecciona
- Confirma la confianza en los autores de los archivos del proyecto.
Aportes 23
Preguntas 1
Ordenar por:
Además de Android Studio, hay varios emuladores que se pueden usar para desarrollar una aplicación en Flutter. Aquí hay algunos ejemplos:
1. Visual Studio Code: Este es un editor de código muy popular entre los desarrolladores de Flutter. Visual Studio Code viene con una extensión llamada Flutter que proporciona una variedad de herramientas para desarrollar aplicaciones Flutter, incluido un emulador integrado.
2. IntelliJ IDEA: IntelliJ IDEA es un entorno de desarrollo integrado que se utiliza comúnmente para el desarrollo de aplicaciones móviles y web. IntelliJ IDEA también admite el desarrollo de aplicaciones Flutter y viene con un emulador integrado.
3. Genymotion: Genymotion es un emulador de Android que se utiliza comúnmente para el desarrollo de aplicaciones móviles. Genymotion admite la integración con Flutter y se puede utilizar para probar y depurar aplicaciones Flutter.
4. iOS Simulator: Si está desarrollando una aplicación Flutter para iOS, puede utilizar el simulador de iOS que viene con Xcode. Xcode es una herramienta de desarrollo de iOS que proporciona un entorno integrado para el desarrollo de aplicaciones.
Es importante tener en cuenta que, independientemente del emulador que elija, deberá configurar correctamente su entorno de desarrollo para asegurarse de que Flutter se integre correctamente.
Flutter es como un lienzo donde dibujas aplicaciones, y Dart son las herramientas y pinceles que necesitas para crear. Flutter utiliza widgets como bloques de construcción para desarrollar aplicaciones nativas en iOS y Android desde un único código base. Es fundamental para crear un entorno de desarrollo eficiente y permite la creación de aplicaciones de alto rendimiento.
Si les da muchos problema las instalaciones o quieren probar una alternativa, vayan a la pagina de Project IDX, es como un VScode 'online', de google, y viene con todo ya instalado junto con un emulador.
<https://idx.dev/>
Faltaria intalar flutter para mac
Tener la última versión de Android en el emulador es recomendable, ya que te permite probar las características más recientes y optimizaciones del sistema operativo. Esto puede influir en el comportamiento de tu aplicación, pues algunas APIs y funcionalidades pueden no estar disponibles en versiones anteriores. Sin embargo, también es importante considerar la compatibilidad con los dispositivos de tus usuarios. Probar en múltiples versiones es ideal para asegurar un rendimiento óptimo en tu app.
El flutter doctor me pidió hacer un par de pasos adicionales en linux, que fue instalar el "cmdlinetools;latest" y aceptar algunas licencias, para las licencias el mismo doctor dice que se ejecute
`$flutter doctor --android-licenses`
`las mismas que por default estan en No así que a cada una debe escribir el Y para aceptarlas.`
PD. El android studio que instalé primero desde el centro de aplicaciones de Ubuntu no lo detectó el flutter doctor, así que lo desinstalé y lo descargue desde la página de android, lo descomprimí en la ruta /opt y cree un enlace simbólico en /bin/studio para poder ejecutarlo más fácil sin poner toda la ruta (después cree un lanzador)
`$ ls -l /usr/bin/studio `
`lrwxrwxrwx 1 root root 30 nov 22 23:10 /usr/bin/studio -> /opt/android-studio/bin/studio`
Extensiones instaladas 😁
¿y para mac? me pueden guiar, estoy iniciando de 0 conocimiento
Asegurense de abrir el Android Studio y Visual Studio Code como admin para que les pueda crear proyecto haciendo uso del sdk
\#!/bin/dart
`void main() {`
` print('Hello, World!');`
`}`
Corrección de errores para el comando flutter doctor:
En tal caso que a la hora de hacer el proceso de Visual Studio code que van a la barra de buscar y le dan > flutter - nuevo proyecto y les sal esto
!\[3922236a9cfcbe0a3e10100663f08985.png]\(:/f64636b4f438408e95513a5e92ad2295)
!\[a5b78f85aa5fe2bdf56b8a436edccbb5.png]\(:/8df7ea2d4ba3493b8ed077b675b38e02)
lo que tienen que hacer para instalar el cmdline-tools van a android estudio en la opcion de tools
!\[d3c22bc7bd8256f4b24a834f97536d5f.png]\(:/4750450306f74a2699a6127290734049)
aca hay que chulear el que dice comand line tools
!\[409202c0e79933af12979355862b8bd0.png]\(:/e14bae204a444aed86792f2e99c26950)
aceptamos todos los terminos, por ultimo nos dice que instalemos Visual Studio , descargamos el ejecutable en mi caso community y instalamos el paquete para Desktop development with C++
Buen chicos, aqui estoy empezando el curso... hay algo raro que me sucede cuando abro el visual code que me pide instalar un subsistema de linux, debo instalarlo o como hago para que deje de molestar el comando que abre
Hola yo soy usuario de windows y de mac pero en mac soy totalmente nuevo, me hubiera gustado que hubiera una sección de como hacer la instalación en Mac tanto para chips m1 en adelante como para las que tienen intel. La mía es una m3, si alguien sabe cómo hacerlo le agradecería mucho
Cuando Visual Studio Code indica que falta algo, puede referirse a dependencias no instaladas, extensiones necesarias o configuración del entorno. Asegúrate de tener instalada la extensión de Flutter en VS Code, ya que es crucial para trabajar con proyectos Flutter. Además, verifica que el SDK de Flutter esté correctamente configurado como variable de entorno. Puedes usar el comando `flutter doctor` en la terminal para identificar qué componentes faltan y seguir las recomendaciones para completar la instalación.
Solo para aquellos que están incómodos después de instalar VSCode y ejecutan el comando flutter doctor de nuevo.
Les segirá diciendo que no está instalado Visual Studio.
Si solo desarrollarás Apps Mobile, solo ignóralo.
En el vídeo confunde Visual Studio con Visual Studio Code, que son cosas completamente diferentes.
Visual Studio es un IDE para ciertos entornos de desarrollo, como aplicaciones de Windows con Flutter.
Visual Studio Code: es el editor de código ligero que todos aman.
NO CONFUNDIR.
Flutter es un framework de Google que permite desarrollar aplicaciones móviles, web y de escritorio con una sola base de código. Utiliza Dart como lenguaje de programación y se basa en widgets como bloques de construcción. En la introducción se aborda la configuración del entorno de desarrollo, incluyendo la instalación de Android Studio y Visual Studio Code, así como el uso de comandos como `flutter doctor` para verificar la instalación y `flutter create` para iniciar proyectos. La configuración adecuada del emulador y del IDE es crucial para comenzar a desarrollar aplicaciones eficaces.
Instalación en fedora(linux) , saben los pasos
Otra forma que me parece muy útil mencionar, es utilizar el móvil conectado vía USB a nuestra pc ( estoy mencionándolo desde un contexto de windows ). El móvil debe estar en modo desarrollador. Una vez tengamos nuestro flutter instalado como la profe indico, incluso el Android Studio, nos ubicamos en el main.dart y presionamos F5, así podemos escoger el dispositivo que tenemos conectado vía USB en modo desarrollador, y se abre la app flutter que estamos programando.
en la documentacion oficial dice que debemos colocar a flutter de primer en las va![]()![]()ribales de entorno
Dart es el lenguaje de programación y Flutter es el Framework para crear apps móviles.
**Introduccion Aportes:**
\- La instalacion que se hace en la clase es para windows mas no para mac.
\- Aconsejo utilizar la documentacion ya que **<u>identifica</u>** que dispositivo: <https://docs.flutter.dev/get-started/install>
\- Pueden usar otras opciones para comenzar tu primera app con flutter como IDX <https://idx.dev/>
\- En el dart pad puedes comenzar a probar de manera sencilla flutter. Solo sigue esto(de la imagen) en el sitio: <https://dartpad.dev/>
Por que cuando creo el proyecto se demora no se ve nada de avance o estoy haciendo lago mal
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?