Las bases de Flutter: Introducción a las variables


Avatar de Pedro Cortez

Aprender un nuevo lenguaje puede ser bastante intimidante, especialmente si no tienes habilidades previas en programación. ¿Qué debo aprender para poder desarrollar mi proyecto? ¿Necesito saber todo sobre cómo programar con Flutter antes de comenzar con mi aplicación? ¿Por dónde empezar? Afortunadamente, aquí te ofrezco una pequeña introducción a los conceptos básicos del lenguaje Dart.


variables de Flutter

¿Para qué sirven las variables en Flutter?

Cuando programamos con Flutter, un primer concepto que debemos entender es el de las variables. Las variables son valores que almacenamos bajo un nombre único, para poder reutilizarlos fácilmente en diferentes lugares más adelante. Estos valores pueden tener diversas formas, como palabras, números, listas, etc.

Por ejemplo, supongamos que quiero aplicar un color específico en varios lugares de mi aplicación. En lugar de recordar cada vez el valor RGB de ese color, lo guardaré una vez en una variable que llamaré mi_color_favorito y podré reutilizarla cada vez que la necesite.

Por lo tanto, las variables sirven para: Mantener elementos en memoria, para reutilizarlos cuando lo deseemos.

Crear una variable con Flutter

Lo primero que debemos hacer antes de usar una variable es definirla. Debemos darle los siguientes atributos:

  • Un estado: final, late o const (no siempre obligatorio), que define su comportamiento.
  • Un tipo: String, int, bool, List, etc.
  • Un nombre: Idealmente en snake_case, es decir, con guiones bajos (_) en lugar de espacios y en minúsculas.
  • Un valor: Que corresponde al tipo de variable (tampoco siempre obligatorio). Por ejemplo, una variable String solo puede contener palabras o frases. No puede contener un número.

Aquí hay algunos ejemplos de variables para comprender el principio:

const String mi_coche = "Seat Arona";
final int mi_edad = 25; 
List<String> lista_animales = ["lobo", "zorro", "comadreja"];
late <bool> mi_valor_futuro;

En el último caso, he creado la variable mi_valor_futuro, pero aún no le he asignado un valor. Puedo hacerlo más tarde si es necesario.

Estado de una variable

Este concepto no es fácil de entender cuando se empieza, y yo mismo todavía tengo dificultades con él. Cuando creas una variable, es posible darle un «estado» que definirá su comportamiento.

Final

Colocar final delante de tu variable significa que esta no podrá ser modificada posteriormente. Se puede utilizar para representar un valor que no debería cambiar una vez definido.

Const

Las variables const, al igual que las variables final, no pueden cambiar una vez que se les ha asignado un valor. La diferencia entre ambos tipos reside en el momento en que el valor debe asignarse a la variable. En el caso de final, es posible dejar un valor vacío y asignarlo más tarde, durante la ejecución de la aplicación. En cambio, una variable const debe tener un valor desde el momento en que la aplicación se inicia.
Por ejemplo, imaginemos que tengo una variable mi_color_favorito. Si la defino como const, debe tener un valor asignado cuando mi aplicación se lanza. Sin embargo, si es una variable final, puedo pedir al usuario que me indique su color favorito, y ese valor se almacenará en mi variable más adelante.

Late

La particularidad de una variable late es que no se inicializará hasta que sea utilizada. Esto puede ser útil en ciertos casos, cuando sabemos que vamos a usar una variable durante la ejecución de la aplicación, pero aún no tenemos un valor que asignarle.

Las variables late han sido en gran medida reemplazadas con la introducción del «null safety». Simplemente agregando un ? detrás del tipo de la variable, indicamos que esta puede tener un valor null, lo que evita que la aplicación se bloquee al inicializarse.

Si te sientes un poco perdido, no te preocupes, todo quedará más claro con algo de práctica.

Tipos de variables

Antes de poder usar una variable, tendrás que asignarle un tipo. Este paso es muy importante, ya que el tipo de tu variable definirá lo que puede o no contener. Por ejemplo, no podrás almacenar un número en una variable que ha sido prevista para almacenar texto.

Existen varios tipos de variables en Flutter que permiten almacenar diferentes valores, pero aquí están los que probablemente utilizarás con más frecuencia.

String

Las variables de tipo String te permiten manipular cadenas de caracteres, es decir, letras, palabras o frases. Luego se pueden usar estas cadenas en funciones o para mostrar mensajes en la consola.

Por ejemplo:

String mi_mensaje = "Estoy empezando con Flutter";
print(mi_mensaje);
Estoy empezando con Flutter

Es importante poner una variable de tipo String entre comillas. Puedes usar comillas simples (‘ ‘) o dobles (» «), pero Flutter recomienda utilizar las segundas.

Otra cosa que puedes hacer con las variables de tipo String es la concatenación, es decir, unir dos cadenas de caracteres utilizando un signo $ delante de nuestra variable. Por ejemplo:

String dia = "Miércoles";
print("Hoy es $dia.");
Hoy es Miércoles.

Almacenar palabras o frases en una variable puede ser muy útil. Por ejemplo, te puede servir para personalizar un mensaje de bienvenida usando el nombre del usuario que hayas obtenido previamente.

Int y double

Los números, por su parte, se almacenan en variables de tipo int o double. La diferencia entre ambos es que las variables double pueden contener valores decimales, mientras que las de tipo int no. Por ejemplo:

int numero_entero = 3;
double valor_decimal = 3.14;

A diferencia de las variables String, los valores de int y double no necesitan ir entre comillas.

Estos valores se pueden utilizar para definir tamaños, radios, márgenes, etc., o para realizar cálculos como sumas, restas, etc. Además, es interesante saber que las variables int y double se pueden incrementar o decrementar fácilmente, es decir, añadir o restar 1. Por ejemplo:

int mi_numero = 20;
mi_numero++;
print(mi_numero);
21

mi_numero--;
print(mi_numero);
20

Bool

Las variables de tipo bool, para booleano, solo pueden contener valores true o false (verdadero o falso). Se pueden utilizar mucho en dos tipos de situaciones.

Para crear funciones con condiciones:

var booleano = true;
if (booleano == true) {
  print("Mi valor es verdadero");
} else {
  print("Mi valor es falso");
}
Mi valor es verdadero

O para definir algo que solo puede tener dos estados. Por ejemplo, una casilla de verificación (checkbox) solo puede estar en dos estados: marcada o desmarcada. Asignamos true a una casilla marcada y false a una casilla desmarcada.

List y Map

Por último, probablemente utilizarás List y lo que llamamos Map. Las List, como su nombre lo indica, son simplemente una colección de varios elementos que pueden ser del mismo tipo o no.

  • List<String> -> Mi lista solo puede contener cadenas de caracteres y nada más.
  • List<dynamic> -> Mi lista puede contener cualquier tipo de valor, incluyendo otras listas.

Las variables tipo List deben estar representadas entre corchetes, de la siguiente manera:

List<String> mi_lista = ["Pedro", "Pablo", "Juan"];

Por otro lado, los Map son listas de pares clavey se representan con llaves {}. Aquí tienes un ejemplo de un Map que podría representar a una persona:

Map<dynamic, dynamic> identidad = {
  "Nombre": "Alan Smithee", 
  "Edad": 48, 
  "Ciudad": "París",
  "Animales": {
    "Gato": 2,
    "Perro": 1,
    "Pez": 5
  }
};

No voy a explicarte aquí cómo navegar dentro de una List o un Map, ni cómo agregar, eliminar o modificar elementos. Para más detalles, consulta mis artículos dedicados a la clase List y la clase Map.

Conclusión

Entender para qué sirven las variables y cómo declararlas es el primer paso para programar en Dart. Sin embargo, simplemente crearlas probablemente no sea suficiente para desarrollar una aplicación completa. Por eso, te explicaré cómo manipularlas utilizando diferentes operadores en el siguiente artículo:

Fundamentos de Flutter: Introducción a los operadores

Si deseas aprender más sobre las diferentes variables presentadas en este artículo, también te invito a consultar estas guías detalladas:

Avatar de Pedro Cortez