# 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?](https://www.ionos.com/es-us/digitalguide/paginas-web/desarrollo-web/lenguaje-de-programacion-dart-de-google/ "Lenguaje de programación Dart de Google")”, con información detallada sobre él, y el artículo sobre [Flutter](https://www.ionos.com/es-us/digitalguide/paginas-web/desarrollo-web/que-es-flutter/ "¿Qué es 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: ```none 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í: ```none 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](https://www.ionos.com/es-us/digitalguide/paginas-web/desarrollo-web/lenguajes-de-programacion-web/ "Lenguajes de programación web"), 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”: ```none 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](https://dart.dev/#try-dart "DART im Browser ausprobieren"). 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. ```none 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**”. ```none 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: [![Imagen: Aprender Dart: comando “print”](https://www.ionos.com/es-us/digitalguide/fileadmin/_processed_/1/8/csm_learn-dart-programming-print-command_ca00c79372.webp "Aprender Dart: comando “print”")](https://www.ionos.com/es-us/digitalguide/fileadmin/DigitalGuide/Screenshots_2020/learn-dart-programming-print-command.jpg) 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: ```none int mySize = 1.74; // integer is expected, but double comes print(mySize); ``` [![Imagen: Aprender en Dart: resultado erróneo](https://www.ionos.com/es-us/digitalguide/fileadmin/_processed_/4/3/csm_learn-dart-programming-error-output_7816846c65.webp "Aprender en Dart: resultado erróneo")](https://www.ionos.com/es-us/digitalguide/fileadmin/DigitalGuide/Screenshots_2020/learn-dart-programming-error-output.jpg) 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. ```none 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](https://www.ionos.com/es-us/digitalguide/fileadmin/_processed_/c/e/csm_learn-dart-programming-single-and-multi-line-text_047f3eb477.webp "Aprender Dart: texto en una o varias líneas")](https://www.ionos.com/es-us/digitalguide/fileadmin/DigitalGuide/Screenshots_2020/learn-dart-programming-single-and-multi-line-text.jpg) 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: ```none 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](https://www.ionos.com/es-us/digitalguide/fileadmin/_processed_/f/9/csm_learn-dart-programming-simple-calculation_6f18fd9173.webp "Aprender Dart: cálculo sencillo")](https://www.ionos.com/es-us/digitalguide/fileadmin/DigitalGuide/Screenshots_2020/learn-dart-programming-simple-calculation.jpg) 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: ```none 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](https://www.ionos.com/es-us/digitalguide/fileadmin/_processed_/2/1/csm_learning-dart-programming-using-conditions_fb4f389216.webp "Tutorial de Dart: enunciados condicionales")](https://www.ionos.com/es-us/digitalguide/fileadmin/DigitalGuide/Screenshots_2020/learning-dart-programming-using-conditions.jpg) 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 “—“. ```none 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](https://www.ionos.com/es-us/digitalguide/fileadmin/_processed_/5/8/csm_learn-dart-programming-increasing-and-decreasing-a-number_c5d1d43532.webp "Programar con Dart: incrementar y decrementar un valor")](https://www.ionos.com/es-us/digitalguide/fileadmin/DigitalGuide/Screenshots_2020/learn-dart-programming-increasing-and-decreasing-a-number.jpg) 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: ```none 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](https://www.ionos.com/es-us/digitalguide/fileadmin/_processed_/5/e/csm_learn-dart-programming-loops_dd0d17e8ae.webp "Programar en Dart: bucles")](https://www.ionos.com/es-us/digitalguide/fileadmin/DigitalGuide/Screenshots_2020/learn-dart-programming-loops.jpg) 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: ```none 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”. ```none 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](https://www.ionos.com/es-us/digitalguide/paginas-web/desarrollo-web/como-crear-una-app-programar-vs-app-maker/ "Cómo crear una app: Programar vs. app maker"). This is a markdown version of: [https://www.ionos.com/es-us/digitalguide/paginas-web/desarrollo-web/tutorial-de-dart/](https://www.ionos.com/es-us/digitalguide/paginas-web/desarrollo-web/tutorial-de-dart/) for AI/LLM consumption.