El lenguaje de pro­gra­ma­ción Dart es joven, pero ya se ha co­n­so­li­da­do, es­pe­cia­l­me­n­te en el ámbito de la pro­gra­ma­ción de apli­ca­cio­nes móviles. Google ha creado Flutter, un kit de de­sa­rro­llo de software (SDK) que utiliza Dart, pro­mo­vie­n­do así la uti­li­za­ción y di­vu­l­ga­ción de este lenguaje de pro­gra­ma­ción. Una ventaja im­po­r­ta­n­te es que con él se pueden programar apli­ca­cio­nes para todos los sistemas ope­ra­ti­vos móviles: Apple iOS, Google Android o Microsoft Windows Phone.

¡Aprende el lenguaje Dart! Nuestro tutorial de Dart te guía en los primeros pasos en el mundo del lenguaje de pro­gra­ma­ción de Google. Verás que no es tan difícil. Para más in­fo­r­ma­ción sobre el lenguaje en sí, consulta nuestro artículo “¿Qué es Dart?”, con in­fo­r­ma­ción detallada sobre él, y el artículo sobre Flutter para descubrir más sobre el kit de de­sa­rro­llo de software de Google.

Los orígenes de Dart

Dart se presentó ori­gi­na­l­me­n­te para solventar las de­fi­cie­n­cias de Ja­va­S­cri­pt que, desde el punto de vista de los de­sa­rro­lla­do­res, ya no podían mejorarse dentro del propio lenguaje de pro­gra­ma­ción. De esta manera, se comenzó a buscar la forma de si­m­pli­fi­car o reunir ciertas lógicas internas sin tener que renunciar al abanico de po­si­bi­li­da­des del lenguaje. A modo de ejemplo, el código de Ja­va­S­cri­pt sería como se muestra a co­n­ti­nua­ción:

getElementsById()
getElementsByTagName()
getElementsByName()
getElementsByClassName()
querySelector()
querySelectorAll()
document.links
document.images
document.forms
document.scripts
formElement.elements
selectElement.options

En cambio, en código en Dart sería así:

elem.query('#foo');
elem.queryAll('.foo');

Primeros pasos para aprender Dart

Un lenguaje de pro­gra­ma­ción está compuesto por una gran variedad de “vo­ca­bu­la­rio” con el que se es­tru­c­tu­ran datos y se de­sa­rro­llan ope­ra­cio­nes (al­go­ri­t­mos). Para ello, el lenguaje se sirve de un número de­te­r­mi­na­do de conceptos: las variables, que solo tienen un propósito. Algunos ejemplos en Dart son “var”, “int” “if”, “else” o “while”. En nuestro artículo sobre los lenguajes de pro­gra­ma­ción de internet, de­s­cu­bri­rás más sobre la ar­qui­te­c­tu­ra de los lenguajes de pro­gra­ma­ción. Mediante la co­m­bi­na­ción de variables, ope­ra­do­res, co­n­di­cio­na­les, funciones y otros tantos elementos, nace la secuencia del programa al final de la cual se obtiene un resultado.

Dart en la práctica

Te pre­se­n­ta­mos los primeros ejemplos, sencillos y fáciles de co­m­pre­n­der, para aprender Dart. Puedes mo­di­fi­car­los a tu antojo y ex­pe­ri­me­n­tar con ellos. Todas las rutinas de pro­gra­ma­ción comienzan con la llamada a la función principal. Como ejemplo, tomamos el clásico código “Hola, mundo”:

void main () {
 print("Hola, mundo"); 
}

Delante de la función “main”, se encuentra la función sin tipo de retorno “void”, que no devuelve ningún valor. Los pa­ré­n­te­sis “()” indican una función, y dentro de las llaves “{ … }” se ejecuta el código Dart (en este ejemplo, el comando es imprimir algo en la pantalla). Detrás de las barras dia­go­na­les “//” hay un co­me­n­ta­rio que permanece invisible; también re­pre­se­n­ta­do con “/* este es un co­me­n­ta­rio de varias líneas...*/” (ejemplo conocido en PHP). De esta manera, se puede comentar de manera es­tru­c­tu­ra­da el propio código o el de otros de­sa­rro­lla­do­res, lo que facilita eno­r­me­me­n­te el trabajo en equipo en los proyectos exi­s­te­n­tes.

Nota

Al igual que en Java, C o PHP, todos los enu­n­cia­dos en Dart se cierran con punto y coma.

Anímate y prueba los si­guie­n­tes ejemplos uti­li­za­n­do la pla­ta­fo­r­ma gratuita de código abierto DartPad. Una de las ventajas de esta he­rra­mie­n­ta es que numera las líneas del programa e indica si hay errores. Además, algunos ejemplos de pro­gra­ma­ción están di­s­po­ni­bles en un menú de­s­ple­ga­ble.

En los ejemplos de código que se detallan a co­n­ti­nua­ción, ya no se incluye “void main() {…}”.

Definir y utilizar variables

Con las variables, se de­te­r­mi­nan los espacios del programa. Co­me­n­za­mos con las cifras.

var mySize = 174;

Aquí se ha de­te­r­mi­na­do una nueva variable “mi espacio” a la que se le ha asignado el valor “174”. Esta variable mantiene este valor en la secuencia de pro­gra­ma­ción hasta que sea mo­di­fi­ca­da ac­ti­va­me­n­te por ope­ra­do­res o funciones. Para obtener el valor de las variables, uti­li­za­mos el comando “print”.

var mySize = 174;
print(mySize);
int yourSize = 174;
print(yourSize);
double thisSize = 1.74;
print(thisSize);
dynamic oneSize = 'Onehundredseventyfor' + ': ' + '174';
print(oneSize);

Con el comando “print” en DartPad, se obtienen los si­guie­n­tes re­su­l­ta­dos de las líneas 3, 6, 9 y 12 en la consola:

Imagen: Aprender Dart: comando “print”
Para las variables se puede elegir (casi) cualquier de­no­mi­na­ción, lo que facilita la lectura y la co­rre­c­ción del código del programa.

Las variables en Dart admiten de­te­r­mi­na­dos tipos, que pueden ser números enteros (“int”) o números decimales (“double”). El tipo de variable “dynamic” puede admitir di­fe­re­n­tes valores y ex­pre­sio­nes en la secuencia de pro­gra­ma­ción. En cambio, no se tienen en cuenta las líneas en blanco, los ta­bu­la­do­res ni los párrafos durante la ejecución de la rutina. Por eso, los valores se en­cue­n­tran di­re­c­ta­me­n­te unos debajo de otros a la derecha en la consola.

Al intentar asignar un valor erróneo a un de­te­r­mi­na­do tipo de variable, se genera un aviso de error con la de­s­cri­p­ción co­rre­s­po­n­die­n­te en DartPad:

int mySize = 1.74; // integer is expected, but double comes
print(mySize);
Imagen: Aprender en Dart: resultado erróneo
Con “1issue(s)”, DartPad notifica un valor asignado erró­nea­me­n­te. En el ejemplo no puede asignarse un valor decimal a una variable de valor entero. El error se produce en la línea 2 de la secuencia de pro­gra­ma­ción, y el valor erróneo se subraya en naranja.
Nota

Las de­no­mi­na­cio­nes (ide­n­ti­fi­ca­do­res) para las variables uti­li­za­das no pueden contener palabras re­se­r­va­das. Tampoco están pe­r­mi­ti­das las cifras al inicio ni los ca­ra­c­te­res en blanco o es­pe­cia­les, a excepción del guion bajo “_” y el símbolo de dólar “$”. Los ide­n­ti­fi­ca­do­res tienen en cuenta las ma­yú­s­cu­las y las mi­nú­s­cu­las, y deben ser únicos.

Cadena de ca­ra­c­te­res en el tutorial de Dart

Mediante cadenas de ca­ra­c­te­res, con el tipo de dato “String” (cuidado: con S mayúscula), se pueden procesar di­fe­re­n­tes ca­ra­c­te­res en el lenguaje Dart. Aquí te enseñamos a programar varias líneas en Dart.

String text1 = 'this is a single line string';
String text2 = '''this is a multiline
	line string with a break''';
print(text1);
print(text2);
Imagen: Aprender Dart: texto en una o varias líneas
Texto en una o varias líneas en Dart de­pe­n­die­n­do del número de comillas utilizado.

Mediante la función String, el texto se reproduce en­ce­rra­n­do el contenido deseado entre comillas simples o dobles: ' o ". Pero si el texto se abre y cierra con el triple de cua­l­quie­ra de los dos tipos de comillas (''' o """), Dart imprime el texto con saltos de línea en la posición donde se hayan insertado. De esta forma, es posible formatear el resultado.

Consejo

Las comillas ti­po­grá­fi­cas (por lo general, las comillas inglesas) se pueden insertar fá­ci­l­me­n­te en el texto en Windows con la co­m­bi­na­ción de teclas [Alt] + 0147 (comilla de apertura) y [Alt] + 0148 (comilla de cierre), y aparecen así en una cadena de Dart. En macOS, las comillas se insertan con [Alt] +[Shift] + [W] y [Alt] + [2].

Ma­la­ba­ri­s­mos de cifras con Dart

No existe una gran di­fe­re­n­cia entre la de­cla­ra­ción de variables y los cálculos de variables en los cuales se pueden sumar tanto cifras como ex­pre­sio­nes. Para calcular re­su­l­ta­dos, Dart emplea ope­ra­do­res ari­t­mé­ti­cos. Por ejemplo, una tarea podría consistir en que el cliente se­le­c­cio­na­ra un artículo de una tienda en línea del que desea comprar tres unidades. En la función de carrito habría que mu­l­ti­pli­car el precio unitario por “3”, y una vez hecho el cálculo, mostrar el precio total. En el siguiente código se puede ver la uti­li­za­ción de di­fe­re­n­tes métodos para el conjunto de datos, además de los co­me­n­ta­rios en las líneas re­le­va­n­tes:

String product = 'calendar';
String curr = 'EUR';
String isFor = 'for'; // 3 strings for later print use
double singlePrice = 7.96; // floating comma for single price
int amount = 3; // number of ordered calendars
var totalPrice = (amount*singlePrice); // calculation of the total price with multiplier *
var invTotal = '$totalPrice $curr'; /* Merging of two variables in a new one by adding a $ sign before the old variables.*/
var result = '$amount $product\s'; //also plus adding a letter “s” for plural
print (invTotal); // creating the screen output
print (isFor);
print (result);
Imagen: Aprender Dart: cálculo sencillo
Ejemplo de un cálculo sencillo en co­m­bi­na­ción con fra­g­me­n­tos de texto.

En esta imagen vi­sua­li­za­mos cadenas, valores enteros y decimales, y el conjunto de elementos de pro­gra­ma­ción de nuevas variables. Hay que prestar especial atención a la hora de combinar dos variables exi­s­te­n­tes en una nueva variable para ase­gu­rar­nos de obtener el resultado correcto en la pantalla. En este caso, por ejemplo, se antepone un símbolo de dólar “$” a las variables ya definidas (líneas 8 y 9 en la imagen superior del DartPad).

Es­ta­ble­cer enu­n­cia­dos co­n­di­cio­na­les

Los enu­n­cia­dos co­n­di­cio­na­les de­sem­pe­ñan un papel esencial en la pro­gra­ma­ción. Aquí te enseñamos a programar una co­n­di­cio­nal con Dart. Una co­n­di­cio­nal siempre lleva a una decisión en este sentido: si se da el caso A (if), aparece X en la pantalla; si se da el caso B (elseif), entonces se muestra Y; si no se da ninguno de los dos casos (else), entonces el resultado es Z. Con los comandos Dart entre pa­ré­n­te­sis, se obtiene el siguiente código:

var tOol = 'Glove';
if (tOol == 'Pliers' || tOol == 'Ruler') 
    { print('That is a tool.');
    } else if (tOol == 'brush') 
    { print('That is a tool.');    
    } else { print('That is not a tool.');
    }
}

Así se ve en DartPad:

Imagen: Tutorial de Dart: enunciados condicionales
Los enu­n­cia­dos co­n­di­cio­na­les fuerzan re­su­l­ta­dos planeados en la pantalla.

Si quieres aprender más sobre el lenguaje Dart, sustituye en DartPad la palabra “guante” por “pinzas”, “regla” o “pincel” y observa los cambios del resultado pro­gra­ma­do en la consola. Puedes mo­di­fi­car­lo a tu gusto y aplicarlo a distintos casos. Aquí aparece por primera vez el operador “||” que re­pre­se­n­ta la de­no­mi­na­ción lógica “o”. En Dart no se puede aplicar con “OR”.

Uno más y uno menos también con Dart

Para programar el siguiente apartado, tenemos que aprender las llamadas funciones de in­cre­me­n­to y de­cre­me­n­to en Dart, que agregan y sustraen gra­dua­l­me­n­te un resultado. En el ejemplo, se modifica el valor 50 con los ope­ra­do­res “++” y “—“.

var upAndDown = 50;
print (upAndDown);
print('----');
++upAndDown;
print (upAndDown);
print('----');
upAndDown++;
print (upAndDown);
print('----');
--upAndDown;
print (upAndDown);
print('----');
upAndDown--;
print (upAndDown);
Imagen: Programar con Dart: incrementar y decrementar un valor
El valor 50 se in­cre­me­n­ta y de­cre­me­n­ta gra­dua­l­me­n­te.

Aquí ob­se­r­va­mos que es posible obtener como resultado una cadena sencilla de ca­ra­c­te­res sin de­fi­ni­ción previa aña­dié­n­do­la entre pa­ré­n­te­sis con comillas mediante la función “print” en el código de programa. Esto sirve úni­ca­me­n­te para la es­tru­c­tu­ra­ción óptica del resultado. Con estos co­no­ci­mie­n­tos, ya estás preparado/a para programar bucles.

Dar vueltas en Dart: bucles

Los bucles son también una parte im­po­r­ta­n­te del día a día de la pro­gra­ma­ción. Nos referimos, por ejemplo, a las co­m­pa­ra­cio­nes con espacios ya exi­s­te­n­tes. Para ello, hay que servirse de la siguiente “expresión”: tenemos el valor A que se modifica co­n­ti­nua­me­n­te hasta alcanzar el espacio (estado) B. Así se re­pre­se­n­ta en el código Dart:

String myLabel = ' pieces';
var piece = 3;
while (piece < 12) {
var allThisStuff = '$piece $myLabel';
print(allThisStuff);
piece++;
    }

¿Qué hace DartPad con esto?

Imagen: Programar en Dart: bucles
Los bucles se ejecutan re­pe­ti­da­me­n­te hasta que se cumple una co­n­di­cio­nal definida.

En este ejemplo, también podrían volverse a incluir enu­n­cia­dos co­n­di­cio­na­les si, por ejemplo, se di­fe­re­n­cian palabras en singular o plural:

int amount = 1;
var itemSing = 'blouse';
var itemPlural = 'blouses';
if (amount == 1) 
    { print(itemSing);
    } else { print(itemPlural);
    }

Para aprender Dart, copia este ejemplo de código en DartPad y modifica la variable entera “cantidad” para que se imprima el artículo “blusa” en singular o en plural.

Resumen de los ope­ra­do­res Dart

Acabas de aprender algunos ope­ra­do­res para programar con Dart. En la siguiente tabla, en­co­n­tra­rás un resumen de los ope­ra­do­res más im­po­r­ta­n­tes.

En la tabla se ha aplicado el valor 35 a la variable “muster”.

var muster = 35;
Tipo de operador De­no­mi­na­ción Símbolo Ejemplo Resultado
Ari­t­mé­ti­co Suma + var muster + 2; 37
Resta - var muster - 2; 33
Mu­l­ti­pli­ca­ción * var muster * 3; 105
División / var muster / 7; 5
Divide y retorna un resultado entero ~/ var muster ~/ 7; 11
Asigna suma += var muster += 6; 41
Asigna resta -= var muster -= 7; 28
Asigna producto *= var muster *= 2; 70
Asigna división /= var muster /= 7; 5
De igualdad y re­la­cio­na­les Es igual == var muster == 35; True
No es igual != var muster != 44; True
Menor que < var muster < 44; true
Menor o igual que <= var muster <= 33; False
Mayor que > 44 > var muster; True
Mayor o igual que >= var muster>=23; false
In­cre­me­n­to y de­cre­me­n­to In­cre­me­n­ta ++ ++var muster; 36
In­cre­me­n­ta ++ var muster++; 36
De­cre­me­n­ta -- --var muster; 34
De­cre­me­n­ta -- var muster--; 34
Valor restante % %var muster%3; 2
Lógicos y && muster1 && muster2 … and
o muster1 muster2 … or
Negación ! muster1 ! muster2 … not
Co­n­di­cio­na­les If-else ? … : var y = muster < 34 ? 15 : 10; 10
If-else ? … : var y = muster < 36 ? 15 : 10; 15
Verificar si es Null ?? var y = muster ?? 9; 35
Verificar si es Null ?? var z = 0 ?? muster; 35

Con estos co­no­ci­mie­n­tos básicos, ya puedes ade­n­trar­te en la pro­gra­ma­ción con Dart y estarás un paso más cerca de programar tu propia apli­ca­ción.

Ir al menú principal