Flutter: introdução ao desenvolvimento de aplicativos móveis

Instalando e Configurando o Flutter - Apresentação

Apresentando os instrutores

Olá! Seja bem-vindo ao nosso curso Desenvolvendo o Seu Primeiro App em Flutter. Eu sou Priscila Brambilla, atuo atualmente como Tech Lead, tenho alguns anos de experiência com desenvolvimento de software em geral e cerca de 4 ou 5 anos de experiência em desenvolvimento com Flutter.

Audiodescrição: Priscila é uma mulher branca, de cabelos ruivos, que está usando um casaco marrom e óculos pretos com detalhes azuis.

Introduzindo o curso e objetivos

O que vamos ver hoje no nosso curso? Vamos lá. Aqui temos o nosso emulador aberto com o projeto final. Para que possamos ter uma ideia, começaremos literalmente do zero, onde não teremos nada configurado na máquina. Vamos aprender juntos como fazer a configuração da máquina para conseguir rodar o primeiro app em Flutter. A partir do projeto padrão que o Flutter já nos entrega, vamos evoluir do zero até a tela final.

Explorando conceitos de widgets

O que veremos ao longo deste curso com essa aplicação? Vamos entender o que são widgets, que são basicamente os componentes que formam a nossa tela. Quais os tipos de widgets que temos, que no caso são os widgets de conteúdo e os de layout. O que são componentes que têm estado e os que não têm, quais são os ciclos de vida desses componentes que têm estado e quais são as melhores práticas.

Demonstrando exemplos práticos

Agora, vamos mostrar um exemplo de cada um desses casos. No caso dos widgets de conteúdo, temos uma tela que exibe texto, imagem, ícones e um botão. Na parte de layout, apresentamos vários exemplos que demonstram espaçamentos, alinhamentos e como lidamos com essas personalizações dentro da nossa tela. As cores que podemos ver no emulador, como amarelo, verde e vermelho, nos ajudam a entender o que está acontecendo.

Compreendendo o ciclo de vida dos componentes

Outro ponto importante é a compreensão da parte de ciclo de vida. Teremos uma tela onde trocaremos a cor de um quadrado de azul para roxo e vice-versa, permitindo entender o que ocorre nos bastidores dessa tela e o que está sendo feito sem que possamos ver explicitamente.

Analisando o funcionamento de um contador

No final, vamos analisar um contador para entender o que acontece, como o estado é alterado, como a contagem é modificada, quais são as melhores práticas para realizar essas ações e o que devemos evitar ao tentar implementá-las.

Preparando-se para o desenvolvimento

Dado que já compreendemos tudo isso, é recomendado que, a essa altura, tenhamos concluído a formação em Dart para entender a partir deste ponto. Se estivermos prontos, vamos começar a desenvolver nosso projeto do zero.

Instalando e Configurando o Flutter - Apresentando o Flutter

Introduzindo o desafio de criar aplicativos para múltiplas plataformas

Ao chegarmos a este ponto, podemos nos perguntar como criar um novo aplicativo. Provavelmente, também nos questionamos se será necessário aprender duas linguagens diferentes, o que implica em lidar com dois mundos completamente distintos que precisam funcionar perfeitamente tanto em iOS quanto em Android. Isso pode causar receio inicialmente, pois podemos pensar que levará muito mais tempo para aprender. O que fazer em relação a isso? Não se preocupe.

E se dissermos que existe uma maneira muito mais fácil de lidar com essa situação, sem a necessidade de se preocupar com duas linguagens ou plataformas? Assim, a curva de aprendizado será menor. Surge então a pergunta: o que pode tornar isso tão fácil? É nesse contexto que apresentamos o Flutter.

Apresentando o Flutter como solução

O que é o Flutter? O Flutter é uma ferramenta criada pelo Google que utiliza a linguagem Dart. Esta linguagem tem ganhado bastante popularidade recentemente e oferece uma interface de usuário moderna e poderosa, permitindo a personalização de diversos elementos.

Por que o Flutter é uma boa escolha? Podemos considerá-lo uma excelente opção pelos seguintes motivos: ao modificar o código, vemos a alteração na tela imediatamente. Esse processo é conhecido como Hot Reload, um termo amplamente utilizado na comunidade que se refere à capacidade de alterar e visualizar as mudanças simultaneamente. Isso facilita muito o desenvolvimento.

Destacando as vantagens do Flutter

A interface do Flutter é altamente personalizável, permitindo criar telas atraentes e com uma documentação excelente, o que minimiza dificuldades no aprendizado do que precisa ser feito. O Flutter é ideal para quem deseja começar rapidamente e com alta qualidade, pois oferece essa possibilidade de forma eficaz. Além disso, permite lançar aplicativos para várias plataformas simultaneamente, como iOS, Android, Windows, web e outras.

O Flutter também possibilita a construção de interfaces fluidas, graças às ferramentas que oferece. Se buscamos uma manutenção facilitada, o Flutter é uma ótima escolha, pois permite manter uma única base de código, evitando a necessidade de alterações em múltiplos locais e a reescrita do aplicativo mais de uma vez.

Preparando para o próximo passo no desenvolvimento com Flutter

Agora que compreendemos todas essas vantagens, na próxima aula, vamos aprender como inicializar o setup para começar a desenvolver o primeiro projeto.

Instalando e Configurando o Flutter - Instalando o Android Studio

Introduzindo a instalação e configuração do Flutter

Agora que já compreendemos todas as vantagens de escolher o Flutter para iniciar o desenvolvimento de aplicativos para celular, vamos entender como instalar e configurar essa ferramenta no nosso ambiente de desenvolvimento, permitindo que possamos dar os primeiros passos no desenvolvimento. Vamos prosseguir.

Vamos focar no setup no Windows. No navegador, podemos buscar pelo Flutter, e o Google trará o primeiro link oficial do Flutter, que é o www.flutter.dev, garantindo que estamos no lugar certo. Ao clicar nesse link, seremos direcionados para uma tela de boas-vindas do Flutter. No canto superior direito, há um botão "Get Started", onde iniciaremos nosso setup.

Explorando as limitações do setup no Windows

O site detectará automaticamente o tipo de dispositivo que estamos usando e recomendará o caminho adequado. Como estamos no Windows, ele indicará o Windows. É importante observar que, ao fazer o setup para o Windows, ficamos limitados a plataformas que não sejam iOS ou macOS. Isso ocorre porque, para desenvolver e configurar para essas plataformas, é necessário utilizar um Mac, devido a uma limitação da própria Apple. Para saber mais sobre como fazer esse setup posteriormente, deixaremos um link na seção "Saiba Mais", para que possamos seguir adiante sem problemas.

Iniciando o setup do Android no Windows

Seguindo com o setup para o Windows, clicamos na primeira das quatro opções disponíveis. Ele também recomenda a plataforma para o primeiro setup. Como nosso curso foca no desenvolvimento para iOS e Android, seguiremos pelo setup do Android. Chegamos a uma página que oferece uma visão geral e menciona algumas ferramentas de desenvolvimento necessárias. Uma delas é o Git, que provavelmente já está instalado em nossa máquina, mas, se não estiver, é necessário instalá-lo para prosseguir. Além disso, o Android Studio é essencial para configurar e rodar a aplicação Android, pois todas as configurações necessárias estão incluídas no pacote do Android Studio, não sendo possível fazer esse setup separadamente.

Vamos demonstrar como instalar o Android Studio, clicando no link disponibilizado pela própria documentação.

Baixando e instalando o Android Studio

Ao clicar no link, seremos direcionados, inicialmente, para uma página que exibe um guia do ambiente Windows, com os requisitos mínimos e recomendados. No entanto, não é aqui que faremos o download. Devemos ir ao canto superior esquerdo, ao lado da seção de guias de ambiente, onde há um botão para fazer o download. Clicamos nele e, assim, teremos acesso à página de download da versão mais recente do Android Studio.

Na página de download, clicamos no botão para baixar o Android Studio. Em seguida, seremos levados a uma página de contrato e licença, onde devemos aceitar os termos para prosseguir. Salvamos o Android Studio e aguardamos o término do download.

Configurando o Android Studio após a instalação

Após concluir o download e abrir o executável do Android Studio, continuaremos juntos a partir deste ponto. Na página de boas-vindas do Android Studio, clicamos em "Next". Mantemos as configurações padrão, que incluem o Android Studio e o Android Studio Lite. Essas configurações são opções de otimização tanto para dispositivos quanto para emulação. Clicamos em "Next" novamente.

Na tela de caminho de instalação, não alteramos nada, a menos que tenhamos um caminho específico para instalar. Seguimos com a instalação padrão. Após concluir a instalação, clicamos em "Next" novamente.

Finalizando a instalação do Android Studio

Na tela de instalação completa, podemos iniciar o Android Studio a partir deste ponto e finalizar o processo. Uma janela será exibida perguntando se desejamos enviar estatísticas; podemos escolher enviar ou não. Em seguida, veremos uma tela de configuração inicial do Android Studio, que sempre aparece na primeira execução. Novamente, clicamos em "Next".

Por enquanto, deixamos a instalação padrão do Android Studio, com todas as opções de fábrica, para simplificar nosso setup. Algumas informações sobre o tamanho e o que está sendo instalado, como as SDKs do Android Studio, serão exibidas. Falaremos mais sobre isso em breve, pois precisaremos instalar algumas específicas. Por enquanto, mantemos as configurações padrão e seguimos adiante.

Precisamos aceitar as licenças de cada uma das SDKs para continuar. Apenas aceitamos e prosseguimos. Aguardamos até que a instalação seja concluída.

Após a conclusão da instalação, finalizamos o setup do Android Studio. Na tela padrão de primeira inicialização, ainda não temos nenhum projeto criado, pois acabamos de instalar. Por enquanto, ignoramos isso e seguimos com o restante do setup para o Flutter.

Sobre o curso Flutter: introdução ao desenvolvimento de aplicativos móveis

O curso Flutter: introdução ao desenvolvimento de aplicativos móveis possui 178 minutos de vídeos, em um total de 37 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:

• capitulo