Diferencia entre revisiones de «Flutter Hola Mundo»

De MediaWiki
Ir a la navegación Ir a la búsqueda
 
(No se muestran 4 ediciones intermedias del mismo usuario)
Línea 7: Línea 7:
 
* Como [https://wiki.cifprodolfoucha.es/index.php?title=Programaci%C3%B3n_de_dispositivos_m%C3%B3viles_con_FLUTTER#Unidad_1%3A_Instalaci.C3.B3n_y_puesta_en_marcha expliqué] en los puntos anteriores de esta sección, necesitamos tener todo instalado y un emulador creado.
 
* Como [https://wiki.cifprodolfoucha.es/index.php?title=Programaci%C3%B3n_de_dispositivos_m%C3%B3viles_con_FLUTTER#Unidad_1%3A_Instalaci.C3.B3n_y_puesta_en_marcha expliqué] en los puntos anteriores de esta sección, necesitamos tener todo instalado y un emulador creado.
  
−
 
+
<br />
 +
===Android Studio===
 
<gallery caption="Primera aplicación en Flutter" widths="350" heights="300px" perrow="2">
 
<gallery caption="Primera aplicación en Flutter" widths="350" heights="300px" perrow="2">
 
Image:Flutter_instalacion13.JPG | Iniciamos el Android Studio o si ya estamos en un proyecto, creamos uno nuevo en File-> '''New Flutter Proyect'''.
 
Image:Flutter_instalacion13.JPG | Iniciamos el Android Studio o si ya estamos en un proyecto, creamos uno nuevo en File-> '''New Flutter Proyect'''.
Línea 16: Línea 17:
 
Image:Flutter_instalacion18.JPG | Si presionamos el botón flotante, el contador se incrementará.
 
Image:Flutter_instalacion18.JPG | Si presionamos el botón flotante, el contador se incrementará.
 
</gallery>
 
</gallery>
 +
 +
 +
 +
<br />
 +
 +
===VS Code===
 +
<gallery caption="Primera aplicación en Flutter en VS Code" widths="350" heights="300px" perrow="2">
 +
Image:Flutter_instalacion13_code.png | Abrimos la paleta de VSCode. Lo podemos hacer desde el menú superior => '''View''' => '''Command Palette''' o pulsando la combinación de teclas Control+Shift+N. Escribimos flutter y escogemos la opción '''Nuevo proyecto Flutter'''.
 +
Image:Flutter_instalacion14_code.jpg | Escogemos la opción Empty Project si queremos empezar con una aplicación vacía, Application si queremos que el proyecto se cree con una base o template ya hecho con un código de ejemplo, o la opción Skeleton Templates, que son plantillas ya hechas con código (por ejemplo en https://github.com/flutter/samples). En el ejemplo a seguir escogemos la opción Application.
 +
Image:Flutter_instalacion15_code.jpg | Escogemos el directorio donde se van a crear los proyectos Flutter.
 +
Image:Flutter_instalacion16_code.jpg | Indicamos el nombre que va a llevar la aplicación (proyecto) y pulsamos enter. Si aparece un mensaje de si queremos confiar (trust) en el autor debemos escoger si (YES).
 +
Image:Flutter_instalacion17_code.jpg | Teniendo un emulador previamente creado podemos lanzarlo antes de iniciar la aplicación o al ejecutarla ya indicará si queremos ejecutarla en un emulador o en la propia máquina.
 +
Image:Flutter_instalacion18_code.jpg | Una vez creado el proyecto aparecerá un código de muestra de una aplicación la cual la podemos ejecutar (si [https://wiki.cifprodolfoucha.es/index.php?title=Flutter_Emuladores tenemos instalado previamente un emulador]). <u>Debemos de estar situados en dicho archivo (main.dart)</u>
 +
Image:Flutter_instalacion18.JPG | Si presionamos el botón flotante, el contador se incrementará.
 +
</gallery>
 +
 +
==Conociendo un poco el VS Code==
 +
 +
<br /><br />
 +
 +
<center>
 +
{{#ev:youtube|1aRMkq5KhzE}}
 +
</center>
 +
 +
  
  
Línea 27: Línea 53:
 
{{#ev:youtube|4gBLZ-iW3Bc}}
 
{{#ev:youtube|4gBLZ-iW3Bc}}
 
</center>
 
</center>
 +
 +
  
 
<br />
 
<br />

Revisión actual del 19:07 16 sep 2024

Primera aplicación

  • En este apartado vamos a ejecutar nuestra primera aplicación Flutter escrita en lenguaje DART.
El código no lo vamos a escribir nosotros :) y ya aparece al crear un nuevo proyecto.
Es el equivalente al 'Hola Mundo' que se explica en cualquier lenguaje de programación y lo empleamos para comprobar que todo funciona correctamente.
  • Como expliqué en los puntos anteriores de esta sección, necesitamos tener todo instalado y un emulador creado.


Android Studio

  • Primera aplicación en Flutter

  • Iniciamos el Android Studio o si ya estamos en un proyecto, creamos uno nuevo en File-> New Flutter Proyect.

  • Escogemos la opción Flutter Application.

  • La demos un nombre al proyecto y si no aparece, debemos de indicar la ruta al SDK Flutter, como ya vimos durante la instalación.

  • Indicamos el nombre del paquete asociado al proyecto (todas las aplicaciones tienen que tener un nombre de paquete único. Normalmente se suele poner el dominio de la compañía más el nombre de la aplicación, por ejemplo, com.google.maps). Las otras dos opciones sirven por si queremos añadir dentro de nuestra aplicación en lenguaje DART, código en el lenguaje Kotlin para aplicaciones Android o código en el lenguaje Swift para IOS.

  • Una vez creado el proyecto aparecerá un código de muestra de una aplicación la cual la podemos ejecutar (si tenemos instalado previamente un emulador). Si disponemos de emulador podremos elegirlo en la parte superior y presionar el botón de 'Play' para ejecutarla.

  • Si presionamos el botón flotante, el contador se incrementará.



VS Code

  • Primera aplicación en Flutter en VS Code

  • Abrimos la paleta de VSCode. Lo podemos hacer desde el menú superior => View => Command Palette o pulsando la combinación de teclas Control+Shift+N. Escribimos flutter y escogemos la opción Nuevo proyecto Flutter.

  • Escogemos la opción Empty Project si queremos empezar con una aplicación vacía, Application si queremos que el proyecto se cree con una base o template ya hecho con un código de ejemplo, o la opción Skeleton Templates, que son plantillas ya hechas con código (por ejemplo en https://github.com/flutter/samples). En el ejemplo a seguir escogemos la opción Application.

  • Escogemos el directorio donde se van a crear los proyectos Flutter.

  • Indicamos el nombre que va a llevar la aplicación (proyecto) y pulsamos enter. Si aparece un mensaje de si queremos confiar (trust) en el autor debemos escoger si (YES).

  • Teniendo un emulador previamente creado podemos lanzarlo antes de iniciar la aplicación o al ejecutarla ya indicará si queremos ejecutarla en un emulador o en la propia máquina.

  • Una vez creado el proyecto aparecerá un código de muestra de una aplicación la cual la podemos ejecutar (si tenemos instalado previamente un emulador). Debemos de estar situados en dicho archivo (main.dart)

  • Si presionamos el botón flotante, el contador se incrementará.

Conociendo un poco el VS Code






Conociendo un poco el Android Studio







Enlace a la página principal de la UD1

Enlace a la página principal del curso




-- Ángel D. Fernández González -- (2021).

Obtenido de «https://wiki.cifprodolfoucha.es/index.php?title=Flutter_Hola_Mundo&oldid=22805»