3 patrones geniales de Dart

Sobre el autor: Jose se graduó recientemente de la universidad y ahora trabaja en Material, un sistema de diseño que ayuda a los equipos a construir experiencias digitales de alta calidad. El equipo de Jose mantiene la librería material de Flutter.

Con el framework Flutter, usas el lenguaje de programación Dart para crear aplicaciones hermosas. Con el tiempo, he aprendido patrones útiles de Dart que me han ayudado a ser un mejor desarrollador de Flutter. Aquí hay tres que recomiendo que pruebes en tu próxima aplicación:

• Asignación condicional de un valor: boolean ? widget : widget

• Fusionar widgets en una colección: for ()...[]

• Invocación inmediata de una función anónima: () {} ()

Este artículo te muestra cómo usar cada patrón, terminando con un Pen embebido donde puedes jugar con el código.

El operador de asignación condicional, ?: (también conocido como operador ternario), requiere una expresión condicional y dos expresiones de valor. Este patrón es útil cuando tu widget depende de un valor booleano. En lugar de modularizar la operación en un método separado, puedes usar el operador ternario para ejecutar el código inline. He usado esta técnica muchísimas veces.

En el siguiente ejemplo, el título del AppBar depende de un valor booleano. (En este caso, el valor depende del booleano isVegetarian.) Si el valor es true, el texto del título se establece al primer valor (“Comida vegetariana”); de lo contrario, es el segundo valor (“Comida no vegetariana”).

appBar: AppBar(
  title: Text(Random().nextBool()
      ? 'Vegetarian Food'
      : 'Non-Vegetarian Food'),
),

Este patrón, for () ...[], usa el operador spread (...) para fusionar una lista de widgets en una colección existente. Uso esto siempre que estoy trabajando con una lista de widgets, a menudo con la propiedad children. El siguiente ejemplo usa esta técnica para crear una lista de widgets:

children: [
  Container(),
  for (final food in foods) ...[
    if (isVegetarian == food.isVegetarian)
      ListTile(title: Text(food.name)),
    SizedBox(height: 50.0),
  ],
],

En este ejemplo, foods es una lista de objetos Food, definidos de la siguiente manera:

List<Food> foods = [
  Food(name: 'apple', isVegetarian: true),
  Food(name: 'nuts', isVegetarian: true),
  Food(name: 'eggs', isVegetarian: true),
  Food(name: 'chicken', isVegetarian: false),
];

class Food {
  Food({
    this.name,
    this.isVegetarian,
  });

  String name;
  bool isVegetarian;
}

El patrón for () ...[] es práctico siempre que necesites agregar múltiples widgets (como los widgets ListTile en el ejemplo si isVegetarian es true) múltiples veces (3 veces, en el ejemplo) a una lista de widgets.

Como el operador spread (...) es relativamente nuevo en Dart, asegúrate de que tu archivo pubspec.yaml especifique un SDK de Dart 2.3.0 o posterior:

environment:
  sdk: ">=2.3.0 < 3.0.0"

Para aprender más sobre operadores de colección y operadores spread, lee el tour del lenguaje Dart.

El tercer patrón, () {} (), es el equivalente en Dart de una expresión de función invocada inmediatamente (IIFE). Este patrón tan práctico te permite definir una función anónima y ejecutarla inmediatamente. Encontré este patrón extremadamente útil al trabajar con un widget que podría tener múltiples salidas. En lugar de tener operadores ternarios anidados o modularizar una llamada simple, el código está disponible inline. El siguiente ejemplo muestra este patrón, con una función anónima que contiene una sentencia switch.

color: () {
  switch (getRandomElement(foods).name) {
    case 'apple':
      return Colors.green;
    case 'nuts':
      return Colors.brown;
    case 'eggs':
      return Colors.yellow;
    default:
      return Colors.transparent;
  }
}(),

Puedes usar CodePen para jugar con código de Flutter. Aquí hay un Pen que tiene todo el código de este artículo:

Aquí hay otro ejemplo de CodePen solo con colores:

Espero que estos tres patrones de Dart te den más libertad al desarrollar aplicaciones de Flutter. Si tienes otras técnicas favoritas, ¡compártelas en los comentarios!

To learn more about Jose, visit him on GitHub, LinkedIn, YouTube, or Instagram.