Aprendiendo Flutter: Introducción a Dart

Llevo un tiempo con una idea que me gustaría desarrollar, y la creación de aplicaciones multiplataforma es algo que me llama mucho la atención. Poder crear una app que funcione tanto en móviles como en equipos de escritorio es un objetivo para mí, ya que como desarrollador web, nunca he creado aplicaciones más allá del navegador.

A pesar de la popularidad de frameworks como Electron para el desarrollo de aplicaciones de escritorio con una base de código JavaScript, me gustaría alejarme temporalmente del ecosistema JS y dedicarme al aprendizaje de un nuevo lenguaje de programación para variar.

Después de reflexionar y organizar mis ideas, decidí aprender Flutter para dar vida a la aplicación que quiero crear. Además, utilizaré este blog para documentar y hacer seguimiento a mis avances durante este proceso de aprendizaje.

Flutter y Dart

Parafraseando su definición oficial, Flutter es un framework de código abierto desarrollado por Google que permite crear aplicaciones multiplataforma compiladas de forma nativa a partir de una única base de código escrita en Dart, un lenguaje de programación también desarrollado por el gigante tecnológico.

Si tuviera que explicar por qué elegí Flutter para el desarrollo de mi futura aplicación, la verdad es que no tendría una respuesta puramente técnica. Sencillamente, me incliné por esta herramienta porque me pareció más atractiva que otras opciones, como Kotlin Multiplatform Mobile (KMM).

Además de su atractivo inicial, Flutter ofrece gran flexibilidad y permite un desarrollo relativamente rápido. Pero lo que más me convenció fue el muy buen rendimiento de Dart al momento de compilar, ya que algo que siempre busco en mis proyectos es el mejor rendimiento posible en cualquier dispositivo.

Antes de trabajar con un framework, es necesario aprender el lenguaje con el que vamos a desarrollar. Esta publicación servirá como introducción a la sintaxis de Dart para aquellos que también quieran adentrarse al mundo del desarrollo multiplataforma.

Es importante aclarar que nos enfocaremos únicamente en las características principales de la sintaxis de Dart. Esta información está destinada a quienes ya tienen experiencia con lenguajes de programación o poseen conocimientos básicos de lógica de programación. Si eres completamente nuevo en el mundo del desarrollo de aplicaciones, te recomiendo encarecidamente que primero aprendas los fundamentos antes de sumergirte en un nuevo lenguaje de programación.

Entorno de Desarrollo

Para escribir código de forma más cómoda, usaremos un IDE (Entorno de Desarrollo Integrado). En mi caso, trabajaré con Visual Studio Code para Dart y Flutter. Sin embargo, si tienes la posibilidad, puedes optar por Android Studio, que está diseñado específicamente para el desarrollo de aplicaciones Android. Si este es tu caso, puedes consultar la documentación oficial de Dart para integrarlo en Android Studio aquí.

Si planeas escribir código Dart con Visual Studio Code, no necesitarás instalar Android Studio por ahora. No obstante, cuando empecemos a desarrollar nuestras primeras aplicaciones con Flutter, sí será necesario. Por ello, te recomiendo leer la documentación oficial de Android Studio para instalarlo en tu equipo en este enlace.

Para instalar Dart, tendrás que descargar su SDK. Un Software Development Kit (o Kit de Desarrollo de Software) es un conjunto de herramientas (como librerías, compiladores y documentación) que los creadores de plataformas de desarrollo ofrecen para facilitar la creación de aplicaciones compatibles con su producto. Te dejo el enlace para obtenerlo aquí y escojas la instalación de tu preferencia según tu sistema operativo. Puedes instalarlo desde un gestor de paquetes, una imagen de Docker, o descargando Flutter, ya que el SDK de Dart viene incluido en el SDK de Flutter. En mi caso, optaré por esta última opción.

Si vas a trabajar en Visual Studio Code, te recomiendo instalar las extensiones de Flutter y Dart disponibles en la tienda del editor. Con estas, tu aprendizaje y desarrollo con el lenguaje serán mucho más cómodos, permitiéndote crear un nuevo proyecto adaptado a Dart o Flutter utilizando la paleta de comandos, y dándote sugerencias y correcciones al momento de escribir código.

Una vez que tengas los recursos necesarios instalados, solo nos queda crear un nuevo proyecto en Dart para empezar a explorar el lenguaje. En VS Code, puedes utilizar la plantilla base que te sugiere la paleta de comandos. Si estás en otro editor de código, con crear un archivo con la extensión .dart es suficiente.

Sintáxis básica

Función main

En Dart, la función principal main es obligatoria para ejecutar cualquier línea de código. Quienes hayan trabajado con C++ o Java ya estarán familiarizados con esto. Al principio de nuestro proyecto, declararemos nuestra función e indicaremos que muestre un mensaje en la consola:

void main() {
    print('Hola Mundo en Dart');
}

Si estás en VS Code puedes presionar CTRL + F5 para ejecutar el archivo sin depurar. Si lo escribimos correctamente, debería mostrarnos el siguiente mensaje al momento de ejecutar el archivo.

Para mostrar mensajes en consola, utilizamos el comando print y, entre paréntesis y comillas (simples, dobles o invertidas), escribimos el texto que queramos. En Dart, cada instrucción que se escribe debe cerrarse con un punto y coma (;) al final. Si no lo haces, te marcará un error de sintaxis.

Variables

Dart es un lenguaje de tipado fuerte, es decir, cada variable debe tener un tipo de dato especificado. Esto es bastante útil para evitar problemas de conversión de tipos, a diferencia de lenguajes como Javascript, que es de tipado dinámico.

Para declarar variables en Dart, primero indicamos el tipo de dato, luego el nombre de la variable y por último definimos su valor. Como buena práctica, se recomienda utilizar el estándar CamelCase para nombrar las variables. A continuación, un ejemplo de diferentes tipos de variables disponibles en Dart:

void main(){
  // Esto es un string
  String name = 'Charlie Puth';
  // Esto es un entero
  int age = 33;
  // Esto es un double (Numero con decimales)
  double height = 1.78;
  // Esto es un numero
  num awards = 8;
  // Esto es un booleano
  bool isSinger = true;

  print('$name tiene $age años de edad, mide $height metros y ha ganado $awards premios. ¿Es cantante? $isSinger');
}

Como puedes ver, los comentarios en este lenguaje se manejan de la misma forma que en Javascript: Dos diagonales para un comentario de una línea (//Esto es un comentario de una linea) y la sintaxis /* comentario */ para comentarios de varias líneas.

En Dart, tenemos una característica interesante: no es necesario (aunque sí recomendable) indicar explícitamente el tipo de dato al declarar una variable. Al colocar el tipo var antes del nombre de la variable, Dart inferirá automáticamente el tipo de variable a través de su valor inicial. Si más adelante intentamos cambiar el tipo de dato del valor de la variable, nos marcará un error de tipado:

void main() {
  // Definimos una variable global que será un String
  var message = 'Esta variable será un String';
  print(message);

  // Si ahora intentamos cambiar el tipo de dato, devolverá un error
  // message = false; // Esto causaría un error de tipo en tiempo de compilación
}

Además de var, Dart también tiene el tipo dynamic, que permite que una variable cambie su tipo en tiempo de ejecución, de forma similar a cómo operan los lenguajes de tipado dinámico. Sin embargo, su uso se desaconseja para la mayoría de los casos debido a que puede anular las ventajas de seguridad y rendimiento del tipado fuerte de Dart.

void main() {
    // Esto es una variable de tipo dinámico, puede cambiar su tipo en tiempo de ejecución
    dynamic anything = 'Hello';
    print(anything); // Imprime: Hello

    anything = 123;
    print(anything); // Imprime: 123
}

Cuando trabajamos con constantes en Dart, nos encontraremos con const y con final que, aunque similares, operan de forma diferente:

• Una variable declarada con const es inmutable y su valor debe ser conocido en tiempo de compilación. Esto significa que su valor es fijo antes de que el programa se ejecute.

• Por otro lado, una variable final también es inmutable; solo puede asignarse una vez. Sin embargo, su valor se determina en tiempo de ejecución. Es decir, el valor puede ser el resultado de un cálculo o de una operación que solo se conoce mientras el programa está en marcha, pero una vez que se le asigna un valor, este no puede ser modificado.

void main() {
  // Pi es una constante que tiene un valor fijo ya conocido que no cambia
  const pi = 3.14159;
  print(pi);

  /* Con final, el valor de currentDateTime se establece una vez durante la ejecución del programa
   * y no se puede cambiar.
   */
  final DateTime currentDateTime = DateTime.now();
  print('La fecha y hora actual es: $currentDateTime');

  // Si tratamos de cambiar el valor de pi o de currentDateTime, en ambos nos saldrá un error
  // pi = 3.14; // Error: No se puede asignar a una variable 'const'
  // currentDateTime = DateTime.now(); // Error: La variable 'final' ya ha sido asignada
}

Adicionalmente, Dart permite que las variables sean nulas (nullable) simplemente añadiendo el signo de interrogación (?) al final de su declaración de tipo:

void main() {
  // Esta variable String puede ser null o un String
  String? stringNullable = null; // Se puede inicializar como null
  print(stringNullable);

  // Esta variable no puede ser null, pero sí un String
  String stringNoNullable = 'Hola'; // Debe ser inicializada con un valor no nulo
  // String stringNoNullable; // Esto causaría un error si no se inicializa
  print(stringNoNullable);
}

---

Y de esta forma, finalizamos esta publicación habiendo visto lo más básico de la sintaxis de Dart. Si te interesa investigar más a detalle los tipos de datos disponibles en este lenguaje, puedes revisar la documentación oficial de Dart presionando aquí.

En otra ocasión hablaremos sobre estructuras y flujos de datos en Dart. Por el momento, espero que esta información te sirva de ayuda para comenzar a aprender este lenguaje de programación tan interesante.

¡Nos vemos!