Introdução:
Você está interessado em entrar no mundo de desenvolvimento mobile ou já ouviu falar sobre Flutter e está curioso para entender mais sobre esse poderoso framework? Se sim, você está no lugar certo! Com o passar dos anos o Flutter tem ganhado destaque como uma escolha para desenvolvedores que desejam criar aplicativos para Android e iOS. Neste guia, exploraremos o que é o Flutter até o seu primeiro aplicativo! 📱💙
Tópicos abordados
- O que é o Flutter
- Principais features do Flutter
- Configurando o Ambiente de Desenvolvimento
- Criando seu Primeiro App com Flutter
- Benefícios do Flutter
- Desafios e Soluções
- Referências
O que é o Flutter?
Flutter é um framework de código aberto do Google para a construção de belos aplicativos multiplataforma, compilados nativamente a partir de uma única base de código, de acordo com o site oficial do Flutter. Mas o que ele quer dizer com tudo isso? Simples: o seu código escrito em Flutter pode ser executado em diferentes plataformas, como website, mobile e software. Olha que maneiro! Vale lembrar que o framework usa a linguagem de programação *Dart * como base.
Principais features do Flutter
Uma das principais características do Flutter é a utilização de widgets na construção da aplicação. Widgets são elementos individuais de uma interface de usuário que variam em suas mais diversas formas, desde botões até mesmo layouts complexos com colunas e linhas. A árvore de widgets do Flutter descreve a hierarquia dos widgets em seu aplicativo. Aqui está um pequeno exemplo:
Widget build(BuildContext context) {
return Container(
child: Column(
children: [
TextButton(
onPressed: () {},
child: Text('Sou um Widget'),
),
],
),
);
}
No exemplo acima, temos três tipos de widgets: Container, que contém uma coluna, e dentro dessa coluna, um botão.
Além disso o Flutter possui Hot Reload um recurso que te permite ver instantaneamente as mudanças que você realizou no código, seja durante a criação da interface, adição de novas features etc.
Configurando o Ambiente de Desenvolvimento
Vamos agora para a parte de instalação, ela será dividida em 4 partes: Flutter, Dart, IDE (ambiente de desenvolvimento integrado) e emulador.
Flutter
Clique aqui para abrir a documentação oficial do flutter na parte de instalação
Selecione o seu sistema operacional
Baixe o arquivo .zip
Extraia o .zip e coloque a pasta no diretório (C:)
Na barra de pesquisa do Windows digite "Variáveis de Ambiente" e clique, agora no canto inferior direito clique em variáveis de ambiente
- Clique em PATH e logo depois em Editar
Clique em Novo e coloque o endereço "C:\flutter\bin" (Se você tiver colocado em outra pasta tenha certeza que o endereço esteja correto ;D)
Logo após isso a sua instalação do Flutter foi concluída, para testar abra o seu CMD e digite "flutter doctor".
Dart
Para instalação do Dart vamos utilizar o Chocolatey, um gerenciador de pacotes
Procure na barra de pesquisa : Windows Powershell, e abra em modo administrador
E coloque o seguinte comando
Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://community.chocolatey.org/install.ps1'))
- Após a instalação execute o comando
choco
Agora para instalar o Dart digite
choco install dart-sdk
Após a instalação digite
dart --version
para ver se a instalação deu certo
IDE
Como IDE vamos utilizar o Visual Studio Code
Vá ao site e baixe a versão de acordo com seu sistema operacional
Logo após a instalação vamos instalar a extensão do Flutter e do Dart
- Agora seu Visual Studio Code está pronto para uso
Emulador
Agora vamos configurar onde você verá sua aplicação rodando
Vá até o site do Android Studio e baixe a IDE
Siga as etapas de instalação
É comum ja vir configurado um emulador, mas você pode configurar da maneira que você quiser
Modo alternativo
Os emuladores costumam ser bem pesados, então, existe um método alternativo para visualizar sua aplicação utilizando seu próprio celular
Ative o modo desenvolvedor em seu celular
Entre nas configurações de desenvolvedor > Ative a opção de Depuração USB > Ative a Intalação por USB
Conecte seu celular no computador e pronto!
Criando seu Primeiro App com Flutter
Vamos colocar a mão na massa! Criar seu primeiro aplicativo Flutter é emocionante e surpreendentemente simples.
Abra seu Terminal/CMD
Vá até a pasta de sua preferência e digite
flutter create nome_do_app
Agora digite
cd nome_do_app
e logo após issocode .
para abrir no Visual Studio CodeNosso arquivo da aplicação fica localizada na pasta: lib > main.dart
Selecione o dispositivo onde será instalado a aplicação, é possível realizar isso no canto inferior direito. É nesta estapa onde você pode optar por utilizar seu próprio celular.
- Agora vamos compilar nosso aplicativo e visualizar ele, vá no topo da janela e clique em Run > Run without debugging
- E agora pronto, você tem sua primeira aplicação feita e está pronto para entrar nessa jornada de aprendizado!
Benefícios do Flutter
Uma das maiores vantagens do Flutter é a capacidade de criar aplicativos de alta qualidade para Android e iOS com um único código-base. Isso economiza tempo e recursos no desenvolvimento de aplicativos para múltiplas plataformas.
Desafios e Soluções
É claro que nenhum framework está isento de desafios. Você pode encontrar obstáculos ao longo do caminho, como a curva de aprendizado da linguagem Dart ou a necessidade de se adaptar ao modelo de widgets do Flutter. Felizmente, há uma comunidade ativa de desenvolvedores e muitos recursos disponíveis para ajudá-lo a superar esses desafios.
Com base na minha experiência eu recomendaria aprender o básico de Dart antes de entrar de cabeça no Flutter, apenas para você se familiarizar mais com a linguagem e framework.
Referências
Muito obrigado por ler até aqui, não esqueça de curtir e compartilhar o artigo! 😁💙
Top comments (11)
Muito interessante a sua visão.
Boa! O Flutter não morreu! hahaha
hahaha ainda não!
ótimo artigo!
muito obrigado Lorem!
Guia digno de um curso! Muito foda
Valeu Ygor!
Esse foi um dos artigos mais completos que já li! Obrigada pelas informações valiosas e explicadas de maneira tão assertiva👏👏
Muito obrigado Winnie, fico feliz :D
Incrível guia, Nathan! Com essas valiosas dicas e o poder do Flutter, tenho certeza de que até meu cachorro vai começar a desenvolver apps em breve. 😧🐶💻
KHGSAHJSGAJH, obrigado Ayla!