Explorando o Flutter: Um Guia Básico para Iniciantes
Tags: flutter, beginners, programming, braziliandevs
Published: 2023-09-10 21:32:17

## 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 <a name="topicos-abordados"></a>

- [O que é o Flutter](#O-que-é-o-Flutter)
- [Principais features do Flutter](#principais-features)
- [Configurando o Ambiente de Desenvolvimento](#configurando-ambiente)
 - [Flutter](#flutter)
 - [Dart](#dart)
 - [IDE](#ide)
 - [Emulador](#emulador)
 - [Modo alternativo](#modo-alternativo)
- [Criando seu Primeiro App com Flutter](#criando-primeiro-app)
- [Benefícios do Flutter](#beneficios)
- [Desafios e Soluções](#desafios-e-solucoes)
- [Referências](#referencias)

---


## O que é o Flutter? <a name="O-que-é-o-Flutter"></a>

 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](https://flutter.dev). 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 <a name="principais-features"></a>

 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:

```dart
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 <a name="configurando-ambiente"></a>

 Vamos agora para a parte de instalação, ela será dividida em 4 partes: Flutter, Dart, IDE (ambiente de desenvolvimento integrado) e emulador.

### Flutter <a name="flutter"></a>
 
- [Clique aqui para abrir a documentação oficial do flutter na parte de instalação](https://docs.flutter.dev/get-started/install)

- Selecione o seu sistema operacional

- Baixe o arquivo .zip

![Ilustração do arquivo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xjv8on5q8sagatdj4w8v.png)

- 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

![Imagem mostrando a barra de pesquisa](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v787k8otq64fojnu0ujl.png) 
![Imagem mostrando o botão variáveis de ambiente](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sq3iv31uh1z23jjja0ah.png)

- Clique em **PATH** e logo depois em **Editar**

![Imagem mostrando onde está o PATH](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6bded2l7zgygl95uu0tr.png)

- 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".

![Imagem mostrando a execução do comando flutter doctor](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hwufb0g9kug8wobpu850.png)

### Dart <a name="dart"></a>

- 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``

![Imagem demonstrando o comando](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kwju86cfp13svbf7ui6b.png)

- 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 <a name="ide"></a>
Como IDE vamos utilizar o Visual Studio Code

- Vá ao [site](https://code.visualstudio.com/Download) 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

![Demonstração da extensão Dart](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x2mupm8adk922bef83si.png)
![Demonstração da extensão Flutter](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qgqli3bvhqvpawv820ir.png)

- Agora seu Visual Studio Code está pronto para uso

### Emulador <a name="emulador"></a>
Agora vamos configurar onde você verá sua aplicação rodando

- Vá até o site do [Android Studio](https://developer.android.com/studio?gclid=Cj0KCQjw0vWnBhC6ARIsAJpJM6fh_C3fVLUubcJryaOuxC54XDiJNjqJ3NHRR3qVrVWLEq4H1EDCTnQaAjkhEALw_wcB&gclsrc=aw.ds) e baixe a IDE

- Siga as etapas de instalação

- Agora vá em More actions > Virtual Device Manager
![Gif demonstrando a instrução acima](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n9ric6qbimim3pws55tk.gif)

- É comum ja vir configurado um emulador, mas você pode configurar da maneira que você quiser

### Modo alternativo <a name="modo-alternativo"></a>

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 <a name="criando-primeiro-app"></a>

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``

![Demonstração do comando](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pnx30lap0f6bt6ms1933.png)

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

![Gif explicativo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4h3myrmopan8q95gquu5.gif)

- Agora vamos compilar nosso aplicativo e visualizar ele, vá no topo da janela e clique em Run > Run without debugging

![Gif](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lbojaobax8pnipwwrz3d.gif)

- E agora pronto, você tem sua primeira aplicação feita e está pronto para entrar nessa jornada de aprendizado!

## Benefícios do Flutter <a name="beneficios"></a>

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 <a name="desafios-e-solucoes"></a>

É 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 ↑](#topicos-abordados)

## Referências <a name="referencias"></a>

[Flutter](https://flutter.dev)
[Dart](https://dart.dev)
[Chocolatey](https://chocolatey.org)


---

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