Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Curso de Flutter

Curso de Flutter

Anahí Salgado Díaz de la Vega

Anahí Salgado Díaz de la Vega

Composición de un proyecto en Flutter

11/38
Recursos

Una vez instalado el plugin de Flutter en Android Studio veremos habilitada la opción Start a new Flutter project que será la opción la que usaremos para crear nuestro proyecto.

Seguidamente veremos los diferentes tipos de proyectos que podemos crear con Flutter: Flutter Application, Flutter Plugin, Flutter Package o Flutter Module. Para el proyecto que desarrollaremos en este curso escogeremos Flutter Application. Seguidamente indicamos las configuraciones básicas para definir nuestro proyecto como el nombre, ubicación del SDK, ubicación del proyecto, la descripción y el company domain, entre otros.

Una vez completado el proceso de inicialización, Android Studio habrá generado el sistema de archivos del proyecto que contendrá básicamente las siguientes carpetas:

  • flutter_app/ : carpeta raíz del proyecto, donde además crearemos entre otras cosas las carpetas donde guardaremos nuestros recursos o assets de la aplicación.
    • android/ : aquí se almacenarán todos los archivos que corresponden a un proyecto Android. Es en esta ubicación donde se encontrarán los archivos de configuración y demás recursos que pudiéramos querer retocar o modificar en Android Studio para comportamientos particulares de la app en esta plataforma, como el FlutterActivity o el AndroidManifest.

    • ios/ : similarmente, aquí se almacenarán todos los archivos que corresponden al sistema operativo iOS. Es en esta ubicación donde se encontrarán los archivos de configuración y otros que pudiéramos querer retocar o ajustar en XCode para comportamientos específicos relacionados con esta plataforma, como el FlutterAppDelegate o el info.plist, entre otros.

    • lib/ : es aquí donde encontramos todos los archivos que corresponden a nuestro proyecto con Dart y donde vive la aplicación Flutter. Todos los archivos que estaremos generando durante el curso se almacenarán en esta carpeta.

Hay un archivo especial llamado pubspec.yaml donde se guardan las configuraciones del proyecto. Este archivo está escrito en el lenguaje YAML, que es un formato de serialización de datos legible por humanos inspirado en XML. En este archivo tendremos que declarar todos los recursos externos o assets que vamos a utilizar en nuestro proyecto como: fuentes de letras, imágenes, etc.

Aportes 107

Preguntas 27

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

si no usas android studio o quieres iniciar por consola el proyecto puedes crear el proyecto desde la consola con

flutter create platzi_trips_app

cd platzi_trips_app

si estas corriendo en un dispotivo físico asegurate que este conectado con

flutter devices

y

flutter run

para correr el codigo

<h1>Instalar y usar Flutter en VisualStudio Code</h1>

👉 Instalar Flutter

https://flutter.dev/docs/get-started/install

👉 Setup VS Code

<h4>Instalar los plugins de Flutter y Dart</h4>
  1. Abre VS Code.
  2. Pulsa Ver > Paleta de comandos….
  3. Escribe “instalar” y selecciona Extensiones: Instalar Extensiones.
  4. Escribe “flutter” en la campo de busqueda de las extensiones, selcciona Flutter en la lista y click en Instalar.

También requiere tener instalado la extensión de **Dart**

<h4>Valida tu setup con Flutter Doctor</h4>
  1. Pulsa Ver > Paleta de comandos….
  2. Escribe “doctor” y selecciona Flutter:Run Flutter Doctor.
  3. Revisa la salida en el panel SALIDA.

👉 Crear el App

  1. Pulsa Ver> Paleta de comandos…
  2. Escribe “flutter”, y selecciona Flutter: New Project.
  3. Ingresa un nombre al proyecto, como myapp, y presiona Enter.
  4. Crea o selecciona el directorio principal para la nueva carpeta del proyecto.
  5. Espera a que la creación del proyecto se complete y el archivo main.dart aparecerá.

📑 Para tener un buen código en nuestros proyectos Flutter, es recomendable ver la guía de estilos de Dart.
https://dart.dev/guides/language/effective-dart/style

como siempre … dejan la instalación a nosotros … por gusto dicen que responderemos en los comentarios …JAMAS RESPONDEN ESTOS DE PLATZI…

Vine a aquí para poder terminar el curso de Dart ;n;

Si usan VS Code no usen el emulador oficial, usen Genymotion es que mucho mas liviano y permite hotreload.

Estos son algunos de los principales comandos que puedes usar:

flutter create <app_name>       // Crear una aplicación flutter
flutter doctor				 // Ver si el sistema esta listo para ejecutar aplicaciones flutter
flutter devices				 // Lista todos los dispositivos conectados
flutter run					// Abrir tu aplicación de flutter en un dispositivo

si quieres ver más comandos puedes usar :

flutter help

Nota: En el caso de que te salga el siguiente error

flutter: command not found

asegurate de abrir el archivo flutter_console.bat que se encuentra en la carpeta que descargaste de flutter

falta actualizar el curso

Flutter y dart es el Futuro 😄

Ya quiero empezar a programar con Flutter!

Wow! Cada vez noto que la estructura de proyecto de una app en Flutter es parecida a la de React Native.

Por ejemplo, todas las configuraciones especiales de React Native, se almacenan en el archivo package.json.

{
  "name": "citas",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "@react-native-community/datetimepicker": "^2.3.2",
    "react": "16.11.0",
    "react-native": "0.62.2",
    "react-native-modal-datetime-picker": "^8.5.4"
  },
  "devDependencies": {
    "@babel/core": "^7.9.0",
    "@babel/runtime": "^7.9.2",
    "@react-native-community/eslint-config": "^1.1.0",
    "babel-jest": "^25.4.0",
    "eslint": "^6.8.0",
    "jest": "^25.4.0",
    "metro-react-native-babel-preset": "^0.59.0",
    "react-test-renderer": "16.11.0"
  },
  "jest": {
    "preset": "react-native"
  }
}

Mientras que en Flutter, tenemos a este archivo llamado pubspec.yaml

name: flutter_trips
description: A new Flutter project.

version: 1.0.0+1

environment:
  sdk: ">=2.7.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^0.1.3

dev_dependencies:
  flutter_test:
    sdk: flutter

Como pueden ver, tienen un parecido entre si, aunque Flutter me sorprende por la cantidad de cosas que puedes hacer sin depender tanto de terceros como lo es en RN.

Ann Code, me encanto el curso. Platzi al parecer fue una gran inversión. Gracias por la dedicación 😄

Cuando iniciamos un proyecto flutter en la actualidad 2022 - podemos ver que se ve como esta imagen lo que hay que hacer es colocar la ruta de la carpeta del SDK que descargamos y oprimir en siguiente, como apreciamos en la imagen:

Luego de esto vemos este otro dialogo

En el colocamos el nombre del proyecto y donde dice project type hubicamos el tipo de aplicacion de flutter que necesitamos.

A mi este link me ayudo para configurar el flutter: flutter

De los tutoriales más completos que encontre:
https://www.youtube.com/watch?v=fDnqXmLSqtg

¿Cómo se genera un proyecto en VsCode?

Hola compañeros! Consulta: Si voy a usar VSCODE y un dispositivo android para la simulación, ¿es necesario descargar ANDROID STUDIO?
Gracias

todo bien en mac!

en mi mac todo bien hasta ahora. =D

Va bien el curso, esto complementa lo visto en Dart anteriormente

Para quienes usen VSCode basta con invocar Command Palette (Shift + cmd + p) en mac, escribir ‘flutter’ y seleccionar la opción Flutter: New Project.

Para los que usan Windows y aun tienen problemas con la instalación de Flutter y Android studio aqui les dejo un tutorial bastante útil.

Genymotion es un buen emulador de dispositivos móviles

![](
Yo sigo con el problema del cuadro rojo, ya reinstale android studio y ya actualice el sdk manager y sigo con la falla.
Alguno que pueda aconsejarme que hacer ?

Las carpetas más importantes son:
android: aqui se despliega la aplicación para Android
iOS: en la cual se añade el proyecto para iOS
test: para testear nuestro proyecto
lib: la carpeta principal del proyecto de flutter, en la cual encontramos

Dentro de lib esta el archivo main, que es el archivo principal de la aplicación de Flutter a partir del que realizaremos toda la aplicación.

hola a todos yo el problema que tengo es que no encuentra la ruta el android studio dice q rl sdk no tiene especificada la localizacion estoy usando ubuntu 22.04 que puedo hacer creo que es el path pero no se configurarlo Help Me

como que ya le toca una actualizada a este curso

con todo respeto , la profesora no ayuda en lo mas minimo en los problemas para instalar flutter !! y creo que no soy el unico que esta batallando demasiado,

El curso esta muy obsoleto es difícil avanzar podrían actualizarlo ?

Excelente curso!!!

En Windows 10, al ejecutar el comando “flutter doctor” sobre PowerShell me salia este error:

flutter doctor
Checking Dart SDK version...
Downloading Dart SDK from Flutter engine ...
& : No se puede cargar el archivo C:\Users\w10\OneDrive\Documentos\MobileDevelopment\Flutter\Development\flutter\bin\internal\update_dart_sdk.ps1. El archivo
C:\Users\w10\OneDrive\Documentos\MobileDevelopment\Flutter\Development\flutter\bin\internal\update_dart_sdk.ps1 no está firmado digitalmente. No se puede ejecutar este script en el sistema
actual. Para obtener más información acerca de la ejecución de scripts y la configuración de la directiva de ejecución, consulta about_Execution_Policies en
https:/go.microsoft.com/fwlink/?LinkID=135170.
En línea: 1 Carácter: 137
+ ... sdk.ps1'; & 'C:\Users\w10\OneDrive\Documentos\MobileDevelopment\Flutt ...
+                 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    + CategoryInfo          : SecurityError: (:) [], PSSecurityException
    + FullyQualifiedErrorId : UnauthorizedAccess

Se soluciona ejecutando directamente el script update_dart_sdk.ps1

¡Creado en mi primer proyecto de Flutter! Se llama Prana 🎉 ahora vamos a desarrollarlo.

Un comentario: tuve problemas con la configuración de Android Studio al momento de instalar y arrancar el programa: fue al momento de instalar porque, por defecto, elige la carpeta de usuario en el disco C y, si tiene caracteres especiales o letras como ñ, les puede impedir instalar o mostrarles alertas. La terminé instalando en la carpeta de All Users, espero que no genere inconvenientes.

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 2.0.6, on macOS 11.2.3 20D91 darwin-x64, locale en-PY)
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
[!] Xcode - develop for iOS and macOS
    ✗ CocoaPods installed but not working.
        You appear to have CocoaPods installed but it is not working.
        This can happen if the version of Ruby that CocoaPods was installed with is different from
        the one being used to invoke it.
        This can usually be fixed by re-installing CocoaPods.
      To re-install see https://guides.cocoapods.org/using/getting-started.html#installation for
      instructions.
[✓] Chrome - develop for the web
[✓] Android Studio (version 4.2)
[✓] VS Code (version 1.56.1)
[✓] Connected device (1 available)

! Doctor found issues in 1 category.

encontre este problema y no encuentro solucion para el mismo

A mi me sirvio poner en Configure > Settings > Plugins > Buscar Flutter
Y reiniciar el programa

Para arrancar con el proyecto en VS Code seguí los pasos que se indican en la documentación y todo perfecto, te indica hasta como arrancar el primer proyecto sin uso de la consola, puro VS Code https://flutter.dev/docs/get-started/install/windows

Esta es mi primera vez en un desarrollo híbrido, probé un poco ionic, pero
¿Cómo podría poner el project domain si no poseeo ningún sitio web o dominio?

otra manera de generar el proyecto seria en la terminal con el siguiente comando: flutter create --org com.test curso-platzi

Para que puedan ver todos los comandos disponibles de flutter usen el siguiente comando:

flutter help

necesito el flutter para 32 bits. No me parece. cuando lo quise instalar en una pagina que suspuestamente funcionaba para 32 bits me solto un error y me dijo que no era compatible. que podría hacer?

excelente explicación y es muy entendible como se organiza el proyecto, estaré ansioso de saber como se integran fuentes y demás cosas que desconozco desde android studio

Para quienes usen VSCode en mac tienen que abrir la Command Palette (Shift + cmd + p), escribir ‘flutter’ y seleccionar la opción Flutter: New Project.

@anncode tú ofreces servicios de desarrollo en anncode.com ?

Me recordó a la estructura usada en React-Native. A darle con todo! 😄

Excelente!!

Y cómo se vería en windows??

Muy interesante todo, se nota que Flutter sera el futuro

Ok todo en orden, solo estoy esperando Xcode …6gb… 😕

Super!!!

El pubspec.yaml es como configurar el gradle en android nativo

¿Como puedo saber que version de Powershell tengo?
¿Hay alguna forma de trabajar desde la consola del Visual Studio Code?

un poco diferente

De principio parecen muchos archivos y me marea un poco XD
Pero supongo que con el tiempo me iré acostumbrando

vacanos los aportes de CLI pero bahahhhh personalmente prefiero seguir usando las GUI de AS, dejar mi laptop y sentarme en el pc-gaming cada que quiero hacerle al flutter, ya estoy aburrido de ver lenguaje tras lenguaje, plataforma tras plataforma nueva cada 2 meses google con su cambiaderaaaaa tras cambiadera…

Con android studio se me corta la conexion todo el tiempo, alguna solucion?

El pubspec.yaml en Flutter es como el package.json en React Native.

pubspec.yaml es un archivo de configuración para un proyecto de Flutter
https://www.dartlang.org/tools/pub/pubspec

insert Brain Explosion !

Android SDK is up to date.
Unable to install Intel HAXM
Your CPU does not support required features (VT-x or SVM).
Unfortunately, your computer does not support hardware accelerated virtualization.
Here are some of your options:

  1. Use a physical device for testing
  2. Develop on a Windows/OSX computer with an Intel processor that supports VT-x and NX
  3. Develop on a Linux computer that supports VT-x or SVM
  4. Use an Android Virtual Device based on an ARM system image
    (This is 10x slower than hardware accelerated virtualization)

Me marco lo siguiente

Bueno si tarde un poco con la Mac, por ciertos errores con una librería de IOS, pero aquí estamos listos para seguir con las clases.

buenas, me fue imposible iniciar mi proyecto con Andoid Studio, queda inicializando y no me abre el proyecto. Con VSC no me da la opción de crear un proyecto con Flutter.
Alguien me puede ayudar?

genial

No me funciona al momento de compilarlo desde el Android Studio [ERROR:flutter/shell/gpu/gpu_surface_gl.cc(81)] Failed to setup Skia Gr context.

Excelente, amo este curso!!

Mi proyecto nunca termina de crearse en Android Studio, uso ubuntu 18.04 y tengo una Core i7 4770 con 32gb de RAM. ¿Algun idea de que este pasando?

Tengo este error “Gradle task assembleDebug failed with exit code 1”

Tuve algunos problemas con la instalación pero ya estoy listo para seguir 😄

El tema que tiene instalado ana es Material Theme, Oceanic y accent color lo tiene en Teal

Super!!

Para las personas que tienen algún error al crear el proyecto, por ejemplo que se tarda o en el inicio de android studio en la parte inferior en event les aparece un error, la solución que me sirvió fue instalar otra vez flutter pero ahora en vez de instalar el sdk en los archivos de programa lo instale en mi carpeta home (utilizo linux) si usan windows intentan instalarlo en cualquier ubicación menos en archivos de programa

Adjunto el link de como instalar flutter

https://flutter.dev/docs/get-started/install

Por el momento todo me funciono correctamente, tanto en visual studio como en visual code.

hola, no carga el emulador .dice “”" error initializing ADB “”" trate de cargar en AVD manager pero no me carga nada, alguien sabe lo que puede estar pasando? soy nueva en esto y me encuentro bastante perdida

todo bien! vamos bien!

Les dejo este vid que me ayudó muchísimo en cuestión de la instalación! https://www.youtube.com/watch?v=ed5ul2ZXZL4

La mejor 😄

super… definitivamente es una gran diferencia vamos creando y de una sola ves afirmando el poco conomiento del lenguaje de dart ya qu el curso del mismo fue muy confuso.

Muchas gracias.

tengo el problema de que en la pantalla de selección del sdk, selecciono la carpeta en donde se encuentra el mismo y el wizard me dice “Flutter SDK download cancelled”… a alguien más le sucedió esto?

Una última cosa, como emulo desde vscode? Gracias ❤️.

En este video se ve cómo instalarlo en MacOS Catalina, cambia respecto a Mojave únicamente por el reemplazo del bash por la z-shell como terminal por defecto.

https://www.youtube.com/watch?v=ZwUGHiroGBo&t=656s

me tirar error al importar las librerías de android

Después de crear el proyecto > flutter create .

flutter run -d chrome
Para ejecutar sus aplicaciones en el navegador

Aca un tutorial de como instalar todo lo que pide la profe

Buenas tardes.

Tengo un problema al ejecutar el comando flutter doctor obtengo el siguiente error:

Ya configure y agregue las variables de entorno correspondientes y reinicie el computador alguien tiene alguna idea de como podria solucionarlo?.

Que emoción 😄

tambien se puede hacer la ejecucion en la web, para darle ese soporte al proyecto escriban “flutter create .” luego, flutter run y seleccionan google Chrome. Antes de esto deben instalar el soporte web https://flutter.dev/docs/get-started/web

Bueno a mi me salio todo bien, no se olviden de ubicar la carpeta Flutter.
Saludos.

Carpeta

Genial!

Por mas que he buscado en internet no encuentro cómo corregir el error de IntelliJ IDEA.

¿Alguien que haya podido resolver el error?

Flutter

$ sudo unzip -d /opt flutter_macos_v1.12.13+hotfix.5-stable.zip
$ sudo nano /etc/paths
/opt/flutter/bin
$ sudo chown -R $USER /opt/flutter

Compiló 😀

No olviden que flutter tiene diferentes canales para poder trabajar y descargarlo a nuestro equipo

https://github.com/flutter/flutter/wiki/Flutter-build-release-channels

Si queremos cambiar de canal podemos usar
$ flutter channel

  • stable
    beta
    dev
    master

Instalación fácli de Flutter paso a paso: https://www.youtube.com/watch?v=JVyVJflZOek

Abrí y cerré Android y no puedo correr los dispositivos que ya tenía cargados, quisera saber porque así que no importa que ya haya pasado mucho tiempo
![](

Un comando más específico para crear un app sería el siguiente:

flutter create --ios-language swift --android-language kotlin --org com.domain appname

Así puedes establecer el lenguaje Swift como default para iOS, Kotlin como default para Android y de una vez el package-name de tu app. Finalmente quedará como com.domain.appname

he intentando correr la aplicación con todos los emuladores conocidos y nada funciona, incluso con mi celular pero igual no funciona, en el flutter doctor si lo reconoce mi dispositivo, pero al momento de ejecutar la aplicación no lo compila, he estado probando tanto en Android studio como en VSC pero nada 😦
no funciona ni con emulador de android studio, ni con mi celular, ni con Genymotion y también probé con NoxPLayer y la historia siempre es la misma :v
HELP ME!

Linux
Si fuiste primero a VSCode e instalaste Flutter (una vez instalado) necesitas:

Ctrl+Shift+P 
Escribir: Flutter: New Project

les tirara error porque no ha instalado Flutter por lo que en la consola:

sudo snap install flutter --classic
flutter doctor

el SDK esta en el path: /home/(username)/snap/flutter/common/flutter
pero cerrando VSCode, vuelven a iniciarlo y ponen

Ctrl+Shift+P 
Escribir: Flutter: New Project

ya deberian poder cargar un proyecto

Para macOS yo me evite (casi) todo el proceso de descargar, instalar y demás con brew, seguí los siguientes pasos:

  1. brew cask install flutter
  2. brew cask install android-studio
  3. Abrí android studio para que se instalara el SDK y demás dependencias
  4. En terminal ejecute flutter doctor --android-licenses para aceptar las licencias (iba ejecutando flutter doctor para ver el checklist de las cosas que me faltaban)
  5. Desde la app store descargué Xcode (se tardó una eternidad 😦 ), ejecuté, acepte licencia, y se instalaron dependencias
  6. Instale cocoapods desde la terminal con sudo gem install cocoapods
  7. Desde Android Studio descargue los plugins de Flutter y Dart
  8. Ejecute el comando flutter doctor para revisar que todos estuviera correcto

Espero le sirva a alguien estos pasos.

PD: No se si el orden que seguí fue el correcto