Flutter: praticando orientação a pacotes

Fala, galera! Eu sou Ricarth Lima e te dou boas-vindas a mais um curso de Flutter! Neste curso, o tema será orientação a pacotes.

Audiodescrição: Ricarth se descreve como um homem de pele clara com um toque dourado, com cabelo castanho crespo, nariz e boca largos, e barba castanha espessa. Ele usa óculos de armação retangular escura, e durante todo o curso, usará uma camisa preta da Alura, sentado em frente a um fundo em degradê de rosa e roxo.

O que vamos aprender?

Nosso projeto será o conhecido Bytebank, e o desafio neste curso será modularizar tudo que está relacionado ao saldo para um pacote. Nesse ponto, entramos exatamente no motivo de usarmos um pacote e qual a importância do que aprenderemos ao longo das aulas.

Quando lidamos com empresas cada vez maiores e equipes mais numerosas, frequentemente precisamos dividir o trabalho, e não apenas entre back-end, front-end e mobile. Às vezes, ocorrem subdivisões dentro da própria equipe de mobile.

Imagine que a empresa Bytebank, no futuro, queira usar as funções de saldo para outro aplicativo que outra equipe desenvolverá. A melhor forma de fazermos essa modularização e compartilhamento é através do uso adequado de pacotes. Legal, não é?

Neste projeto, iremos modularizar todo o saldo para que o mesmo fique oculto e, ao clicar para exibi-lo, o sistema solicitará o PIN da conta da pessoa usuária.

Para fins de exemplo, colocaremos um PIN bem simples (1234), clicaremos em "Autenticar", e somente assim o saldo será exibido. Faremos isso de forma modularizada para todas as telas do Bytebank, permitindo que pessoas em outras aplicações também possam utilizá-lo.

Pré-requisitos

O pré-requisito para este curso é a formação de Flutter, principalmente os cursos de WebAPI e a formação de gerenciamento de estados.

Além disso, o projeto inicial estará disponível na atividade a seguir, então baixe o projeto para que, a partir dele, possamos construir nossas funcionalidades.

Nos encontramos no curso. Até lá!

Já conhecemos o projeto Bytebank e sabemos como ele está sendo construído. Que tal aprofundar nosso olhar sobre como ele está estruturado no código? Será muito importante entender como ele está organizado para conseguirmos atender as novas demandas da liderança.

Conhecendo o projeto

Iniciando pelo arquivo main.dart no Visual Studio Code, notamos que ele está bem distribuído e não contém muitas informações. Isso porque conseguimos realizar um bom trabalho de distribuição das informações e componentes necessários em arquivos e pastas bem-organizados.

Assim, em main.dart já conseguimos identificar que usamos rotas nomeadas que são distribuídas pelo arquivo bytebank_routes.dart.

/// código omitido
@override
Widget build(BuildContext context) {
initializeDateFormatting('pt_BR', '');
return MaterialApp(
debugShowCheckedModeBanner: false,
theme: getBytebankThemeData(),
initialRoute: BytebankRoutes.home,
routes: {
BytebankRoutes.home: (context) => const HomePage(),
BytebankRoutes.transfers: (context) => const TransfersPage(),
BytebankRoutes.statement: (context) => const StatementPage(),
},
);
}

Se clicarmos na linha 25 com a tecla "Ctrl" pressionada, por exemplo, notaremos que se trata de um arquivo de constantes que define nossas telas: a tela inicial (home), a tela de transferência (transfers) e a tela de extrato (statement).

class BytebankRoutes {
  static const String home = "home";
  static const String transfers = "transfers";
  static const String statement = "statement";
}

Para cada uma dessas funcionalidades, isto é, para cada uma das telas, na aba "EXPLORER" à direita, você vai notar que o diretório "lib" está dividido em pastas, cada uma representando uma funcionalidade ("home", "statement" e "transfers"), e as funcionalidades que são comuns a todas as outras estão na pasta "_core".

Vamos começar explorando a pasta "_core". Ao abri-la, notamos que temos as constantes que acabamos de usar (bytebank_colors.dart, bytebank_routes.dart, bytebank_screens.dart, e bytebank_transfers_types.dart), na pasta "constants".

Assim, temos constantes para a tela, para o tipo de transferência, para as rotas, e até mesmo para as cores que o Bytebank usa. É recomendável que você explore esse repositório com atenção, analisando essas constantes e toda a organização existente, pois isso será crucial para a construção das demandas futuras.

Além disso, temos o arquivo bytebank_theme_data.dart na subpasta "decorations", que foi definido em um arquivo separado e chamado na linha 22 do arquivo main.dart.

Há também a pasta "widgets" contendo os widgets core, ou seja, que aparecem em todas as telas, em todas as funcionalidades. A appbar_widget.dart aparece em todas as telas, bem como o drawer.widget.dart, que é o drawer personalizado.

Chegamos a modularizar também o espaçamento vertical (height_margin.dart), pois queremos que ele seja padronizado, caso aconteça. Então, nós o colocamos em um arquivo separado.

Agora, nas partes mais específicas, temos as telas "home", "statement" e "transfers". Se abrirmos qualquer uma delas, notaremos que todas seguem um padrão. Elas têm, pelo menos, as pastas "screens" e "widgets", e caso precisem de mais coisas, elas têm, por exemplo, as pastas "models" e "helpers". Todas seguirão esse padrão.

Na pasta "screens", teremos justamente o widget que compõe a tela e é chamado na rota. Já na pasta "widgets", temos os componentes que são próprios da tela. Assim, se acessarmos a pasta "widgets" da tela "home", encontraremos, por exemplo, o arquivo balance_widget.dart.

Estamos falando desse widget especificamente, pois, se voltarmos ao emulador, perceberemos que podemos exibir o saldo na tela inicial, mas não temos isso na tela de transferência ou na tela de extrato. A questão é que essa é uma demanda que recebemos. Nossa primeira tarefa é trazer a informação de saldo, que só existe na tela inicial, para as outras telas.

O ponto positivo é que esse widget já está modularizado dentro de "home". Precisaremos apenas ampliá-lo, mas ele já está modularizado e só precisamos reutilizá-lo em outras telas.

Agora vamos abrir a tela de HomePage (home_page.dart), na pasta "screens".

import 'package:flutter/material.dart';
import 'package:flutter_bytebank/_core/constants/bytebank_screens.dart';
import 'package:flutter_bytebank/_core/widgets/appbar_widget.dart';
import 'package:flutter_bytebank/_core/widgets/drawer_widget.dart';
import 'package:flutter_bytebank/home/widgets/balance_widget.dart';
import 'package:flutter_bytebank/home/widgets/home_background_widget.dart';
import 'package:flutter_bytebank/home/widgets/home_title_widget.dart';


class HomePage extends StatelessWidget {
const HomePage({super.key});


@override
Widget build(BuildContext context) {
return Scaffold(
appBar: getAppBarWidget(),
drawer: getDrawerWidget(
context: context,
screen: BytebankScreens.home,
),
body: const HomeBackgroundWidget(
children: [
HomeTitleWidget(),
BalanceWidget(),
],
),
);
}
}

A tela é bastante simples, com apenas com 28 linhas de código, porque tudo está muito bem modularizado. Se percebermos, na linha 15, chamamos a appBar por meio do componente que encontramos na pasta "_core".

Da mesma forma, na linha 16, temos o drawer, que também provém de um componente que modularizamos na pasta "_core". O destaque vai para trecho de body. O body usa um widget chamado HomeBackgroundWidget e seguimos esse padrão para todas as outras telas.

Esse widget é responsável por fornecer uma ampla margem em branco e criar um contêiner de uma cor específica, neste caso, verde. Ele traz também os elementos de decoração, como os pixels no plano de fundo e a ilustração de fato, além de definir como o espaçamento será distribuído.

Por isso, fornecemos a possibilidade de inserir o HomeTitleWidget, que é justamente o título e o BalanceWidget, também dentro de um widget personalizado que criamos. Assim, os padrões são mantidos, independentemente de qual widget for adicionado.

Conclusão

Como mencionado anteriormente, o objetivo deste vídeo era explicar como o código está funcionando, mas é altamente recomendável que você, por exemplo, acesse o HomeBackgroundWidget (arquivo home_background_widget.dart) e estude detalhadamente como ele consegue exibir a tela dessa maneira.

Agora que conseguimos homogeneizar a compreensão de como estruturamos os arquivos e pastas na aplicação do Bytebank, chegou a hora de cumprir a tarefa que nos foi solicitada: inserir o saldo nas outras telas.

Faremos isso na sequência. Nos encontramos lá!

Agora que já entendemos como funciona a estrutura de arquivos e pastas do projeto Bytebank, chegou a hora de cumprir nossa demanda, que é justamente exibir o saldo nas outras telas, ou seja, na tela de transferência e na tela de extratos. Vamos nessa?

Implementando a demanda do saldo

Nós sabemos que o saldo está modularizado em um widget chamado BalanceWidget. Na HomePage (home_page.dart), utilizando o Visual Studio Code, ele está localizado na linha 23.

homepage.dart:

body: const HomeBackgroundWidget(
  children: [
    HomeTitleWidget(),
    BalanceWidget(),
  ],
),

Se pressionarmos "Ctrl" e clicarmos sobre BalanceWidget, será aberto o arquivo balance_widget.dart, onde podemos observar alguns detalhes.

Por exemplo: na linha 14, encontramos o texto "Saldo"; há também um separador (Divider()) na linha 24; o texto "Conta Corrente" na linha 27; e por fim, na linha 33, temos o texto que exibe o saldo. Por enquanto, usamos um saldo fictício definido diretamente no texto, afinal, ainda não temos nenhuma conexão com o back-end.

Mas qual é a melhor forma de modularizar e reutilizar esse widget em outras telas?

Para isso, devemos prestar atenção no explorador de arquivos à direita. Notaremos que o widget BalanceWidget está dentro da pasta "home > widgets". Isso indica na arquitetura que esse widget é usado apenas pelas funcionalidades de Home, mas isso não é mais verdadeiro.

Nós queremos usar esse mesmo widget em todas as telas que temos até agora. Para que as outras telas tenham acesso a ele usando a estrutura de pastas que definimos, vamos transportá-lo para a pasta "_core".

Abrindo essa pasta, veremos que ela contém uma subpasta "widgets". Então, basta arrastar o arquivo balance_widget.dart da pasta "widgets" de "home" para a pasta "widgets" de "_core".

Ao fazer isso, o VS Code pergunta se realmente queremos mover o arquivo. Após responder que sim ("Move"), ele traz a seguinte informação: o Dart deseja refatorar alguns arquivos para que essa mudança de pastas não cause erros, permitindo que tudo continue funcionando da mesma forma. Vamos concordar com isso clicando em "OK".

Com a permissão, notamos na aba superior que dois arquivos foram alterados: o balance_widget.dart e o home_page.dart. Vamos confirmar as alterações clicando para salvar com o atalho "Ctrl + S" em ambos.

No caso do instrutor, houve um pequeno erro, pois estava sendo executada a aplicação, mas basta solicitar ao controlador para reiniciar a aplicação que tudo funcionará como esperado.

Feito isso, podemos fechar o arquivo framework.dart aberto com erro, e constatar no emulador que tudo funciona como esperado.

Adicionando o BalanceWidget à tela StatementPage

Agora vamos incluir o BalanceWidget nas outras telas.

Nesse momento, vamos identificar se a modularização e as estruturas que criamos valeram a pena, ou seja, se conseguiremos fazer isso de forma rápida e direta.

Sabendo que chamávamos esse widget na HomePage da funcionalidade "home", e desejamos adicioná-la, por exemplo, à tela de extrato, basta acessar a pasta "statement", procurar por uma pasta chamada "screens", e abrir o arquivo statement_page.dart.

O código dessa tela segue um padrão bastante semelhante à tela de HomePage. Ela é basicamente um Scaffold que importa a appBar e o drawer, e como corpo (body), tem o StatementBackgroundWidget, que faz configurações como cor de tela, decoração, imagem, borda e assim por diante.

Dessa forma, dentro de children, tudo que precisamos fazer é, na linha 40, adicionar uma nova constante chamada BalanceWidget. A importação será feita automaticamente.

statement_page.dart:

children: [
  const StatementTitleWidget(),
  const BalanceWidget(),
  const HeightMargin(MarginType.large),
  StatementTransfersListWidget(listTransfers: listTransfers),
],

Lembre-se de adicionar uma vírgula após BalanceWidget() para evitar erros.

Como estamos seguindo um padrão de espaçamento, vamos copiar a linha 43, que contém um widget de espaçamento, e colaremos na linha 42, para separar o título do saldo.

children: [
  const StatementTitleWidget(),
  const HeightMargin(MarginType.large),
  const BalanceWidget(color: BytebankColors.black),
  const HeightMargin(MarginType.large),
  StatementTransfersListWidget(listTransfers: listTransfers),
],

Feito isso, vamos salvar e verificar como está sendo exibido no nosso extrato. Ao acessar o drawer e clicar em "Extrato", notamos algo interessante no emulador.

Na realidade, o widget está presente, porém, como está em branco, não é possível visualizar. Faremos a mesma alteração nas transferências e, posteriormente, resolveremos a questão da cor.

Adicionando o BalanceWidget à tela TransfersPage

A implementação para a página de transferências será bem simples e igual ao que fizemos anteriormente. Então, podemos copiar as linhas 42 e 43 que adicionamos a statement_page.dart e, após fechar essa aba, vamos abrir o explorador no canto superior direito.

Em seguida, clicaremos no símbolo que representa dois quadrados com um sinal de menos (-), localizado próximo ao ícone do explorador. Isso fará com que todas as pastas sejam colapsadas, facilitando a organização. Depois disso, podemos ir diretamente em "lib > transfers". Em seguida, vamos até a pasta "screens" e abriremos o arquivo transfers_page.dart.

Com o arquivo aberto, percebemos que sua complexidade é um pouco maior devido à quantidade de elementos presentes. No entanto, ela segue o mesmo padrão das demais, importando a appBar e o drawer, e o corpo da página é um TransferBackgroundWidget que realiza toda a configuração.

Logo após o TransferTitleWidget, na linha 37, vamos colar o trecho copiado.

transfers_page.dart:

children: [
  const TransferTitleWidget(),
  const HeightMargin(MarginType.large),
  const BalanceWidget(color: BytebankColors.black),
  const HeightMargin(MarginType.large),

Aparecerá um erro em BalanceWidget, pois ainda não realizamos a importação. Clicando no ícone de lâmpada, podemos pedir para o VS Code importar. Após a importação, salvaremos as alterações.

Ajustando a cor de BalanceWidget

Agora, na página de transferência, ocorre a mesma situação anterior, referente à cor.

Para resolver a situação, basta definir a cor que desejamos passar para esses componentes, em vez de ter uma cor fixa, que é o branco.

No arquivo balance_widget.dart, em StatelessWidget na linha 5, podemos solicitar uma cor. Então, na linha 6, vamos implementar um final do tipo Color chamado color.

Feito isso, precisamos passar color no construtor. Para isso, na linha 7, faremos um required this.color. Com isso, já receberemos a cor.

balance_widget.dart:

class BalanceWidget extends StatelessWidget {
  final Color color;
  const BalanceWidget({super.key, required this.color});

Agora, todas as linhas onde usávamos BytebankColors.white, simplesmente substituiremos por color. Então, vamos acrescentar color na linha 19, por exemplo.

Text(
  "Saldo",
  style: TextStyle(
    fontSize: 20,
    color: color,
    fontWeight: FontWeight.w600,
  ),
),

Ao fazer isso, precisaremos de outra alteração, pois Column ainda é uma constante (const) e não pode mais ser, já que a cor pode variar a depender do parâmetro. Portanto, lembre-se de remover o const da linha 11 para corrigir o erro.

return Column(

Acrescentaremos color também na linha 25. Além disso, iremos acrescentar o const no padding da linha 24.

Padding(
  padding: const EdgeInsets.symmetric(vertical: 8.0),
  child: Divider(color: color, thickness: 2),
),

Não se preocupe com o aviso de erro nesse momento, pois, como vamos inserir cores variáveis em todos os componentes, o warning será removido, afinal, eles não serão mais constantes.

Faremos o mesmo na linha 30, substituindo o TextStyle do texto "Conta Corrente" por color.

Text(
  "Conta Corrente",
  style: TextStyle(
    color: color,
    fontSize: 16,
  ),
),

Por fim, substituimos por color no TextStyle do texto que indica o saldo, na linha 37.

Text(
  "R\$ 2.500,00",
  style: TextStyle(
    color: color,
    fontSize: 32,
  ),
),

No momento, em nossas telas, não definimos nenhuma cor. Vamos corrigir isso rapidamente. Para finalizar, fecharemos o BalanceWidget, e primeiramente em TransfersPage, notamos que o fundo é branco, então, o preto é uma boa escolha.

Com isso em mente, entre os parênteses de BalanceWidget() na linha 40, vamos inserir o argumento color e passar para ele o valor BytebankColors.black.

transfers_page.dart:

children: [
  const TransferTitleWidget(),
  const HeightMargin(MarginType.large),
  const BalanceWidget(color: BytebankColors.black),
  const HeightMargin(MarginType.large),

Já para HomePage, vamos definir a cor branca, pois o fundo é verde. Então, na linha 23, adicionaremos o argumento color passando o valor BytebankColors.white.

home_page.dart:

children: [
  HomeTitleWidget(),
  BalanceWidget(color: BytebankColors.white),
],

Ainda haverá um erro na tela de extrato (StatementPage), então vamos abrir o arquivo statement_page.dart e adicionar o argumento color: BytebankColors.black na linha 43, pois o fundo é cinza.

statement_page.dart:

children: [
  const StatementTitleWidget(),
  const HeightMargin(MarginType.large),
  const BalanceWidget(color: BytebankColors.black),
  const HeightMargin(MarginType.large),
  StatementTransfersListWidget(listTransfers: listTransfers),
],

Conclusão

Agora, ao verificar o emulador, o saldo aparece na tela de transação, por exemplo, com as cores em tons mais escuros, em preto. Desse modo, conseguimos visualizar muito bem, com um contraste interessante. O mesmo ocorre na tela de extrato e, como sempre, a página inicial continua inalterada.

Incrível, não é? Atendemos à nossa primeira demanda! Na próxima etapa, teremos uma reunião com todo o time do Bytebank. Vamos lá?