Skip to content

Latest commit

 

History

History
102 lines (75 loc) · 6.92 KB

DojoFlutter.md

File metadata and controls

102 lines (75 loc) · 6.92 KB
Raw

Dojo de Flutter

Data Versão Descrição Autor(es)
06/10/2020 0.1 Criação dos Diagramas iniciais da estrutura do front Iuri Severo e João Guedes
08/10/2020 0.2 Cronograma do Dojo Iuri Severo e João Guedes
08/10/2020 0.3 Detalhamento do Dojo Iuri Severo e João Guedes
08/10/2020 0.4 Adição dos tópicos Stateless e Stateful Widgets e Arquivo de Constantes Iuri Severo e João Guedes
08/10/2020 0.5 Adição das árvores de login e registro Iuri Severo e João Guedes
20/10/2020 0.6 Adição do texto de aplicação do dojo Iuri Severo
21/10/2020 0.7 Adição dos vídeos relacionados a aplicação do dojo João Pedro Guedes

Cronograma de Conteúdos

  • O que é Flutter?
  • A estrutura de Flutter;
  • O que são widgtes?
    • Scaffold;
    • Container;
    • Row;
    • Column;
    • Image.
  • Pubspec.yaml pra que serve?
    • Utilizar para pegar os ícones;
    • Importar alguma imagem na prática;
  • Statefull e Stateless;
    • Componentização;
      • Orientação a objetos;
  • Fazendo outras telas;
  • Navegação entre telas;
    • Navigator;
    • Routes;
  • Arquivo de constantes.

Conteúdos

O que é Flutter?

"Flutter is Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase."

Flutter é um conjunto de ferramentas que facilitam o desenvolvimento de interfaces de tamanhos variados e para todos tipos de aparelho. De modo simplificado, o Flutter "pede" para o aparelho uma tela em branco e adiciona widgets pré-montados nela, o que faz funcionar para Android e IOs, independente do tamanho da tela.

A estrutura do Flutter

Tudo dentro de um aplicativo em Flutter é considerado um widget, é durante a criação das telas o programador constrói blocos de widgets, adicionando-os um acima do outro, como lego. No fim, o desenvolvedor constrói uma árvore de widgets, como a do exemplo abaixo:

Splash Screen Tree

O que são widgets?

"Widgets describe what their view should look like given their current configuration and state. When a widget’s state changes, the widget rebuilds its description, which the framework diffs against the previous description in order to determine the minimal changes needed in the underlying render tree to transition from one state to the next."

Basicamente, Widgets são estruturas que se constroem a partir de um estado descrito pela aplicação. Quando esse estado muda, a estrutura se reconstroe para ficar de acordo com o estado atual. Alguns widgets básicos são:

  • Scaffold;
  • Container;
  • Row;
  • Column;
  • Image.

Pubspec.yaml pra que serve?

É um arquivo que guarda o metadata dos pacotes utilizados pela aplicação, assim como suas dependências. Nele é possível realizar diversas alterações, como o nome do aplicativo, seu ícone e a adição de Assets.

Stateful e Stateless

Em flutter podemos separar os widgets em widgets que podem mudar de estado(Stateful) e widgets que não mudam de estado(Stateless).

Um widget stateless é um widget estático, que vai sempre continuar do mesmo jeito independente da interação que o usuário faz, um exemplo disso pode ser um texto que aparece na tela.

Dizer que um widget é stateful significa que ele tem a capacidade de mudar de estado a partir de alguma interação externa, como um clique em um botão etc, ou seja a principal característica de um widget stateful é ele ser dinâmico.

As mudanças de estado ocorridas em um stateful widget são causadas a partir da utilização da função setState() que pode ser utilizada , por exemplo, para uma aplicação de uma calculadora, onde a pessoa vai clicando nos números e operações e os mesmos vão aparecendo na tela de forma que quase instantânea.

Mais informações sobre em: https://flutter.dev/docs/development/ui/interactive

Fazendo outras telas

Nesse dojo serão elaboradas duas telas, a de Login e a de Registro. Elas seguirão as árvores abaixo:

Login Screen Tree



Register Screen Tree

Navegação entre telas

A navegação entre telas do Flutter é feita a partir de um widget que gerencia widgets "filhos" em um comportamento de pilha. Esse widget é o Navigator, enquanto seus "filhos" são as Rotas.

Mais informações sobre o sistema de navegação do Flutter estão disponível em https://flutter.dev/docs/development/ui/navigation/

Arquivo de constantes

Para facilitar a utilização de alguns estilizações que ocorrem em várias partes do aplicativo e evitar repetição de código o grupo viu a necessidade de ter um arquivo onde guardarão todas essas constantes de estilo para quando forem utilizar simplesmente importarem.

A ideia deste arquivo foi tirada do curso The Complete 2020 Flutter Development Bootcamp with Dart da Dr. Angela Yu.

Aplicação

A primeira parte do dojo de Flutter aconteceu no dia 10 de outubro, porém, como havia muito conteúdo, não foi possível finalizá-lo durante a reunião. Por conta disso, foi feito um vídeo com a explicação dos conteúdos restantes.

O vídeo de ambas as partes podem ser acessados abaixo:

Referências