Flutter: praticando arquitetura e padrão MVC

Arquitetura ou padrão? - Apresentação

Boas-vindas ao curso de Flutter: praticando arquitetura e padrão MVC. Eu sou o Matheus Alberto e serei seu instrutor!

Audiodescrição: Matheus é um homem de pele clara, tem olhos castanhos, cabelos curtos, lisos e também castanhos. Usa camiseta na cor preta. Ao fundo, uma iluminação degradê do azul para o roxo. À esquerda, uma prateleira com uma planta e um quadro.

O que aprenderemos

Nesse curso desenvolveremos o aplicativo Meu Pequeno Grimório. Nele, poderemos cadastrar livros que lemos ou queremos ler.

Para isso, buscaremos um livro pela API do Google Books, depois adicionaremos no Grimório. Feito isso, poderemos adicionar comentários, data de início e final da leitura, além de editar e excluir essas informações.

No desenvolvimento desse projeto, teremos a participação de outras equipes. Sendo assim, precisaremos manter sempre uma comunicação ativa para discutirmos e escolhermos a melhor opção para ser desenvolvida no aplicativo.

Também teremos um papo com uma pessoa especialista. A partir dessa troca, descobriremos informações referentes a escalabilidade do projeto, trabalho em equipe e uso dos componentes que vão contribuir na tomada de decisão quando recebemos o projeto no Figma.

Aprenderemos como é a perspectiva de uma pessoa desenvolvedora que trabalha no meio do processo. Não criaremos tudo do zero, mas agregaremos tudo o que foi feito pelas equipes em um só projeto.

Trabalharemos com MVC, entenderemos o significado dessa sigla e o motivo pelo qual essa é a melhor opção para o projeto. Além disso, descobriremos como cada pessoa desenvolvedora conseguirá unir todo o desenvolvimento no aplicativo.

Pré-requisitos

Para fazer esse curso é importante que você tenha:

• Conhecimentos intermediários em Flutter;
• Formação inicial de Flutter;
• Formação de gerenciamento de estados.

Te esperamos no primeiro vídeo do curso.

Até lá!

Arquitetura ou padrão? - Preparando o ambiente

Antes de iniciar o desenvolvimento do projeto, é importante que você saiba que será dividido em duas partes. Sendo assim, será necessário baixar dois arquivos, um no começo e outro no meio do curso.

Não se preocupe, pois avisaremos o momento certo para isso!

Baixando Arquivos e Configurando Bibliotecas

Os arquivos que serão baixados contém todos os itens necessários para a continuação do curso. Porém, é importante que as bibliotecas já estejam preparadas para receber esses arquivos.

O primeiro requisito é ter o Flutter na versão 3.10 ou superior. Outro ponto importante são as bibliotecas. Mesmo que o próprio PubSpec já contenha todas as bibliotecas nas respectivas versões, você precisa confirmar se elas estão nas versões apresentadas neste curso.

Os pacotes são os seguintes:

• sqflight, na versão 2.2.8;
• flutter_svg, na versão 2.0.7;
• Pacote do http, na versão 1.1.0.

Após realizar o download e extrair o arquivo, confirme se todos foram baixados e se no pubspec.ymlas bibliotecas estão com as versões corretas.

Lembrando que essa mesma verificação deverá ser feita quando a segunda parte do projeto for baixada.

Após concluir essa etapa, podemos iniciar o curso.

Te esperamos no vídeo seguinte!

Arquitetura ou padrão? - Iniciando o projeto

Antes de iniciar o projeto, vamos entender nosso contexto de trabalho.

Contexto de trabalho

Estamos trabalhando em um grupo de pessoas desenvolvedoras e nossa tarefa é reproduzir o aplicativo chamado Meu Pequeno Grimório.

A partir desse aplicativo, poderemos coletar livros do Google Books, por meio de uma integração à API. Também poderemos encontrar livros que queremos ler ou que já lemos, além de salvá-los como favoritos.

Dessa forma, teremos uma coleção de livros favoritos que já lemos e que poderão ser exibidos no nosso aplicativo.

A equipe de design desenvolveu esse projeto, o Figma e nos enviou. Vamos analisá-lo!

Analisando o projeto no Figma

Ao abrir o Figma encontramos a Página Inicial Do Meu Pequeno Grimório. Nela, poderemos fazer o login e iniciar a navegação.

Depois disso, temos a Página Inicial pós-login, que pode estar vazia ou com algum conteúdo. Inicialmente ficará vazia.

É importante prestarmos atenção nesse fluxo de telas para descobrirmos o que precisa ser desenvolvido no aplicativo.

A tela seguinte se chama Adicionar, nela poderemos procurar pelos livros. Após escolher um, somos direcionados para a página Detalhes, em que podemos adicionar o livro no nosso grimório.

Depois, teremos um Formulário para adicionar informações como data de início e final da leitura, resenhas e comentários.

Na sequência do arquivo do Figma temos uma tela da Home ilustrando a Home do aplicativo quando já tiver livros cadastrados.

Também temos duas telas diferentes nas quais poderemos editar as informações referente ao início e conclusão da leitura e comentários. Por fim, há um formulário de edição das informações que conseguimos modificar.

Agora que já conhecemos todo o projeto, podemos começar a desenvolvê-lo.

Desenvolvendo a tela inicial

A tela inicial tem uma imagem de fundo em degradê que vai do roxo escuro para o roxo mais claro com estrelas espalhadas. No centro temos o logo, que possui o texto "Meu Pequeno Grimório" e o desenho de um livro de capa roxa com uma estrela e um marcador de página. Abaixo, encontramos o botão Começar.

Sabendo disso, abrimos o Visual Studio Code para começarmos a desenvolver a interface.

Na pasta "lib", criaremos um novo arquivo. Para isso, clicamos como botão direito e depois em "New File". Nomeamos de inicio.dart.

Esse arquivo será um Flutter stateless widget. Então, escrevemos fstless e apertamos "Enter". Feito isso, temos a seguinte estrutura de código:

class Inicio extends StatelessWidget {
const Inicio({ Key? key }): super(key: key);

    @override
    Widget build (BuildContext context) {
        return Container();
    }
}

Na primeira linha fazemos o import de ''package:flutter/material.dart.

Depois, na linha 6, apagamos o Container() e escrevemos Colum(). Nos parênteses, passamos children: <Widget>[].

Dentro das chaves, passaremos a imagem utilizando SvgPicture.asset(). Nos parênteses adicionamos aspas duplas e passamos o caminho da logo /assests/images/logo.svg.

Na linha abaixo, para adicionar o botão, escrevemos ElevatedButton(). Nos parênteses passamos onPressed: (){}, child: Text("Entrar").

import 'package:flutter/material.dart';
import 'package: flutter_svg/svg.dart';

class Inicio extends StatelessWidget { 
const Inicio({ Key? key }): super(key: key);

    @override
    Widget build (BuildContext context) {
        return Column(children: <Widget>[
            SvgPicture.asset("/assets/images/logo.svg"),
            ElevatedButton (onPressed: (){}, child: Text("Entrar"))
],); // <Widget>[] // Column
    }
}

Feito isso, salvamos o arquivo inicio.dart. Nada acontece nosso aplicativo, pois não especificamos qual seria a tela inicial.

main.dart

Então, no arquivo main.dart, na linha 15, apagamos o widget Container() e passamos Inicio(). Dessa forma:

import 'package:flutter/material.dart';

void main() {
  runApp(const Grimorio());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Grimório",
      theme: ThemeData.dark(useMaterial3: true),
      home: Container(),
    );
  }
}

Salvamos. Depois, para recarregar o aplicativo, clicamos no botão "Hot Restart" no topo direito da tela, identificado por uma seta circular.

Teremos que fazer uma pausa neste processo de desenvolvimento, pois precisamos responder algumas perguntas muito importantes para identificarmos problemas do nosso projeto.

Até o momento desenvolvemos de forma livre. Esse é um método comum em aplicações pequenas e que não possui integração de outras equipes.

Porém, nós temos uma equipe. Por isso, pensamos em algumas perguntas-chave que serão úteis para identificar se o projeto está fluindo de maneira coesa.

• O projeto está escalável? Ou seja, da forma que estamos escrevendo o código poderá ser expandido de forma fácil e orgânica?

• O código está sendo desenvolvido de forma com que toda a equipe possa dar continuidade e realizar a manutenção?

• Qual facilidade temos em identificar onde está o erro para que possa ser reparado?

• Vamos reutilizar os componentes visuais ou criaremos um para cada página?

• Qual será a lista de requisitos? O que precisa ser entregue nesse projeto?

Ao analisarmos o Figma, identificamos a interação da pessoa usuária com o projeto Meu Pequeno Grimório. A partir disso, também podemos anotar quais funcionalidades precisaremos desenvolver, criando uma lista de requisitos.

Sabendo disso, agora podemos chamar uma pessoa especialista para nos ajudar a iniciar o projeto de forma adequada.

Te esperamos no próximo vídeo!

Sobre o curso Flutter: praticando arquitetura e padrão MVC

O curso Flutter: praticando arquitetura e padrão MVC possui 115 minutos de vídeos, em um total de 47 atividades. Gostou? Conheça nossos outros cursos de Flutter em Mobile, ou leia nossos artigos de Mobile.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

• Arquitetura ou padrão?
• Camadas e MVC
• Lidando com Model
• Integrando a Model e criando um Controller
• Integrando o banco com a aplicação