Aplicativo de Gestão Financeira com Flutter — Parte 2

Conheça informações básicas sobre criação de projetos em Flutter.

Kaio C. de Oliveira
Code Review

--

No artigo anterior, falamos sobre a apresentação do projeto de desenvolvimento de um aplicativo de gestão financeira. Hoje falaremos das bases de contrução de um novo projeto em Flutter.

Um dos principais assuntos quando falamos em aplicativos construídos em Flutter é justamente o da criação de um novo projeto. A documentação oficial orienta como esse processo pode ser feito via interface gráfica de um editor de código, IDE e também pelo terminal.

O comando que mais usamos na criação de novos projetos via terminal é o create:

flutter create counter

Precisamos informar o nome do diretório que irá receber os arquivos internos do meu projeto que nesse caso se chamará counter. Ao criar um novo projeto, temos acesso a uma estrutura de arquivos e pastas necessários para a execução do nosso primeiro app construído em Flutter que por padrão é um contador com base em toques de botão flutuante na tela.

counter // raiz do projeto
├── android // arquivos de compilação para Android
├── ios // arquivos de compilação para iOS
├── lib // arquivos principais do nosso projeto
├── linux // arquivos de compilação para Linux
├── macos // arquivos de compilação para macOS
├── test // arquivos de testes
├── web // arquivos de compilação para web
├── windows // arquivos de compilação para Windows
.gitignore //arquivos e pastas ignorados pelo git
pubspec.lock // arquivo gerado a partir do pubspec.yaml
pubspec.yaml // arquivo de informações e dependências do projeto

Dentro da pasta lib encontram-se os arquivos com extensão .dart fundamentais para a execução do nosso projeto, que serão usados como referência principal de compilação para diferentes plataformas.

Ao acessarmos ela, vemos um arquivo main.dart. Retirados os códigos não necessários para o entendimento dos conceitos que serão tratados aqui, temos o seguinte resultado:

1 — Considerando que temos um projeto construído sobre a linguagem Dart, faz sentido que o nosso programa comece pela função main().

2 — Dentro dela recebemos uma outra função chamada runApp() que recebe por parâmetro posicional e obrigatório um objeto do tipo Widget. Entendemos o conceito de Widget da seguinte forma:

Widgets são a hierarquia de classes central no framework Flutter. Um widget é uma descrição imutável de parte de uma interface de usuário.

3 — É importante compreender que objetos do tipo por si só não possuem estado próprio, exemplo disso é a classe MyApp que estende StatelessWidget. Ou seja, um widget sem estado.

4 — Cada classe que estende a classe StatelessWidget deve sobrescrever o método build() que por sua vez deve retornar um objeto do tipo Widget, fazendo com que o Flutter se estruture em uma Árvore de Widgets.

5 — Para adicionar estados aos nossos objetos do tipo Widget, é necessário associar esses objetos com outra classe responsável por isso, conhecida por StatefulWidget, como acontece com nossa classe MyHomePage.

6 — Ao fazer isso, também devemos aplicar o conceito de sobrescrita ao método createState() que deve retornar um objeto do tipo State.

7— Por consequência, é criada uma nova classe privada chamada _MyHomePageState que estende de State do tipo MyHomePage, vinculando-se à nossa classe do passo 6.

8 — Concluímos esse ciclo do app inicial com a sobrescrita do método build() da classe _MyHomePageState que por sua vez deve retornar um objeto do tipo Widget.

Com isso, nós conseguimos compreender de forma introdutória como o nosso aplicativo inicial está estruturado a partir de alguns princípios de Orientação a Objetos aplicados em Dart e embasados na documentação oficial do Flutter. É importante lembrar que assim como Dart é uma linguagem completamente orientada a objetos, Flutter é um framework completamente orientado a widgets.

Em Dart, tudo é objeto. Em Flutter, tudo é widget.

Inscreva-se no canal para receber novidades sobre Dart e Flutter: https://www.youtube.com/devkaio

No próximo artigo falaremos sobre a estrutura e organização inicial do nosso app.

Gostou do material? Considere me seguir aqui no Medium, Linkedin, Github e se inscrever no YouTube.

--

--

Flutter and Dart Developer. Falo sobre muitas coisas. Obrigado pela visita!