Tutorial de Dart: primeros pasos prácticos

El lenguaje de programación Dart es joven, pero ya se ha consolidado, especialmente en el ámbito de la programación de aplicaciones móviles. Google ha creado Flutter, un kit de desarrollo de software (SDK) que utiliza Dart, promoviendo así la utilización y divulgación de este lenguaje de programación. Una ventaja importante es que con él se pueden programar aplicaciones para todos los sistemas operativos 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 programación de Google. Verás que no es tan difícil. Para más información sobre el lenguaje en sí, consulta nuestro artículo “¿Qué es Dart?”, con información detallada sobre él, y el artículo sobre Flutter para descubrir más sobre el kit de desarrollo de software de Google.

Los orígenes de Dart

Dart se presentó originalmente para solventar las deficiencias de JavaScript que, desde el punto de vista de los desarrolladores, ya no podían mejorarse dentro del propio lenguaje de programación. De esta manera, se comenzó a buscar la forma de simplificar o reunir ciertas lógicas internas sin tener que renunciar al abanico de posibilidades del lenguaje. A modo de ejemplo, el código de JavaScript sería como se muestra a continuació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 programación está compuesto por una gran variedad de “vocabulario” con el que se estructuran datos y se desarrollan operaciones (algoritmos). Para ello, el lenguaje se sirve de un número determinado 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 programación de internet, descubrirás más sobre la arquitectura de los lenguajes de programación. Mediante la combinación de variables, operadores, condicionales, 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 presentamos los primeros ejemplos, sencillos y fáciles de comprender, para aprender Dart. Puedes modificarlos a tu antojo y experimentar con ellos. Todas las rutinas de programació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 paréntesis “()” 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 diagonales “//” hay un comentario que permanece invisible; también representado con “/* este es un comentario de varias líneas...*/” (ejemplo conocido en PHP). De esta manera, se puede comentar de manera estructurada el propio código o el de otros desarrolladores, lo que facilita enormemente el trabajo en equipo en los proyectos existentes.

Nota

Al igual que en Java, C o PHP, todos los enunciados en Dart se cierran con punto y coma.

Anímate y prueba los siguientes ejemplos utilizando la plataforma gratuita de código abierto DartPad. Una de las ventajas de esta herramienta es que numera las líneas del programa e indica si hay errores. Además, algunos ejemplos de programación están disponibles en un menú desplegable.

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

Definir y utilizar variables

Con las variables, se determinan los espacios del programa. Comenzamos con las cifras.

var mySize = 174;

Aquí se ha determinado una nueva variable “mi espacio” a la que se le ha asignado el valor “174”. Esta variable mantiene este valor en la secuencia de programación hasta que sea modificada activamente por operadores o funciones. Para obtener el valor de las variables, utilizamos 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 siguientes resultados de las líneas 3, 6, 9 y 12 en la consola:

Aprender Dart: comando “print”
Para las variables se puede elegir (casi) cualquier denominación, lo que facilita la lectura y la corrección del código del programa.

Las variables en Dart admiten determinados tipos, que pueden ser números enteros (“int”) o números decimales (“double”). El tipo de variable “dynamic” puede admitir diferentes valores y expresiones en la secuencia de programación. En cambio, no se tienen en cuenta las líneas en blanco, los tabuladores ni los párrafos durante la ejecución de la rutina. Por eso, los valores se encuentran directamente unos debajo de otros a la derecha en la consola.

Al intentar asignar un valor erróneo a un determinado tipo de variable, se genera un aviso de error con la descripción correspondiente en DartPad:

int mySize = 1.74; // integer is expected, but double comes
print(mySize);
Aprender en Dart: resultado erróneo
Con “1issue(s)”, DartPad notifica un valor asignado erróneamente. 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 programación, y el valor erróneo se subraya en naranja.
Nota

Las denominaciones (identificadores) para las variables utilizadas no pueden contener palabras reservadas. Tampoco están permitidas las cifras al inicio ni los caracteres en blanco o especiales, a excepción del guion bajo “_” y el símbolo de dólar “$”. Los identificadores tienen en cuenta las mayúsculas y las minúsculas, y deben ser únicos.

Cadena de caracteres en el tutorial de Dart

Mediante cadenas de caracteres, con el tipo de dato “String” (cuidado: con S mayúscula), se pueden procesar diferentes caracteres 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);
Aprender Dart: texto en una o varias líneas
Texto en una o varias líneas en Dart dependiendo del número de comillas utilizado.

Mediante la función String, el texto se reproduce encerrando el contenido deseado entre comillas simples o dobles: ' o ". Pero si el texto se abre y cierra con el triple de cualquiera 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 tipográficas (por lo general, las comillas inglesas) se pueden insertar fácilmente en el texto en Windows con la combinació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].

Malabarismos de cifras con Dart

No existe una gran diferencia entre la declaración de variables y los cálculos de variables en los cuales se pueden sumar tanto cifras como expresiones. Para calcular resultados, Dart emplea operadores aritméticos. Por ejemplo, una tarea podría consistir en que el cliente seleccionara un artículo de una tienda en línea del que desea comprar tres unidades. En la función de carrito habría que multiplicar 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 utilización de diferentes métodos para el conjunto de datos, además de los comentarios en las líneas relevantes:

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);
Aprender Dart: cálculo sencillo
Ejemplo de un cálculo sencillo en combinación con fragmentos de texto.

En esta imagen visualizamos cadenas, valores enteros y decimales, y el conjunto de elementos de programación de nuevas variables. Hay que prestar especial atención a la hora de combinar dos variables existentes en una nueva variable para asegurarnos 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).

Establecer enunciados condicionales

Los enunciados condicionales desempeñan un papel esencial en la programación. Aquí te enseñamos a programar una condicional con Dart. Una condicional 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 paréntesis, 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:

Tutorial de Dart: enunciados condicionales
Los enunciados condicionales fuerzan resultados 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 programado en la consola. Puedes modificarlo a tu gusto y aplicarlo a distintos casos. Aquí aparece por primera vez el operador “||” que representa la denominació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 incremento y decremento en Dart, que agregan y sustraen gradualmente un resultado. En el ejemplo, se modifica el valor 50 con los operadores “++” y “—“.

var upAndDown = 50;
print (upAndDown);
print('----');
++upAndDown;
print (upAndDown);
print('----');
upAndDown++;
print (upAndDown);
print('----');
--upAndDown;
print (upAndDown);
print('----');
upAndDown--;
print (upAndDown);
Programar con Dart: incrementar y decrementar un valor
El valor 50 se incrementa y decrementa gradualmente.

Aquí observamos que es posible obtener como resultado una cadena sencilla de caracteres sin definición previa añadiéndola entre paréntesis con comillas mediante la función “print” en el código de programa. Esto sirve únicamente para la estructuración óptica del resultado. Con estos conocimientos, ya estás preparado/a para programar bucles.

Dar vueltas en Dart: bucles

Los bucles son también una parte importante del día a día de la programación. Nos referimos, por ejemplo, a las comparaciones con espacios ya existentes. Para ello, hay que servirse de la siguiente “expresión”: tenemos el valor A que se modifica continuamente hasta alcanzar el espacio (estado) B. Así se representa 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?

Programar en Dart: bucles
Los bucles se ejecutan repetidamente hasta que se cumple una condicional definida.

En este ejemplo, también podrían volverse a incluir enunciados condicionales si, por ejemplo, se diferencian 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 operadores Dart

Acabas de aprender algunos operadores para programar con Dart. En la siguiente tabla, encontrarás un resumen de los operadores más importantes.

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

var muster = 35;
Tipo de operador Denominación Símbolo Ejemplo Resultado        
Aritmético Suma + var muster + 2; 37        
  Resta - var muster - 2; 33        
  Multiplicació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 relacionales 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        
                 
Incremento y decremento Incrementa ++ ++var muster; 36        
  Incrementa ++ var muster++; 36        
  Decrementa -- --var muster; 34        
  Decrementa -- var muster--; 34        
  Valor restante % %var muster%3; 2        
                 
Lógicos y && muster1 && muster2 … and        
  o       muster1   muster2 … or
  Negación ! muster1 ! muster2 … not        
                 
Condicionales 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 conocimientos básicos, ya puedes adentrarte en la programación con Dart y estarás un paso más cerca de programar tu propia aplicación.

¿Le ha resultado útil este artículo?
Utilizamos cookies propias y de terceros para mejorar nuestros servicios y mostrarle publicidad relacionada con sus preferencias mediante el análisis de sus hábitos de navegación. Si continua navegando, consideramos que acepta su uso. Puede obtener más información, o bien conocer cómo cambiar la configuración de su navegador en nuestra. Política de Cookies.