3 padrões legais do Dart

Sobre o autor: Jose se formou recentemente na universidade e agora trabalha no Material, um design system que ajuda equipes a criar experiências digitais de alta qualidade. A equipe do Jose mantém a biblioteca material do Flutter.

Com o framework Flutter, você usa a linguagem de programação Dart para criar aplicações bonitas. Com o tempo, aprendi padrões úteis do Dart que me ajudaram a ser um desenvolvedor Flutter melhor. Aqui estão três que recomendo que você experimente no seu próximo aplicativo:

• Atribuir um valor condicionalmente: boolean ? widget : widget

• Mesclar widgets em uma coleção: for ()...[]

• Invocar imediatamente uma função anônima: () {} ()

Este artigo mostra como usar cada padrão, terminando com um Pen incorporado onde você pode brincar com o código.

O operador de atribuição condicional, ?: (também conhecido como operador ternário), exige uma expressão condicional e duas expressões de valor. Esse padrão é útil quando seu widget depende de um valor booleano. Em vez de modularizar a operação em um método separado, você pode usar o operador ternário para executar o código inline. Já usei essa técnica incontáveis vezes.

No exemplo a seguir, o título do AppBar depende de um valor booleano. (Neste caso, o valor depende do booleano isVegetarian.) Se o valor for verdadeiro, o texto do título é definido como o primeiro valor (“Vegetarian Food”); caso contrário, é o segundo valor (“Non-Vegetarian Food”).

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

Esse padrão, for () ...[], usa o operador spread (...) para mesclar uma lista de widgets em uma coleção existente. Eu uso sempre que trabalho com uma lista de widgets, geralmente com a propriedade children. O exemplo a seguir usa essa técnica para criar uma lista de widgets:

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

Neste exemplo, foods é uma lista de objetos Food, definida assim:

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;
}

O padrão for () ...[] é prático sempre que você precisa adicionar vários widgets (como os widgets ListTile do exemplo, se isVegetarian for verdadeiro) várias vezes (3 vezes, no exemplo) em uma lista de widgets.

Como o operador spread (...) é relativamente novo no Dart, certifique-se de que seu arquivo pubspec.yaml especifica um Dart SDK 2.3.0 ou superior:

environment:
  sdk: ">=2.3.0 < 3.0.0"

Para saber mais sobre operadores de coleção e operadores spread, leia o tour pela linguagem Dart.

O terceiro padrão, () {} (), é o equivalente em Dart de uma expressão de função invocada imediatamente (IIFE). Esse padrão prático permite definir uma função anônima e executá-la imediatamente. Achei esse padrão extremamente útil ao trabalhar com um widget que pode ter várias saídas. Em vez de ter operadores ternários aninhados ou modularizar uma chamada simples, o código fica disponível inline. O exemplo a seguir mostra esse padrão, com uma função anônima que contém uma instrução 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;
  }
}(),

Você pode usar o CodePen para brincar com código Flutter. Aqui está um Pen com todo o código deste artigo:

Aqui está outro exemplo do CodePen, só com cores:

Espero que esses três padrões do Dart deem a você mais liberdade ao desenvolver aplicações Flutter. Se você tiver outras técnicas favoritas, compartilhe nos comentários!

Para saber mais sobre o Jose, visite-o no GitHub, no LinkedIn, no YouTube ou no Instagram.