V. 2.3.0 - Março 2023 - por Jacob Moura e Tauã Mendonça
[Ocultar o conteúdo]
O roadmap, nascido no início de 2022, é uma trilha orientativa com o objetivo de sugerir um caminho para os iniciantes em Dart e Flutter a partir do conhecimento da comunidade de conteúdos gratuitos disponíveis na internet.
É necessário observar que somente utilizar o Roadmap NÃO substitui a documentação do Dart ou do Flutter e é complementar a ela e a cursos, sejam gratuitos ou pagos.
O intuito é somente guiar os novos (e as vezes até antigos) devs que queiram aprender o framework Flutter a linguagem Dart.
A Flutterando ser um caminho comprovado, que forma e já formou profissionais da área com grande sucesso.
[Ver o conteúdo]
Esteja você começando agora ou tendo já um mínimo de conhecimento sobre o que é programação, ainda assim é importante trabalhar seus conhecimentos básicos.
Recomendamos primeiramente assistir o vídeo abaixo antes de iniciar, especialmente se você é uma pessoa novata na programação em geral.
[Ver o conteúdo]
A IDE é onde você irá fazer seus códigos. Para entender um pouco mais sobre o que é uma IDE dê uma olhada neste artigo da Codeesh.
Algumas IDEs online podem te ajudar a começar seus estudos sem necessitar instalar as ferramentas necessárias para desenvolver na sua máquina. São elas:
Dartpad
Recomendamos começar com a IDE online [Dartpad](https://www.dartpad.dev), por ser acessível em quase qualquer navegador e ter toda a capacidade necessária para seu início de estudos. Ela é capaz de trabalhar com Dart E com Flutter, embora algumas bibliotecas (códigos externos) não estejam disponíveis para uso.Zapp.run
Outra IDE online útil no início e depois é o [Zapp.run](https://zapp.run), similar a uma mistura do Dartpad com o Visual Studio Code, e capaz de emular seus projetos Flutter. No entanto, perceba que ele é melhor utilizado com uma boa conexão à internet e tem algumas limitações se comparados a uma IDE mais completa como o Visual Studio Code.Para trabalhar no dia a dia com desenvolvimento geral (Android, Web, Linux, Windows, embarcados - Arm, etc) recomendamos o Visual Studio Code - por ser mais leve e ter diversos recursos extras que podem auxiliar no desenvolvimento, além de ter grande liberdade para personalização.
No entanto, para trabalhar com Macs e Iphones você deverá utilizar o XCode e um Mac para nas últimas etapas do desenvolvimento do seu app. Entenda que isso é uma necessidade de hardware, mas o código em si não sofre muitas alterações, e é possível aprender a base e preparar o código utilizando somente um computador com outra plataforma (seja Windows ou Linux).
0) Instale o Git
1) Instale o Dart
1.1) Coloque o diretório do dart nas variáveis de ambiente
2) Instale o Android Studio
2.1) Use o Android Studio para instalar o android sdk e android cli
2.2 A) (Opcional) instale o Java SDK separadamente (as instalações mais recentes do Android Studio já vem com o Java SDK junto)
2.2 B) (Não opcional) Coloque o JAVA_HOME nas suas variáveis de ambiente
3) Instale o Flutter
3.1) Coloque o diretório do Flutter em suas variáveis de ambiente
4) Instale o VSCode
4.1) Instale as extensões Flutter e Dart da Google para o VSCode
5) (Opcional) Instale as Ferramentas de Build para Visual Studio (não confundir com o próprio Visual Studio ou com o VSCode) para trabalhar com Windows
(Opcional) Utilize o Android Studio para emulação, instale um dispositivo emulado através do assistente dele
(Opcional) Instale a extensão Material Icons Theme, para melhor visualizar suas pastas e dê uma olhada nas seguintes extensões: GitLens e ErrorLens, especialmente esta última pois aponta a linha onde está ocorrendo o erro de código.
Precisamos entender como criar algorítmos, por tanto, antes de realmente colocar a mão no código, é importante estudar um pouco sobre Lógica de programação.
Nessa etapa não é necessário saber nenhuma linguagem.
O Flutter usa o Dart de forma declarativa. Isso significa que o desenvolvedor usa linguagem de programação para desenhar telas em vez de linguagem de marcação como HTML, XML ou XAML. Por esse motivo é recomendado que o desenvolvedor já domine os conceitos de P.O.O. e Lógica de programação.
Não tenha medo de aprender 2 ou 3 linguagens a mais para dominar esse paradigma de programação.
É inclusive recomendado aprender um pouco sobre o Java, pois é uma linguagem que utiliza exclusivamente a POO, forçando-o a entender toda a base desse paradigma. Também é uma linguagem utilizada para aplicações nativas em Android, entre outras, então continuará sendo um conhecimento interessante para sua jornada.
- Programação Orientada a Objetos (POO) - Deivid Willyan
- Programação Orientada a Objetos (POO)
- Curso de programação oriendada a objetos
Git é um sistema de controle de versões que pode ser utilizado para registrar o histórico de edições de qualquer tipo de arquivo. Pense em algo como um "Save Point" em um jogo ou como o botão Salvar, mas guardando o que foi modificado e por quem foi. O conteúdo abaixo irá ajudá-lo a compreender melhor o que é e como usá-lo. Consideramos importante saber isto antes de começar para que você possa utilizá-lo durante seus estudos.
P.S.: Não confunda Git com Github ou Gitlab. Esses dois últimos são - de forma básica - plataformas onde você pode utilizar Git para guardar seus projetos.
[Ver o conteúdo]
Dart é a linguagem de programação por trás do framework Flutter.
Sem saber utilizar Dart poucas serão as chances de
Assista primeiro:
- Dart (a linguagem do Flutter)
- Por que o Flutter usa o Dart (Ative as legendas)
- Dart (a linguagem do Flutter) em 50 minutos
https://www.youtube.com/watch?v=NrO0CJCbYLA
É importante ressaltar que o Dart sofreu mudanças consideráveis na segunda metade de 2021, e receberá mudanças a partir do dia 25 de Janeiro (previsto), por tanto, não é recomendado para iniciantes os cursos gravados antes de julho de 2021. Atualizaremos o roadmap conforme estas forem ocorrendo, mas sigam a documentação do Dart pois esta sempre estará atualizada.
CURSOS GRATUITOS:
CURSOS PAGOS:
DOCUMENTAÇÃO:
Não pule essa etapa, pois conhecer a base do Dart será o principal diferencial para desenvolver em Flutter.
[Ver o conteúdo]
Após seguir os passos da sessão anterior, chegou a hora de usar as ferramentas do SDK. Se não conhece o Flutter, leia ESTE ARTIGO.
Leu? Já conhecia o Flutter? Por onde você pode começar? Vamos lá para o roadmap em si. Ao final, colocaremos alguns links de cursos conhecidos e recomendados, alguns gratuitos e alguns pagos. O Flutter e o Dart tem um grande número de criadores de conteúdo que disponibilizam muito material e é difícil manter esse artigo sempre atualizado, então se conhece alguém com um bom conteúdo, pode mandar sua sugestão pelo github para nós.
https://www.youtube.com/watch?v=lHhRhPV--G0
https://www.youtube.com/watch?v=I9ceqw5Ny-4
Tudo no Flutter é Widget.
A tela de um aplicativo Flutter é constituida pela união de outros widgets nativos.
- Domine os principais widgets de alinhamento: (Column, Row, Stack).
- Entenda o funcionamento do Container.
- Teste todos os widgets disponível NESSE CATÁLOGO.
Existem três formas de criar widgets customizados, o StatelessWidget, StatefulWidget e InheritedWidget. A diferênça entre os três deve ser a primeira coisa que um novo desenvolvedor Flutter deve aprender.
Após aprender a criar widgets customizados, o desenvolvedor deve aprender a dividir esses widgets em arquivos separados para que possa facilitar a compreenção de outras pessoas que estarão lendo o código posteriomente.
Algumas dicas sobre isso:
- Tente ter um arquivo por Widget.
- Reflita o nome do Widget no nome do arquivo: Ex: HomePage(home_page.dart).
- Flutter Curso 2022 #7 - Criação de widgets
- AULÃO: Criação de formulários
- Formulários e validação no Flutter
- Flutter Curso 2022 #22 - Máscara
- Curso de Flutter #40 - [API] Consumindo API externa (http))
- HTTP e DIO no Flutter para Conectar API REST)
- Como consumir uma API usando Flutter de forma gratuita!
O Provider é a recomendação da equipe do Flutter para quem está iniciando no mundo Flutter para gerenciar estados e injeção de dependência.
- AULÃO sobre o Provider(Flutterando)
- Provider em 10 minutos (Renato Mota)
- Como utilizar o Provider e o ChangeNotifier(Prof. Diego Antunes)
- Flutter Provider for Beginners (Inglês)
Padrões de projetos sÃo importantes para o trabalho em equipe.
- Repository Pattern no Flutter (balta.io)
- CopyWIth
- Injeção de dependências (Flutterando)
- MVC, MVP e MVVM no Flutter (Flutterando)
O StatefulWidget concede ao Widget a possibilidade de gerenciar o próprio estado. Mas as vezes é necessário mudar o estado de vários widgets em uma ação. Para isso, existe alguns padrões para auxiliar nisso.
https://www.youtube.com/watch?v=3tm-R7ymwhc
- AULÃO sobre gerência de estado (Flutterando)
- ValueNotifier. A reatividade mais rápida do Flutter
- Curso de gerência de estadi com ValueNotifier (Flutterando)
- AULÃO sobre Triple (Flutterando)
- Curso de Flutter #6 - Estados (StatelessWidget)
- Curso de Flutter #8 - Estados (StatefulWidget)
A arquitetura de um projeto define a vida útil do mesmo. Todo app tem alguma arquitetura, mesmo que o desenvolvedor não tenha pensado nisso.