Conhecendo pacotes no Flutter

Quando vamos trabalhar no desenvolvimento de qualquer aplicação, seja ela front-end, mobile ou back-end, é comum sentirmos falta de algumas funcionalidades na linguagem.

Seja uma ferramenta para gerar estrutura de modelos, animações ou componentes visuais.

Para incrementar nossos projetos, podemos utilizar o que chamamos de pacotes!

E neste artigo, vamos explorar o que são pacotes no geral, como podem ser adicionados dentro de um projeto Flutter e também quais são as melhores práticas a serem seguidas.

Vamos lá?

O que são pacotes?

Pacotes ou bibliotecas (dentro do Flutter também podem ser chamadas de dependências ou dependencies) são ferramentas que ajudam o processo de desenvolvimento.

Alguns exemplos muito famosos de pacotes são http e dio, que auxiliam o processo de fazer requisições para APIs externas.

Um exemplo que podemos utilizar é a do pacote http:

import 'package:vidflow/utils/api_endpoints.dart';
import 'package:http/http.dart' as http;

class RegisterController {

  final TextEditingController textUserController = TextEditingController();
  final TextEditingController textEmailController = TextEditingController();
  final TextEditingController textPasswordController = TextEditingController();

  Future<void> register() async {
    try {
      Map<String, String> headers = {"Content-Type": "application/json"};
      Uri uri = Uri.parse(ApiEndpoints.baseUrl + ApiEndpoints.register);
      Map<String, String> body = {
        "user": textUserController.text,
        "email": textEmailController.text,
        "password": textPasswordController.text
      };
      http.Response response = await http.post(uri, headers: headers, body: jsonEncode(body));
      if(response.statusCode == 201) {
        final json = jsonDecode(response.body);
        print(json);
      } else {
        throw jsonDecode(response.body);
      }
    } catch (e) {
      print(e);
    }
  }
}

Nesse exemplo usamos o pacote http para fazer uma requisição do tipo POST para uma API externa, enviando no corpo da requisição o nome de usuário, email de cadastro e senha.

Por mais que fazer requisições http sejam super importantes em uma aplicação, o pacote não vem por padrão dentro do Flutter. Então ele precisa ser adicionado na lista de dependências da aplicação.

Existem vários outros pacotes no flutter que você pode pesquisar. Contudo, o processo para todos eles é praticamente o mesmo.

Como adicionar um pacote?

Entendemos a importância do pacote http dentro das nossas aplicações, mas como podemos incluir esse pacote dentro do nosso projeto?

Temos duas formas de instalar pacotes dentro da nossa aplicação: a primeira forma é utilizando o comando flutter pub add dentro do terminal., e a segunda é editando o arquivo pubspec.yaml. Vamos entender cada uma delas.

Para utilizar o comando flutter pub add, caso você esteja utilizando alguma IDE ou editor de código como Visual Studio Code, você pode abrir um novo terminal e depois rodar o comando flutter pub add http.

É muito importante que para rodar o comando no terminal, você esteja na raiz do projeto. Se você tentar rodar esse comando e no seu terminal você estiver dentro de outro diretório (pasta) que não a raiz do projeto, o comando pode gerar erros ou simplesmente não funcionar.

Nós também podemos dizer a versão específica do pacote que nós queremos. Por exemplo, caso queremos utilizar a versão ^1.2.1 do pacote http, podemos rodar o seguinte comando:

flutter pub add http:^1.2.1

A outra forma que podemos instalar pacotes dentro do projeto é editando o arquivo pubspec.yaml. Veja o exemplo a seguir:

dependencies:
  flutter:
    sdk: flutter

  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^1.0.2
  http: ^1.2.1

dev_dependencies:
  flutter_test:
    sdk: flutter

  # The "flutter_lints" package below contains a set of recommended lints to
  # encourage good coding practices. The lint set provided by the package is
  # activated in the `analysis_options.yaml` file located at the root of your
  # package. See that file for information about deactivating specific lint
  # rules and activating additional ones.
  flutter_lints: ^2.0.0

Depois de adicionar o pacote http dentro do arquivo, precisamos pedir para o Flutter atualizar a lista de dependências.

O próprio editor ou IDE costuma fazer esse processo automaticamente assim que o arquivo é salvo.

Mas você também pode fazer esse processo manualmente rodando o comando flutter pub get no seu terminal.

Dev Dependencies e Dependencies

Você deve ter notado no processo de adicionar um pacote pelo arquivo pubspec.yaml que temos duas opções de dependencies: uma dev e outra sem ser dev.

Dev dependencies

Dependências do tipo dev são dependências que a pessoa desenvolvedora precisa durante o processo de desenvolvimento da aplicação.

Um exemplo que já vem adicionado por padrão quando criamos um aplicativo Flutter é o pacote flutter_lints.

Esse pacote serve para fazer validação do código Dart enquanto desenvolvemos. Outro exemplo muito famoso também é o pacote build_runner, que serve para gerar arquivos Dart.

Esses pacotes são importantes apenas para pessoas desenvolvedoras e não para a aplicação em si.

Dependencies

Dependências não dev como a http são dependências importantes para o funcionamento da aplicação.

Sem esse pacote, não conseguimos fazer as requisições para a API e consequentemente não pegamos informações importantes para popular a aplicação.

Onde buscar pacotes?

Até o momento falei de pacotes, a importância, como instalar e as diferenças entre dependências normais e de desenvolvimento, mas não falei onde encontrar pacotes, não é mesmo?

Bom, a melhor forma e a mais recomendada de buscar por pacotes é utilizando o site pub.dev.

Esse site é o repositório oficial do Flutter para gerenciar pacotes.

Quando instalamos uma dependência usando o comando flutter pub add, o que estamos fazendo é buscar um pacote do repositório do Pub.dev.

Já para pessoas desenvolvedoras front-end, seria a mesma coisa que utilizar o comando npm install para instalar dependências JavaScript do npmjs.

No Pub.dev, existe uma barra de busca onde você pode procurar por uma feature ou ferramenta.

Vamos considerar o exemplo de pesquisa procurando pelo pacote http. Fazendo a busca encontramos vários resultados, mas como saber qual é o pacote correto?

No caso do http, o resultado pode ser óbvio, pois é um pacote super conhecido e usado no mercado.

Mas você pode confirmar a procedência do pacote através de alguns critérios:

• Quantidade de likes;
• Pontos PUB;
• Popularidade;
• Desenvolvedor;
• Descrição.

Um pacote com grande quantidade de likes, pontuação alta (140 é a pontuação máxima), popularidade alta, de um desenvolvedor conhecido (no caso do http é a equipe Dart) e com a descrição do que estamos buscando é um grande sinal de que é o pacote que queremos/podemos utilizar.

Clicando no pacote, nós temos informações mais completas sobre o que é a ferramenta e os problemas que ela resolve, além de informações de como instalar, exemplos de código/implementação e versões.

Cuidados e boas práticas

Os pacotes são ferramentas muito úteis para o desenvolvimento de um aplicativo Flutter, mas precisamos tomar alguns cuidados para que as coisas não saiam do controle. Alguns pontos importantes que precisamos ter cautela:

O pacote deve, se possível, resolver apenas um problema

Este ponto é bem delicado e acaba envolvendo conhecimentos de arquitetura. Pacotes que fazem tudo são uma armadilha, pois você acaba gerando uma dependência muito grande.

Vamos supor que você encontrou um pacote que cuida de gerenciamento de estado, faz requisições para APIs, tem banco de dados, cria animações e ainda faz navegação.

A dependência é maravilhosa e resolve todos os seus problemas ao mesmo tempo. Agora imagine que o pacote parou de ser atualizado e quebrou sua aplicação. Olha quantas features você vai precisar reescrever por conta de uma biblioteca.

Cuidado com pacotes excessivamente grandes

Precisamos tomar cuidado com pacotes com muitas linhas de código desnecessárias.

Às vezes algumas bibliotecas ocupam mais espaço do que a nossa aplicação ou tem muito mais features do que precisamos.

É importante ver o quanto a biblioteca vai impactar negativamente a performance.

Evitar pacotes com muitas dependências

Aqui temos também um pouco do que falei no tópico anterior. Alguns pacotes dependem de outros para funcionar corretamente.

E esses pacotes podem depender de outros e assim por diante. Então você queria implementar apenas uma dependência e pode ter acabado com mais 7 de brinde.

Cuidado com pacotes que não são atualizados com frequência

Temos semelhanças do que foi falado no primeiro tópico. Se o pacote não acompanha as mudanças do Flutter, não corrige bugs com frequência ou não otimiza suas features, é um sinal para ficar longe dele.

Alguns pacotes como http ou dio tem uma taxa de atualização relativamente baixa porque protocolos de requisições http não mudam com frequência. Grande parte das atualizações são para acompanhar mudanças dentro do Flutter.

Baixa reputação ou pacotes desconhecidos

É importante sempre checar a procedência do pacote. Evite correr o risco de instalar uma dependência com problemas de segurança, instabilidade ou baixa performance.

Se não existe um pacote que resolve o seu problema, é porque ou você precisa de uma ferramenta personalizada ou porque já existe uma forma de resolver com outros pacotes (às vezes até com o que o Flutter já disponibiliza para nós) ou porque não existe solução.

Conclusão

Como mencionamos, os pacotes são ferramentas muito importantes para o desenvolvimento de aplicações Flutter.

Eles devem ser implementados sempre de forma moderada e segura, garantindo uma melhor experiência de usuário e de desenvolvimento. Siga as dicas deste artigo e crie aplicações maravilhosas.

Se quiser conhecer e aprender mais sobre Flutter, confira as nossas formações:

• Desenvolva seu primeiro app com Flutter
• Flutter ainda mais atraente com animações
• Gerenciamento de estados com Flutter
• Utilize os serviços do Firebase com Flutter
• Flutter: desvendando arquiteturas

Bons estudos!