jhoisz / Bytebank_Provider

Aplicação mobile em Flutter com gerenciamento de estados usando Provider ⚡

Bytebank: Utilizando gerenciamento de estados com Provider ⚡

ℹ️ Descrição

Aplicação mobile desenvolvida durante o curso Flutter: gerenciamento de estados com Provider de Flutter, na plataforma Alura, pela instrutora Juliana Negreiros.

⚡ Flutter Provider

O Provider é um gerenciador de estados usado no Flutter, que é responsável por observar um determinado objeto e avisar aos componentes interessados quando houver alguma alteração no mesmo, de forma que eles se atualizem da mudança.

🗄️ Single Source of Truth (SSoT)

O Provider utiliza o conceto de Single Source of Truth, ou Fonte Única de Verdade, que é um termo usado para definir o conceito de gestão de conteúdo a partir de uma única fonte ou ferramenta. A ideia de aplicação agora é utilizar uma única fonte de informações, chamada Store.

✅ Design Pattern: Singleton

Singleton é um design pattern que fornece um único ponto de acesso global para determinada instância de uma classe, garantindo também que só exista uma. O Provider aplica o Singleton para o gerenciamento de estado do projeto, tornando mais limpo e consistente.

🔽 Adicionando o Provider ao projeto

Para utilizar o Provider no Flutter basta instalar o pacote com o seguinte comando:

flutter pub add provider

⚙️ Configurando main.dart e classes com Provider

Podemos inserir no arquivo main.dart um ChangeNotiferProvider, que vai verificar se determinada classe teve alteração ou não, usando como exemplo a classe Saldo:

  ChangeNotifierProvider(
    create: (context) =>  Saldo(0),
    child: const BytebankApp(),
  ),

E se quisermos usar mais de um Provider? Daí podemos usar o MultiProvider, veja o exemplo utilizando as classes Saldo e Transferencias:

    MultiProvider(
      providers: [
        ChangeNotifierProvider(
          create: (context) => Saldo(0),
        ),
        ChangeNotifierProvider(
          create: (context) => Transferencias(),
        ),
      ],
      child: const BytebankApp(),
    ),

Nas classes que queremos usar o Provider é necessário realizar duas tarefas:

• 1: estender as classes de ChangeNotifier;
• 2: Usar a instrução notifyListeners() quando quisermos notificar que algo foi alterado.

Um exemplo do uso de notifyListeners() é na classe Saldo, no método adiciona():

void adiciona(double valor) {
  this.valor += valor;

  notifyListeners();
}

🪄 Exibindo e alterando os valores

Para exibir um valor de uma classe usando Provider, usamos o Consumer<A>, veja o exemplo abaixo utilizando Saldo:

Consumer<Saldo>(
  builder: (context, valor, child) {
    return Text(
      valor.toString(),
    );
  },
),

Já se quisermos alterar o valor de Saldo usando o método de adição e adicionando 10, por exemplo, usaríamos a seguinte instrução:

Provider.of<Saldo>(context, listen: false).adiciona(10);

E para apenas acessar a variável valor em Saldo:

Provider.of<Saldo>(context, listen: false).valor;

✨ Funcionalidades do projeto

A aplicação possui um Dashboard que possui o valor atual da conta, botões para receber depósito e realizar transferêndias, além das últimas duas transferências realizadas e a opções de ver todas as transferências.

🛠️ Tecnologias usadas

Neste projeto foram usadas as seguintes tecnologias:

Framework Flutter

Linguagem Dart

▶️ Como executar

Primeiro você deve instalar flutter.

Então, você pode clocar e entrar na pasta do projeto:

git clone https://github.com/jhoisz/Bytebank_Provider
cd Bytebank_Provider

Agora, para testar, você precisa instalar as dependências e, em seguida, pode usar um dispositivo conectado ao seu computador ou usar um emulador:

flutter pub get 
flutter run