Como criar seu primeiro projeto em Flutter

*Texto de Lucas Gabriel Johann
Desenvolvedor Flutter na Teagá e membro do SpaceSquad da Rocketseat

Está tentando criar seu primeiro projeto com Flutter? Neste artigo você verá, na prática, três formas simples de colocar seu projeto no mundo, conhecendo suas peculiaridades.

Para uma primeira contextualização, precisamos entender que o Flutter é um kit de desenvolvimento de interfaces, criado pela Google em meados de 2015.

Apesar de ser uma criação de uma gigante da tecnologia, esse é um projeto de código aberto, e surgiu como o framework do Dart, uma linguagem de programação multiparadigma, também desenvolvida pela Google em 2011.

O Flutter permite a criação de aplicações multiplataforma, tendo como principal vantagem sua compilação nativa. No contexto mobile, ele suporta código nativo para os principais sistemas, como Java ou Kotlin, para Android e Objective-C ou Swift para iOS.

Quer entender melhor como é o cenário de desenvolvimento mobile, conhecendo mais sobre as duas principais linguagens do mercado? Então você precisa conferir esse episódio do podcast Faladev:

Pré-requisitos

Existem alguns passos que ajudam a iniciar um projeto em Flutter. Primeiro é preciso que sua SDK esteja instalada, assim como um conjunto de ferramentas para Android. O passo a passo completo para instalação, conforme o sistema operacional, pode ser encontrado na documentação oficial do Flutter, que você pode acessar clicando aqui.

Para verificar se a instalação ocorreu de forma correta, abra o terminal ou prompt de comando do seu sistema operacional e execute o comando flutter doctor.
Se tudo ocorreu bem durante a instalação, seu terminal deve ter um retorno similar ao da imagem abaixo:

Você pode utilizar seu próprio celular ou utilizar um emulador para rodar seu app, fica a seu critério.

Ambiente de Desenvolvimento

Para escrever nosso código, vamos precisar de um editor de texto ou uma IDE.
Você pode utilizar tanto o próprio Android Studio quanto o VS Code (Visual Studio Code), mas, para isso, também precisará instalar algumas extensões para que o seu código seja interpretado corretamente.

Sabendo disso, se você optou pelo Android Studio, deverá adicionar as seguintes extensões:

Por outro lado, se você optou pelo VS Code, deverá adicionar as seguintes extensões:

Atente-se às versões da extensão utilizada, assim você terá sempre acesso ao material mais atual disponível.

Criando seu projeto através do terminal

Para criarmos um projeto Flutter utilizando o terminal, iremos abrir uma nova janela e escrever os seguintes comandos:

Para facilitar o entendimento desse passo, você precisa estar atento ao significado de cada um desses parâmetros. Eles são, respectivamente:

flutter create - indica que um novo projeto flutter será criado;

--platforms android, ios - define que será um projeto para Android e iOS;

project name - informa o nome do projeto;

./ - indica qual o nome da pasta do projeto, normalmente, utilizamos o mesmo nome do projeto;

--org - informa a organização.

Com essa sequência, será criado um projeto para Android e iOS, em que linguagem nativa será Kotlin e Swift, respectivamente.

Mas e se eu quiser que as linguagens nativas sejam Java e Objective-C? Simples, basta utilizar o comando abaixo:

Caso queira desenvolver para todas as plataformas, o comando é o seguinte:

Projeto criado com sucesso! Agora é só abrir em seu editor de texto ou IDE de preferência.

Criando seu projeto através do VS Code

Para criarmos um projeto Flutter utilizando o VS Code, iremos abrir uma nova janela, pressionar as teclas CTRL + SHIFT + P e digitar flutter, em seguida selecionamos a primeira opção: Flutter: New Project.

O próximo passo é selecionarmos um template, que, neste caso, como queremos desenvolver um app, selecionaremos Application.

O VS Code irá perguntar onde você deseja salvar seu projeto, escolha um local de sua preferência e tecle enter. Feito isso, ele solicitará um nome para seu projeto, a título de exemplo, meu app se chamará meu_primeiro_app. Obrigatoriamente o nome do projeto deve utilizar underscore case/snake case.

Para criarmos um projeto utilizando boas práticas e nos atentando aos detalhes, iremos clicar no ícone de engrenagem no canto superior da paleta de comando. Ao clicarmos nela, um menu de configurações para nosso projeto será aberto. Como o da imagem abaixo:

• Organização: você irá informar o responsável pela criação deste projeto, que neste caso, é br.com.rocketseateducation. Atente-se ao formato de escrita para evitar erros.
• Android Language: aqui você irá selecionar a linguagem que seu aplicativo utilizará, com as opções Java ou Kotlin para o desenvolvimento Android nativo.
• iOS Language: aqui você irá selecionar se seu aplicativo utilizará Objective-C ou Swift para o desenvolvimento iOS nativo.
• Platforms: por fim, você irá selecionar quais plataformas você irá desenvolver, tendo como opções: Android, iOS, Linux, macOS, Windows e web.

Definindo a plataforma em que será desenvolvido e a qual a organização o projeto pertence, o VS Code irá criar o seu projeto conforme os parâmetros pré-definidos. O resultado deve ser similar a este:

Criando seu projeto através do Android Studio

Para criarmos um projeto Flutter utilizando o Android Studio, basta clicar no botão New Flutter Project.

O Android Studio irá abrir uma segunda tela, nela vamos configurar o nome do projeto, a pasta em que queremos salvá-lo e as linguagens que queremos utilizar. Assim como as plataformas para as quais iremos desenvolver nosso projeto e a organização.
Você pode adicionar uma breve descrição para seu projeto no campo Description.
O tipo de projeto será Application, afinal queremos desenvolver um aplicativo.

Por fim, é só clicar em Create.

O Android Studio irá criar o seu projeto conforme os parâmetros pré-definidos. O resultado deve ser similar a este:

Qual a melhor opção?

A melhor opção é a que você se sente mais confortável na hora de desenvolver. Utilizando o terminal, você terá que passar todos os parâmetros na mão, enquanto utilizando o Android Studio ou o VS Code este processo é facilitado pela própria IDE.

Espero que tenha gostado desta dica!

Feito com 💜 pelo Space Squad da Rocketseat.