Diferencia entre revisiones de «Flutter Estructura»

De MediaWiki
Ir a la navegación Ir a la búsqueda
 
(No se muestran 19 ediciones intermedias del mismo usuario)
Línea 3: Línea 3:
 
<br /><br />
 
<br /><br />
  
 +
===VS Code===
 +
<center>
 +
{{#ev:youtube|5ZEVUBnIr7M}}
 +
</center>
 +
 +
 +
 +
 +
<br />
 +
===Android Studio===
 
<center>
 
<center>
 
{{#ev:youtube|NIoM35kZiGM}}
 
{{#ev:youtube|NIoM35kZiGM}}
 
</center>
 
</center>
 +
 +
  
  
 
<br />
 
<br />
−
==Widget==
+
* En Flutter disponemos la opción de crear test´s de prueba sobre aplicaciones creadas para ver si funcionan correctamente.
 +
: Más información en: https://flutter.dev/docs/cookbook/testing/unit/introduction
  
−
* Más información en:
+
: Como en estas secciones no vamos a realizar ninguna prueba, podemos borrar el directorio donde se crear los ficheros de prueba:
−
:* https://esflutter.dev/docs/development/ui/widgets-intro
+
[[Imagen:Flutter_dart_widget_4.JPG|500px|center]]
−
:* https://esflutter.dev/docs/reference/widgets
 
−
:* API de FLUTTER: https://api.flutter.dev/
 
  
−
* Acabaréis hasta las cejas de esta frase si buscáis información sobre Flutter:'''Todo en Flutter son <u>widgets</u>'''.
 
−
: Un widget no es más que un componente que se va a 'dibujar' de una determinada forma (con un contenido y forma determinado por nosotros) y tiene un estado.
 
−
: Pero el widget en si mismo no sólo es un componente gráfico, es un 'objeto' en el que mediante propiedades, indicamos cómo tiene que dibujarse
 
−
: Ejemplos de Widgets:
 
−
[[Imagen:Flutter_dart_widget_1.JPG|400px|center]]
 
−
: En la imagen anterior, vemos:
 
−
:* Un menú
 
−
:* Un título de la aplicación
 
−
:* Un texto
 
−
:* Un botón
 
  
−
: Veremos posteriormente que existen widgets que no vemos pero que nos sirven para colocar los widget que sí vemos donde queramos.
 
−
: Por ejemplo, el texto está centrado en la mitad de la pantalla. Esto se consigue con otro [https://api.flutter.dev/flutter/widgets/Center-class.html Widget (Center)].
 
  
  
 +
<br />
 +
 +
==Estructura de un proyecto Flutter==
 +
 +
* A continuación indico a nivel general para qué se usa cada una de las carpetas que aparecen por defecto al crear un nuevo proyecto Flutter.
 +
: A medida que avancemos en el curso, os daréis cuenta de cuál es la función concreta de cada una de ellas.
 +
: También existen directorios que no aparecen por defecto pero que será necesario crear para hacer nuestras aplicaciones (también serán vistos en secciones posteriores).
 +
 +
[[Imagen:Flutter_dart_proyecto_1.JPG|500px|center]]
 +
 +
* '''Carpetas:'''
 +
:* idea: Usado para que Android Studio guarde su configuración para el proyecto en curso. Podéis comprobar cómo dicho directorio no es tenido en cuenta si se sube a un repositorio git abriendo el archivo .gitignore.
 +
:* android: En esta carpeta se genera todo lo necesario para crear una aplicación Android a partir del proyecto Flutter en lenguaje Java / Kotlin. Cuando se instala la aplicación en el emulador, lo que hace Android Studio es generar el código necesario en formato 'nativo' de Android dentro de esta carpeta. Normalmente no será necesario acudir a modificar nada en esta carpeta.
 +
:* ios: En esta carpeta se genera todo lo necesario para crear una aplicación iOS a partir del proyecto Flutter. Normalmente no será necesario acudir a modificar nada en esta carpeta.
 +
:* build: '''Es necesario ejecutar el proyecto para que se genere la primera vez'''. Carpeta donde se genera el código al compilar una aplicación Flutter. Es donde se guarda la aplicación Android APK generada. No es necesario modificar nada en esta carpeta.
 +
:* '''lib:''' Donde se encuentran normalmente 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: Carpeta donde se guardan los archivos para realizar [https://flutter.dev/docs/cookbook/testing/unit/introduction pruebas sobre la aplicación de Flutter].
 +
 +
* '''Archivos:'''
 +
:* .metadata: Administrado por Flutter automáticamente y se usa para controlar las propiedades del proyecto Flutter, actualizaciones... Este archivo solo lo cambia Flutter y no debe ser modificado manualmente.
 +
:* .gitignore: Indica todos los archivos y directorios que deben ser ignorados en caso de subir nuestro proyecto a un repositorio git.
 +
:* .packages: Metadatos del proyecto Flutter. Contiene la lista de dependencias del proyecto. Es generado automáticamente por el SDK de Flutter y no debe ser modificado.
 +
:* .pubspec.lock: Indica cómo se construye el archivo pubspec.yaml. No debe editarse.
 +
:* .pubspec.yaml: Archivo que permite:
 +
::* Establecer la configuración general del proyecto como nombre, descripción y versión del proyecto
 +
::* Indicar las dependencias del proyecto (cuando hacemos uso de una nueva funcionalidad, por ejemplo)
 +
::* Indicar archivos de recursos, como imágenes, audios...
 +
:: Tiene en cuenta la <u>tabulación</u>.
 +
:: Cuando se produce un cambio es necesario ejecutar el comando '''flutter pub get''' (o flutter packages get) (en casi todos los IDEs aparecerá un mensaje indicándolo y ya lo ejecutará el propio IDE). Normalmente, para que se apliquen los cambios realizados en este archivo, necesitamos hacer un [https://wiki.cifprodolfoucha.es/index.php?title=Flutter_Hola_Mundo#Conociendo_un_poco_el_Android_Studio full restart], parando la aplicación y volviéndola a ejecutar para que la reinstale.
 +
:* nombreproyecto.iml: Este archivo siempre se nombra de acuerdo con el nombre del proyecto y contiene más configuraciones del proyecto Flutter. No debe modificarse.
 +
:* README.md: Archivo en el que aparece la descripción del proyecto. Es el archivo que aparece en un alojamiento GitHub en Internet.
  
 
<br />
 
<br />
−
: La primera pregunta que se viene a la cabeza con esa definición es: ¿ qué es un estado ?
+
==Archivos principales de la plataforma Android==
−
:: Digamos que un estado lo componen las características del widget. Tanto las gráficas (por ejemplo, cambiar el color del texto) como las específicas del widget, como por ejemplo, en una caja de texto, el texto escrito, o en una lista, el elemento seleccionado.
 
  
−
* La implementación de estos Widgets a nivel de programación se consigue 'instanciando' clases ya definidas por Flutter a las que vamos a 'pasar información' mediante [https://wiki.cifprodolfoucha.es/index.php?title=Flutter_DART_Funciones#Paso_de_par.C3.A1metros argumentos posicionales y argumentos con nombres].
+
* Dentro del directorio Android se encuentra todo lo necesario para que Flutter genere el APK de dicha plataforma.
 +
: En Android existen una serie de archivos de configuración que es necesario conocer:
  
−
* Existen dos tipos de Widgets:
+
:* '''android/app/build.gradle''' (dependiendo de la versión de Flutter puede aparecer con la extensión .ktl):
−
:* '''Stateful Widget''': guarda su estado
+
:: La API va a determinar la versión del S.O. en la que vamos a desarrollar la aplicación.
−
:* '''Stateless Widget''': no guarda su estado.
+
:: Cada nueva versión incorpora nuevos componentes gráficos y nuevas funcionalidades, pero tenemos que mantener un equilibrio entre la versión a escoger y el [http://wiki.cifprodolfoucha.es/index.php?title=Introduci%C3%B3n_a_Android:_Versi%C3%B3ns,_APIS_e_SDK#Versi.C3.B3ns_e_APIS mercado que queramos acaparar].
  
−
: Todos los widgets deriva de una de estas dos clases (que son clases abstractas).
+
:: La API también va a determinar qué aplicaciones pueden ser instaladas en el dispositivo móvil, ya que una aplicación desarrollada para una versión superior no puede ser instalada en un S.O. Android con una versión inferior.
−
: Digamos que cuando un elemento gráfico 'cambia', debido por ejemplo a iteracciones del usuario con la aplicación, es necesario 'actualizar' gráficamente dicho componente.
 
−
: En ese caso, cambiamos 'su estado' y por lo tanto tiene que ser un Statefull Widget.
 
−
: Un Stateful Widget se va a poder 'redibujar' a si mismo cuando se produzca un cambio que queramos reflejar gráficamente (veremos que existe una sentencia que provaca que se redibuje).
 
−
: También podemos necesitar emplear un Stateful Widget cuando queramos guardar el dato en algún atributo, por ejemplo, un formulario, en el que dentro de una caja de texto escribimos nuestro nombre y queramos hacer algún tipo de gestión con esa información.
 
  
 +
:: A la hora de determinar la API en un proyecto Android tendremos que escoger lo siguiente:
 +
::* '''MIN SDK''': Será la API mínima (versión del S.O. Android) en la que nuestra aplicación podrá funcionar. No se podrá instalar en una versión anterior.
 +
::* '''TARGET SDK''': Indica la versión del S.O. Android en la que está probada nuestra aplicación y sabemos que funciona correctamente. Normalmente se pone la más alta. Podría funcionar en una versión posterior o inferior (siempre que sea mayor que el minSdk). El uso de un target u otro puede influir en el aspecto de nuestra aplicación en tiempo de ejecución (por ejemplo, puede cambiar el tema o aspecto por defecto, en función del target).
 +
::* '''BUILD SDK o Compile SDK''': Indica la versión del SDK que utilizamos para compilar nuestra aplicación. Esto va a limitar los recursos que podamos emplear en el desarrollo de la aplicación, ya que si por ejemplo tenemos una nueva funcionalidad en una API, por ejemplo en la API 22, y nosotros tenemos marcado un BUILD_SDK de 19, no podremos hacer uso de ella. El build_sdk siempre tendrá que ser mayor o igual al min_sdk.
  
 +
:: Normalmente se sigue la regla: minSdkVersion (mínima posible) <= targetSdkVersion == compileSdkVersion (más alta posible del SDK)
  
−
* En la aplicación que se crea al incio de un proyecto Flutter aparece un contador.  
+
:* '''android/app/src/main/AndroidManifest.xml'''
−
: Al pulsar el botón '+' el contador se incrementa. Es necesario por tanto 'redibujar' el contador (cambia de número). Por tanto su estado cambia y por tanto es un StateFul Widget.
+
:: Contiene la definición de las características más importantes de la aplicación: nombre, versión, icono, activities, servicios, instrumentación, permisos de acceso a los recursos, etc.
−
[[Imagen:Flutter_dart_widget_2.JPG|700px|center]]
+
:: Fijaos en que existen otros archivos AndroidManifest.xml en los directorios /debug/ y /profile/ que se usan cuando se genera el APK en modo depuración o en modo profile.
 +
:: Por ejemplo, si nuestra aplicación sale a Internet necesita añadir dicho permiso al AndroidManifest.xml del directorio /main/. Podéis comprobar cómo en modo debug el archivo ya tiene ese permiso puesto.
  
 +
==Trasladar un proyecto==
  
−
<br />
 
−
: Aquellas partes de la pantalla que permanecen 'inalterables' una vez cargados los datos son considerados StateLess Widget.
 
  
 +
* Como los proyectos ocupan bastante y están formados por muchos archivos:
 +
:* Mejor comprimir el proyecto y copiar el archivo comprimido.
 +
:* Podemos copiar solamente los archivos que necesitamos (carpeta /assets, carpeta /lib, el archivo pubspec.yaml y cualquier otro archivo modificado que no está en /lib), llevarlos a un proyecto vacío y realizar los pasos anteriores.
  
−
<br />
 
−
Veamos en ejemplo sencillo de un Stateless Widget:
 
−
:<u>Nota:</u>
 
−
:* Si estáis en el Android Studio u otro IDE, es necesasario crear [https://wiki.cifprodolfoucha.es/index.php?title=Flutter_Hola_Mundo un nuevo proyecto Flutter] (ahora no estamos creando sólo ficheros DART).
 
−
:* Si os aparece el siguiente error en el IDE: Target of URI doesn't exist: 'package:flutter/material.dart', debéis abrir una consola y escribe la siguiente línea: '''flutter packages get''' desde el directorio raíz del proyecto Flutter.
 
−
:<syntaxhighlight lang="java" enclose="div" highlight="5-12" >
 
−
import 'package:flutter/material.dart';
 
  
−
void main() {
 
−
  runApp(
 
−
    Center(
 
−
      child: Text(
 
−
        'HOLA MUNDO',
 
−
        textDirection: TextDirection.ltr,
 
−
        style: const TextStyle(fontWeight: FontWeight.bold,
 
−
                              color: Colors.red)
 
−
      ),
 
−
    ),
 
−
  );
 
−
}
 
−
</syntaxhighlight>
 
  
 +
<gallery caption="Trasladar un proyecto a otro ordenador" widths="600" heights="300px" perrow="2">
 +
Image:Flutter_dart_proyecto_3.JPG | Desde la consola del proyecto ejecutar '''flutter clean'''.
 +
Image:Flutter_dart_proyecto_2.JPG | Ejecutar la orden pub get.
 +
</gallery>
  
  
−
: Sólamente fijarse en el código del Widget (ya explicaremos posteriormente lo demás).
 
−
* Si os dáis cuenta, los widgets se 'anidan' unos dentro de otros (como contenedores <div> de html).
 
  
  
Línea 91: Línea 107:
 
<br />
 
<br />
  
−
[https://wiki.cifprodolfoucha.es/index.php?title=Programaci%C3%B3n_de_dispositivos_m%C3%B3viles_con_FLUTTER#Unidad_3%3A_Flutter._Dise.C3.B1o_gr.C3.A1fico Enlace a la página principal de la UD3]
+
[https://wiki.cifprodolfoucha.es/index.php?title=Programación_de_dispositivos_móviles_con_FLUTTER#Unidad_1:_Instalaci.C3.B3n_y_puesta_en_marcha Enlace a la página principal de la UD1]
  
 
[https://wiki.cifprodolfoucha.es/index.php?title=Programaci%C3%B3n_de_dispositivos_m%C3%B3viles_con_FLUTTER Enlace a la página principal del curso]
 
[https://wiki.cifprodolfoucha.es/index.php?title=Programaci%C3%B3n_de_dispositivos_m%C3%B3viles_con_FLUTTER Enlace a la página principal del curso]

Revisión actual del 17:40 15 sep 2026

Creación de un proyecto Flutter



VS Code




Android Studio




  • En Flutter disponemos la opción de crear test´s de prueba sobre aplicaciones creadas para ver si funcionan correctamente.
Más información en: https://flutter.dev/docs/cookbook/testing/unit/introduction
Como en estas secciones no vamos a realizar ninguna prueba, podemos borrar el directorio donde se crear los ficheros de prueba:
Flutter dart widget 4.JPG




Estructura de un proyecto Flutter

  • A continuación indico a nivel general para qué se usa cada una de las carpetas que aparecen por defecto al crear un nuevo proyecto Flutter.
A medida que avancemos en el curso, os daréis cuenta de cuál es la función concreta de cada una de ellas.
También existen directorios que no aparecen por defecto pero que será necesario crear para hacer nuestras aplicaciones (también serán vistos en secciones posteriores).
Flutter dart proyecto 1.JPG
  • Carpetas:
  • idea: Usado para que Android Studio guarde su configuración para el proyecto en curso. Podéis comprobar cómo dicho directorio no es tenido en cuenta si se sube a un repositorio git abriendo el archivo .gitignore.
  • android: En esta carpeta se genera todo lo necesario para crear una aplicación Android a partir del proyecto Flutter en lenguaje Java / Kotlin. Cuando se instala la aplicación en el emulador, lo que hace Android Studio es generar el código necesario en formato 'nativo' de Android dentro de esta carpeta. Normalmente no será necesario acudir a modificar nada en esta carpeta.
  • ios: En esta carpeta se genera todo lo necesario para crear una aplicación iOS a partir del proyecto Flutter. Normalmente no será necesario acudir a modificar nada en esta carpeta.
  • build: Es necesario ejecutar el proyecto para que se genere la primera vez. Carpeta donde se genera el código al compilar una aplicación Flutter. Es donde se guarda la aplicación Android APK generada. No es necesario modificar nada en esta carpeta.
  • lib: Donde se encuentran normalmente 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: Carpeta donde se guardan los archivos para realizar pruebas sobre la aplicación de Flutter.
  • Archivos:
  • .metadata: Administrado por Flutter automáticamente y se usa para controlar las propiedades del proyecto Flutter, actualizaciones... Este archivo solo lo cambia Flutter y no debe ser modificado manualmente.
  • .gitignore: Indica todos los archivos y directorios que deben ser ignorados en caso de subir nuestro proyecto a un repositorio git.
  • .packages: Metadatos del proyecto Flutter. Contiene la lista de dependencias del proyecto. Es generado automáticamente por el SDK de Flutter y no debe ser modificado.
  • .pubspec.lock: Indica cómo se construye el archivo pubspec.yaml. No debe editarse.
  • .pubspec.yaml: Archivo que permite:
  • Establecer la configuración general del proyecto como nombre, descripción y versión del proyecto
  • Indicar las dependencias del proyecto (cuando hacemos uso de una nueva funcionalidad, por ejemplo)
  • Indicar archivos de recursos, como imágenes, audios...
Tiene en cuenta la tabulación.
Cuando se produce un cambio es necesario ejecutar el comando flutter pub get (o flutter packages get) (en casi todos los IDEs aparecerá un mensaje indicándolo y ya lo ejecutará el propio IDE). Normalmente, para que se apliquen los cambios realizados en este archivo, necesitamos hacer un full restart, parando la aplicación y volviéndola a ejecutar para que la reinstale.
  • nombreproyecto.iml: Este archivo siempre se nombra de acuerdo con el nombre del proyecto y contiene más configuraciones del proyecto Flutter. No debe modificarse.
  • README.md: Archivo en el que aparece la descripción del proyecto. Es el archivo que aparece en un alojamiento GitHub en Internet.


Archivos principales de la plataforma Android

  • Dentro del directorio Android se encuentra todo lo necesario para que Flutter genere el APK de dicha plataforma.
En Android existen una serie de archivos de configuración que es necesario conocer:
  • android/app/build.gradle (dependiendo de la versión de Flutter puede aparecer con la extensión .ktl):
La API va a determinar la versión del S.O. en la que vamos a desarrollar la aplicación.
Cada nueva versión incorpora nuevos componentes gráficos y nuevas funcionalidades, pero tenemos que mantener un equilibrio entre la versión a escoger y el mercado que queramos acaparar.
La API también va a determinar qué aplicaciones pueden ser instaladas en el dispositivo móvil, ya que una aplicación desarrollada para una versión superior no puede ser instalada en un S.O. Android con una versión inferior.
A la hora de determinar la API en un proyecto Android tendremos que escoger lo siguiente:
  • MIN SDK: Será la API mínima (versión del S.O. Android) en la que nuestra aplicación podrá funcionar. No se podrá instalar en una versión anterior.
  • TARGET SDK: Indica la versión del S.O. Android en la que está probada nuestra aplicación y sabemos que funciona correctamente. Normalmente se pone la más alta. Podría funcionar en una versión posterior o inferior (siempre que sea mayor que el minSdk). El uso de un target u otro puede influir en el aspecto de nuestra aplicación en tiempo de ejecución (por ejemplo, puede cambiar el tema o aspecto por defecto, en función del target).
  • BUILD SDK o Compile SDK: Indica la versión del SDK que utilizamos para compilar nuestra aplicación. Esto va a limitar los recursos que podamos emplear en el desarrollo de la aplicación, ya que si por ejemplo tenemos una nueva funcionalidad en una API, por ejemplo en la API 22, y nosotros tenemos marcado un BUILD_SDK de 19, no podremos hacer uso de ella. El build_sdk siempre tendrá que ser mayor o igual al min_sdk.
Normalmente se sigue la regla: minSdkVersion (mínima posible) <= targetSdkVersion == compileSdkVersion (más alta posible del SDK)
  • android/app/src/main/AndroidManifest.xml
Contiene la definición de las características más importantes de la aplicación: nombre, versión, icono, activities, servicios, instrumentación, permisos de acceso a los recursos, etc.
Fijaos en que existen otros archivos AndroidManifest.xml en los directorios /debug/ y /profile/ que se usan cuando se genera el APK en modo depuración o en modo profile.
Por ejemplo, si nuestra aplicación sale a Internet necesita añadir dicho permiso al AndroidManifest.xml del directorio /main/. Podéis comprobar cómo en modo debug el archivo ya tiene ese permiso puesto.

Trasladar un proyecto

  • Como los proyectos ocupan bastante y están formados por muchos archivos:
  • Mejor comprimir el proyecto y copiar el archivo comprimido.
  • Podemos copiar solamente los archivos que necesitamos (carpeta /assets, carpeta /lib, el archivo pubspec.yaml y cualquier otro archivo modificado que no está en /lib), llevarlos a un proyecto vacío y realizar los pasos anteriores.


  • Trasladar un proyecto a otro ordenador

  • Desde la consola del proyecto ejecutar flutter clean.

  • Ejecutar la orden pub get.





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_Estructura&oldid=25022»