Disponibilizando uma aplicação Flutter na Web sem custo

O Flutter é um framework de desenvolvimento multiplataforma que permite criar aplicativos para desktop, web e dispositivos móveis. A versão Web do Flutter é uma ótima opção para criar aplicativos responsivos e modernos que podem ser executados em qualquer navegador. Neste tutorial, você aprenderá como disponibilizar sua aplicação Flutter na web usando o GitHub e o Vercel. O GitHub é um serviço de controle de versão que permite gerenciar seus arquivos e código-fonte. O Vercel é um serviço de hospedagem de aplicativos web que permite publicar seu aplicativo com apenas alguns cliques.  Os pré-requisitos para a execução deste tutorial são os seguintes:

Pré-requisitos

1) Flutter instalado. Informações neste link.

2) Aplicação Flutter.

3) Conta no github.

4) Cliente do github (gh) instalado. Informações neste link.

A aplicação Flutter

O primeiro passo é ter uma aplicação Flutter. Neste Blog temos alguns exemplos simples e interessantes nas postagens listadas abaixo:

 

a) Aplicativo Flutter Acessando API remota

b) Uma aplicação Flutter simples usando o Firestore

Opcionalmente, você pode criar uma aplicação simples de contagem de clicks, apenas digitando o seguinte comando na linha de comando:

$ flutter  create minhapp 

Onde minhaapp é o nome da aplicação que pode ser o que você desejar. Independentemente da forma como o aplicativo foi criado, você cria a versão Web  release do app digitando o seguinte comando.

$ flutter build web --release

Fazendo o upload para o Github

1) Após a criação do aplicativo, vá para o diretório <raiz app>/buid/web:

$ cd build/web/

2) Faça autenticação na sua conta do Github usando o comando abaixo:

$ gh auth login

3) Inicialize o diretório corrente como um repositório do Github:

$ git init

4) Adicione os arquivos na lista para a realização do commit.

$ git add .

5) O comando a seguir cria um repositório remoto no Github. Criamos com o nome cepw, uma vez que iremos utilizar nossa aplicação de consulta ao CEP como exemplo. 

$ gh repo create cepw --public  

6) O próximo comando realiza o primeiro commit. 

$ git commit -m "primeiro"

7) O comando a seguir define a ramificação main, como a ramificação corrente.

$ git branch -M main

8) Associa o repositório Git local ao um repositório remoto no Github.

$ git remote add origin https://github.com/aeledois/cepw.git

9) O comando abaixo envia as alterações da ramificação  local para o repositório remoto . 

$ git push -u origin main

Agora que o aplicativo Flutter Web está no repositório do Github, vamos publicar o aplicativo por meio do Vercel.

Publicando o Aplicativo

1) Abra uma conta no vercel e faça login com sua conta do Github.

2) Selecione a opção de adicionar um projeto. O Vercel listará os projetos no Github para importação. O aplicativo flutter adicionado no repositório deve aparecer na listagem. Clique na opção import.

3) Após a importação o Vercel apresentará as URLs que poderão ser usadas para acessar o aplicativo Flutter.  No nosso exemplo podem ser  usadas tanto, cepw.vercel.app como cepw-aeledois.vercel.app.

Chegamos ao final de nosso Post. Se esse Post foi útil para você, por favor, considere deixar um comentário.