Seu primeiro package em Flutter/Dart + TDD

Aprenda o conceito e coloque o seu pacote em produção

Photo by Jess Bailey on Unsplash

O Flutter tem sido uma das tecnologias mais adotadas atualmente para desenvolvimento de aplicativos mobile, permitindo o desenvolvimento nativo para iOS e Android, além de utilizar a linguagem Dart, que permite desenvolver aplicações para frontend e backend.

Esse artigo:

• Mostrar como desenvolver um pacote em Flutter/Dart;
• Introdução à TDD;
• Como publicar o seu pacote;

Introdução aos packages

Packages (pacotes) possibilitam a criação de códigos modulares que podem ser compartilhados facilmente. Um pacote simples em Flutter consiste de duas partes principais:

• pubspec.yaml, um arquivo de metadados que declara o nome do pacote, versão, autor, etc.
• lib, uma pasta que contém o código público do pacote, minimamente um único arquivo <meu-pacote>.dart.

Tipos de pacotes 📄

Pacotes podem conter mais que um tipo de conteúdo:

• Pacotes Dart, pacotes de propósito geral no Dart. Alguns podem conter funcionalidades específicas para o Flutter, gerando uma dependência da utilização no contexto do mesmo.
• Pacotes Plugin, pacotes especializados que contém uma API escrita em código Dart combinada com uma ou mais implementações específicas para determinadas plataformas, como Android, iOS, web, etc.

Criando um pacote simples 🐤

Para criar um pacote em Flutter utilize a flag template com o comando flutter create especificando o nome do seu pacote, no meu caso = greeting. (Tudo isso, é claro, no terminal).

flutter create --template=package greeting

Esse comando vai criar um pacote simples com os seguintes arquivos:

• LICENSE, licensa de software vazio;
• test/hello_test.dart, os testes unitários para o pacote;
• hello.iml, configuração usada pelas IDEs IntelliJ;
• .gitignore, arquivo oculto que diz para o Git quais arquivos e pastas deve ignorar no projeto;
• .metadata, arquivo oculto utilizado por IDEs para rastrear as propriedades do projeto Flutter;
• pubspec.yaml, metadados especificando as dependências do pacote. Usado pela ferramenta pub;
• README.md, um arquivo inicial em markdown que descreve brevemente o propósito do pacote;
• .idea/modules.xml, idea/modules.xml, idea/workspace.xml, arquivos ocultos de configuração para IDEs IntelliJ;
• CHANGELOG.md, um arquivo em markdown contendo o rastreamento de mudanças de versão no pacote.

Explorando o hello world 🧐

Legal, temos nosso pacote padrão! 🎉 vamos fuçar um pouco e ver o que ele faz, abrindo o arquivo lib/greeting.dart (esse nome pode mudar de acordo com o nome do pacote que você definiu na criação) vemos o seguinte:

library greeting;

/// A Calculator.
class Calculator {
  /// Returns [value] plus 1.
  int addOne(int value) => value + 1;
}

• O comando library na primeira linha define o nome do pacote;
• O que parece comentários com três barras (///) é a documentação, primeiro dizendo sobre a classe e depois sobre a funcão, especificando o retorno;
• E por último temos uma função que adiciona um 1 ao valor passado.

Mas como vemos isso funcionando? Testes! 😎, abrindo o arquivo test/greeting_test.dart vemos o seguinte:

import 'package:flutter_test/flutter_test.dart';
import 'package:greeting/greeting.dart';

void main() {
  test('adds one to input values', () {
    final calculator = Calculator();
    expect(calculator.addOne(2), 3);
    expect(calculator.addOne(-7), -6);
    expect(calculator.addOne(0), 1);
    expect(() => calculator.addOne(null), throwsNoSuchMethodError);
  });
}

O arquivo de testes é tão simples quanto o nosso arquivo inicial do pacote:

• import define o pacote de teste do Flutter e o nosso pacote a ser testado;
• test é a função que recebe uma descrição do que será testado, e a função de teste;
• É criada uma instância da classe do nosso pacote;
• Os testes são efetuados com a função expect.

Podemos rodar os testes facilmente e ver que está tudo funcionando 😌

flutter test

00:06 +1: All tests passed!

Implementando nosso pacote com TDD

Agora que já temos tudo preparado para ser quebrado é hora de desenvolver algo mais legal!

Nosso pacote tem a funcionalidade de retornar um texto de cumprimento dependendo do horário do dia. Uma funcionalidade simples, mas que vai permitir a exploração de alguns conceitos. Rumbora!

Nesse desenvolvimento vamos demontrar com poderíamos aplicar a metodologia TDD (Test-driven development, ou desenvolvimento orientado à à testes), ela consiste de algumas etapas baśicas:

1. Escreva os testes, escrever os testes que esperamos que funcionem no futuro. Vamos criar apenas uma classe básica do pacote para conseguir rodar os testes.

library greeting;
/// A Greeting functionality.
class Greeting {
  /// Returns a greeting.
  String greet({int hour}) => null;
}

E escrever os testes, repare que é bem fácil notar quais as regras esperamos:

• Bom dia/tarde/noite, de acordo com o horário informado;
• Caso não seja informado uma hora (temos esse poder graças aos parâmetros nomeados do Dart) esperamos que seja um texto de retorno (afinal o texto retornado depende do horário de execução do código);
• Caso o horário esteja fora dos limites normais de hora, emitimos uma Exception.

import 'package:flutter_test/flutter_test.dart';
import 'package:greeting/greeting.dart';

void main() {
  test('gets a greeting according to the time of day', () {
    final greeting = Greeting();

    expect(greeting.greet(hour: 8), 'Bom dia');
    expect(greeting.greet(hour: 14), 'Boa tarde');
    expect(greeting.greet(hour: 00), 'Boa noite');
    expect(greeting.greet().runtimeType, String);

    expect(() => greeting.greet(hour: -1), throwsException);
    expect(() => greeting.greet(hour: 900), throwsException);
  });
}

2. Rode todos os testes e veja se os novos testes falham, a intenção é que essas falhas orientem o desenvolvimento das funcionalidades que desejos.

flutter test

Além de ser ótimo checar se o que era para falhar está falhando mesmo 🤓

00:02 +0 -1: gets a greeting according to the time of day [E]
Expected: ‘Bom dia’
Actual: <null>
Which: not an <Instance of ‘String’>

package:test_api expect
package:flutter_test/src/widget_tester.dart 234:3 expect
greeting_test.dart 9:5 main.<fn>

00:02 +0 -1: Some tests failed.

3. Escreva o código principal, agora vamos implementar as funcionalidades que os testes estão reclamando.

library greeting;

/// A Greeting functionality.
class Greeting {
  /// Returns a greeting according to [hour].
  String greet({int hour}) {
    if (hour == null) hour = DateTime.now().hour;
    
    if (hour < 0 || hour > 23) throw Exception('Hour out of range');
    
    if (hour > 6&& hour < 12) {
      return 'Bom dia';
    } else if (hour > 12 && hour < 18) {
      return 'Boa tarde';
    }
    return 'Boa noite';
  }
}

4. Rode os testes novamente, eles nos dirão se conseguimos implementar os requisitos.

flutter test

00:01 +1: All tests passed!

Maravilha! Temos o nosso pacote pronto e testado

5. Refatore, melhore o seu código, um bom ponto de partida é analisar os Coding Conventions da linguagem em questão. No nosso caso temos o Effective Dart.

6. Repita, após essas etapas provavelmente você não tenha implementado todas as funcionalidades desejadas ou tenha abrangido apenas parte dos casos, esse processo é um ciclo.

Publicando nosso pacote

É recomendado que você altere alguns arquivos antes de publicar seu pacote:

• README.md;
• CHANGELOG.md;
• LICENSE;
• Documentação da API pública, essa é gerada automaticamente quando publicamos o pacote.

Para facilitar, deixei o projeto público no GitHub, assim é possível verificar todos os arquivos.

Antes de rodar o comando mágico para publicar temos que criar um verified publisher, então podemos checar se está tudo certo:

flutter pub publish --dry-run

E publicar nosso pacote:

flutter pub publish

Muito bem! aqui estão os links referentes ao projeto:

• Repositório no GitHub:
• Pacote publicado no pub.dev

Agora vocês podem se aventurar e desenvolver seus próprios pacotes! Ou implementar mudanças nos projetos open-source, como o meu 😄

Aventure-se!

Gostou do conteúdo?

Siga a Luna no Medium, qualquer dúvida ou sugestão é só deixar nos comentários! E não se esqueça de deixar alguns aplausos 👏🏽