Intro a DART

En esta sección tocaremos temas sobre:

• ¿Por qué Dart?

• Nuestro "Hola Mundo" en Dart
• Tipado de datos en Dart
• Listas
• Mapas
• Funciones
• Clases
• Mixins
• Constructores
• Getters
• Setters
• Extender una clase
• Futures
• Async
• Await

Entre otras cosas más...

Hay otros temas que son necesarios saber sobre dart, pero los mismos serán expuestos
antes de las clases donde sean necesarios para tener el conocimiento fresco antes de
usarlo.

1
 Intro a DART

1. ¿Por qué Dart?

Dart es un lenguaje de programación desarrollado por Google con las siguientes

características:

a) AOT (Ahead of Time): compilado a un rápido Código na@vo por lo que no necesita
puentes innecesarios para correr el código.
b) Puede ser JIT (Just In Time): compilado a una velocidad excepcional.
c) Creación de animaciones y transiciones a 60 fps.
d) Es rela@vamente fácil de aprender.

En Dart cada uno de los programas tiene una instrucción principal llamada main():

void main(){
// Punto inicial
}

2. Hola mundo.

Para hacer el holaMundo borramos este código y hacemos:

void main(){
// homaMundo
print("Hola mundo");
}

3. Tipos de datos.
3.1 Strings.

Resultado:
Txema Serrano

2
 Intro a DART

También Podemos imprimir así (template string):

print('$nombre $apellido');

Entre los tipos de datos tenemos:

• String
• const: constante (desde la compilación)
• final: funciona como una constante, no se puede cambiar (desde la primera
asignación).
• int: entero
• double: coma flkitante

La salida:

Txema Serrano
10
1699.25

3.2 Booleanos.

Salida:

Esta inactivo

3
 Intro a DART

En Dart existe el tipo de datos null:

Salida:

Es null

3.2 Lista.

Colección de elementos del mismo tipo.

Salida:

[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

Luego tenemos unos métodos asociados a las listas:

4
 Intro a DART

Añadimos un nuevo elemento:

Salida:

[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]

El primer elemento es numeros[0]

Definimos que el tipo de la lista es entero y además creamos un nuevo listado mediante
un método estático (generate)

La salida es:

[[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]

[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18,
19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35,
36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52,
53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69,
70, 71, 72, 73, 74, 75, 76, 77, 78, 79, 80, 81, 82, 83, 84, 85, 86,
87, 88, 89, 90, 91, 92, 93, 94, 95, 96, 97, 98, 99]

5
 Intro a DART

3.3 Map.

Indicado para definir objetos:

Resultado:

{nombre: Txema, edad: 53, soltero: false}

Para acceder a las propiedades del objeto:

print(persona['nombre']);

Resultado:

Txema

Podemos obligar a definir que qué tipo son el par propiedad valor:

Resultado:

{nombre: Txema, edad: 53, soltero: false, segundo nombre: José

María}

6
 Intro a DART

3.4 Funciones en Dart.

Resultado:

Hola mundo

Si la queremos con parámetros:

Resultado:

Hola mundo Txema

Con pseudo strings literales:

Resultado:

Hola Txema

7
 Intro a DART

Si queremos poner argumentos opcionales:

Resultado:

Greetings Txema

NOTA: los argumentos son pasados por valor.

También puedo hacer esto con el mismo resultado. Los dos parámetros son obligatorios:

8
 Intro a DART

3.5 Clases en Dart.

Creamos la clase Heroe:

Proporciona: Instance of 'Heroe'

Definimos las propiedades de la clase:

Proporciona de nuevo: Instance of 'Heroe'

Si queremos que visualice las propiedades, cambiamos la clase:

9
 Intro a DART

La salida es:

nombre: Bruce

Más propiedades:

Resultado:

Heroe: nombre: Bruce, poder: Fuerza

Los campos en este caso son opcionales. Como en Dart no existen constructores, la
forma de inicializar una clase es:

Resultado es el mismo:

Heroe: nombre: Bruce, poder: Fuerza

10
 Intro a DART

3.6 Constructores con nombre.

Tenemos la misma clase pero creamos un JSON rawJSON. Los signos ! es porque
garan@zamos que @enen un valor:

Resultado:

Heroe: nombre: Tony Stark, poder: Dinero

Esta es una forma farragosa de tratar los JSON. Se suele hacer crear una nueva instancia
mandando el JSON como argumento. Lo que queremos es expandir la funcionalidad de
la clase creando el método fromJSON:

11
 Intro a DART

Modificamos la clase principal:

Resultado no cambia.

¿Qué ocurre cuando no enviamos una propiedad?

final rawJSON = {
'nombre': 'Tony Stark',
// 'poder': 'Dinero'
};

Resultado:

Uncaught TypeError: Cannot read properties of null (reading 'toString')Error: TypeError: Cannot
read properties of null (reading 'toString')

Para asegurarnos que tenemos las dos propiedades en la clase:

Heroe.fromJSON(Map<String, String>json){
this.nombre = json['nombre']!;
this.poder = json['poder'] ?? 'No tiene poder';
}

Resultado:

Heroe: nombre: Tony Stark, poder: No tiene poder

12
 Intro a DART

Pero ¿cómo hacemos la inicialización de los valores en el constructor por nombre?

Resultado:

Heroe: nombre: Tony Stark, poder: Dinero

13
 Intro a DART

3.7 Getters y Setters.

Nos creamos una clase que calcule el área de un cuadrado:

No es el sitio indicado para hacerlo ya que estamos en la definición de las propiedades:

Resultado:

Area: 25

Pero podemos hacerlo como una función en la clase Cuadrado:

El resultado es el mismo.

14
 Intro a DART

Si lo hacemos un getter tenemos:

Resultado:

Area: 25
lado: 5
Area get: 25

Si queremos modificar las propiedades utilizamos los setters:

15
 Intro a DART

Para obtener el lado nos hacer falta calcular raíz cuadrada:

Resultado:

Area: 100
lado: 10
Area get: 100

16
 Intro a DART

3.8 Clases abstractas.

Sirve para que otras clases a que obtengan características de esta clase. Así por ejemplo
una clase Perro:

Hay que implementar lo que falta.

Resultado:

Guau

17
 Intro a DART

Creamos un nuevo método:

Resultado: Guau

Creamos un segundo animal:

Resultado:

Guauuuuu
Miauuuuu

18
 Intro a DART

3.9 Extends.

Tenemos esta clase abstracta:

Sobre esta clase abstracta crearemos otras:

Resultado: Clark Kent - null

Nos creamos la clase Villano:

La clase main() ahora:

Resultado:
Clark Kent -null
Lex Luthor -null

19
 Intro a DART

3.10 Mixins.

Tenemos el siguiente artículo en Medium.com:

Realizaremos el ejemplo del artículo: Animal (Mamifero, Ave, Pez). Y las acciones
que pueden hacer (caminar, nadar y volar). Existe instancias de clase que pueden
hacer las tres acciones: por ejemplo, el pato.

20
 Intro a DART

La implementación del diagrama del artículo:

Resultado:
estoy nadando
estoy caminando
estoy volando
estoy caminando
estoy nadando
estoy volando

21
 Intro a DART

3.11 Futures.

Es el equivalente a las promesas en Javascript.

Resultado:
Antes de la petición
Fin del programa

Si ahora hacemos:

Tenemos:

Antes de la petición
Fin del programa
Hola mundo - 3 segundos

22
 Intro a DART

Podemos especificar al Future de qué tipo de datos para poder acceder a los métodos
específicos del método.

Así tenemos:

Antes de la petición
Fin del programa

Y a los tres segundos aparece:

HOLA MUNDO - 3 SEGUNDOS

23
 Intro a DART

3.12 Async-Await.

Resultado:

Antes de la petición
Fin del programa
10 – Txema

¿Por qué en este orden? Porque primero ejecuta todo el código de forma asíncrona y las
peticiones las deja para después. Si queremos la resolución de getNombre antes de fin
de programa:

El resultado ahora:

Antes de la petición
10 - Txema
Fin del programa

24
 Intro a DART

Vamos a hacer lo mismo con la petición a la API de la NASA:

Resultado:

Antes de la petición
Hola mundo - 3 segundos
Fin del programa

25
 Intro a DART

Cuestionario de Dart:

Las listas son de tamaño fijo.

26
 Intro a DART

27
 Intro a DART

28