Explorando o Flutter: Um Guia Básico para Iniciantes

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
  • Flutter
  • Dart
  • IDE
  • Emulador
  • Modo alternativo
• 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

• Agora vá em More actions > Virtual Device Manager
  

• É 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 isso code .para abrir no Visual Studio Code

• Nosso 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.

• Voltar ao inicio do artigo ↑

Referências

Flutter
Dart
Chocolatey

---

Muito obrigado por ler até aqui, não esqueça de curtir e compartilhar o artigo! 😁💙

Comments

[oChefDev]

Muito interessante a sua visão.

[Hewerton Soares]

Boa! O Flutter não morreu! hahaha

[Nathan Ferreira]

hahaha ainda não!

[Lorem Impsu]

ótimo artigo!

[Nathan Ferreira]

muito obrigado Lorem!

[Ygor Izaac]

Guia digno de um curso! Muito foda

[Nathan Ferreira]

Valeu Ygor!

[Winnie Silva]

Esse foi um dos artigos mais completos que já li! Obrigada pelas informações valiosas e explicadas de maneira tão assertiva👏👏

[Nathan Ferreira]

Muito obrigado Winnie, fico feliz :D

[Ayla Santos]

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. 😧🐶💻

[Nathan Ferreira]

KHGSAHJSGAJH, obrigado Ayla!