|
|
| Línea 13: |
Línea 13: |
| | : Como en estas secciones no vamos a realizar ninguna prueba, podemos borrar el directorio donde se crear los ficheros de prueba: | | : Como en estas secciones no vamos a realizar ninguna prueba, podemos borrar el directorio donde se crear los ficheros de prueba: |
| | [[Imagen:Flutter_dart_widget_4.JPG|500px|center]] | | [[Imagen:Flutter_dart_widget_4.JPG|500px|center]] |
| − | <br />
| |
| − |
| |
| − | ==Widget. Conceptos básicos==
| |
| − |
| |
| − | * Más información en:
| |
| − | :* https://esflutter.dev/docs/development/ui/widgets-intro
| |
| − | :* 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 y qué tiene que dibujarse
| |
| − | : Ejemplos de Widgets:
| |
| − | [[Imagen:Flutter_dart_widget_1.JPG|300px|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 />
| |
| − | : La primera pregunta que se viene a la cabeza con esa definición es: ¿ qué es un estado ?
| |
| − | :: 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].
| |
| − |
| |
| − | * Existen dos tipos de Widgets:
| |
| − | :* '''Stateful Widget''': guarda su estado
| |
| − | :* '''Stateless Widget''': no guarda su estado.
| |
| − |
| |
| − | : Todos los widgets deriva de una de estas dos clases (que son clases abstractas).
| |
| − | : 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.
| |
| − |
| |
| − |
| |
| − |
| |
| − | * En la aplicación que se crea al incio de un proyecto Flutter aparece un contador.
| |
| − | : 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.
| |
| − | [[Imagen:Flutter_dart_widget_2.JPG|700px|center]]
| |
| − |
| |
| − |
| |
| − | <br />
| |
| − | : Aquellas partes de la pantalla que permanecen 'inalterables' una vez cargados los datos son considerados StateLess Widget.
| |
| − |
| |
| − |
| |
| − | <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>
| |
| − | [[Imagen:Flutter_dart_widget_6.JPG|200px|center]]
| |
| − |
| |
| − |
| |
| − | <br />
| |
| − | : 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).
| |
| − | :* El [https://api.flutter.dev/flutter/widgets/Center-class.html widget Center] es un contenedor que se expande todo lo que pueda.
| |
| − | :: Lo que estamos haciendo realmente es crear un objeto de una clase Center. Lo anterior es lo mismo que si escribimos: '''new Center (....)''' (recordar que en Dart [https://wiki.cifprodolfoucha.es/index.php?title=Flutter_DART_Clases#Introducci.C3.B3n es lo mismo poner new Clase() que Clase()])
| |
| − | :: Esta clase, en su constructor espera recibir los siguientes datos:
| |
| − | [[Imagen:Flutter_dart_widget_3.JPG|500px|center]]
| |
| − |
| |
| − | ::* Como vemos son parámetros con nombre (van entre llaves)
| |
| − | ::* Admiten valores nulos, por lo tanto, no es obligatorio emplearlos.
| |
| − |
| |
| − | :: En el ejemplo, usamos el parámetro '''child''' que espera recibir como dato....'''sí, un widget'''. Por eso creamos un nuevo [https://api.flutter.dev/flutter/widgets/Text-class.html widget Text] (es lo mismo poner Text (...) que new Text(...).
| |
| − | [[Imagen:Flutter_dart_widget_5.JPG|500px|center]]
| |
| − | ::* Como vemos espera recibir un parámetro posicional (un String que sería el texto a mostrar) y el resto de parámetros son parámetros con nombre todos optativos.
| |
| − | ::* Los parámetros con nombre son todos optativos, por lo que no es necesario enviarlos.
| |
| | | | |
| | | | |
| Línea 109: |
Línea 18: |
| | | | |
| | <br /> | | <br /> |
| − | ==Estructura de un proyecto== | + | ==Estructura de un proyecto Flutter== |
| | | | |
| | | | |
