Composición de un proyecto en Flutter

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

👉 Instalar Flutter

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

👉 Setup VS Code

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

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…

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.

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.

Instalacion paso a paso: https://giancarlocode.com/tutoriales-de-flutter/como-instalar-flutter-en-windows-10-en-android-studio-y-visual-studio-code/

falta actualizar el curso

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

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

El curso esta desactualizado. El codigo que me genero el editor al momento de crear el proyecto difiere mucho de lo que se explica en el contenido del curso. @Platzi, mejor borren el curso o actualicen.

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.

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,

Deberían de actualizar este curso.

Ya quiero empezar a programar con Flutter!

Ann Code, me encanto el curso. Platzi al parecer fue una gran inversión. Gracias por la dedicació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

¿Cómo se genera un proyecto en VsCode?

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.

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

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.

Bueno por el momento todo ok

Bueno anteriormente instale sdk de Flutter y cuando abrí el proyecto VSCODE, me salieron varias configuraciones para instalar extensiones adicionales y pues VSC las instaló automáticamente, aunque la verdad veo que el Android studio genera todas las carpetas así como de manera automática, como el paquete.

Se me complico la instalación este video me ayudo muchísimo
https://www.youtube.com/watch?v=0D1LvbkmzZo&t=222s

Instalar Flutter en el 2022:

https://www.youtube.com/watch?v=NF6kQJY5kL4

uff instalar ese entorno necesita un montón de cosas.

Para quienes tienen problemas de permisos con el sdk, pueden ir a la carpeta que extrajeron, dan click derecho > propiedades > desabiliten la opcion de solo lectura > Aceptar

Para quienes usan VS CODE y tienen problemas para empezar el proyecto, en esta lista de reproducción se explica super bien como se hace.
https://www.youtube.com/playlist?list=PLCKuOXG0bPi3xBRYOmcfoqrchgRJOafo9

les puedo recomendar usar visual studio code para crear el proyecto solo deven dar ctrl + shif + p , en la ventana buscan flask y crean el proyecto , es mas rapido y menos pesado que usar directamente android studio

a terminar!

Dejo link con video de configuracion VisualStudio w10 w11 2022

https://www.youtube.com/watch?v=PALKKarBYIQ

En caso de que quieran saber que es lo que les hace falta para tener todo al 100% con la instalacion del entorno una recomendacion es correr el comando

flutter doctor

Esto les dira que es lo que ya esta instalado y si hay algun problema o algo que no este instalado de igual manera este comando les dira.

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

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