Executar Flutter Web em uma porta específica

19 jul. 2024

Executando Flutter Web em uma Porta Específica

O Flutter é um framework poderoso que permite aos desenvolvedores criar aplicativos bonitos e compilados nativamente para dispositivos móveis, web e desktop a partir de um único código-fonte. Ao trabalhar com aplicativos web Flutter, pode haver momentos em que você precise executar seu aplicativo em uma porta específica, seja para testes, desenvolvimento ou fins de implantação. Este post do blog vai guiá-lo através dos passos necessários para executar um aplicativo web Flutter em uma porta específica.

Pré-requisitos

Antes de mergulharmos nas etapas, certifique-se de ter o seguinte instalado:

  • Flutter SDK
  • Dart SDK (normalmente incluído com o Flutter)
  • Um navegador web (Chrome é recomendado)

Se você ainda não configurou o Flutter, pode seguir o guia oficial de instalação do Flutter para começar.

Passos para Executar um Aplicativo Web Flutter em uma Porta Específica

Garantir que o Suporte Web esteja Habilitado

Primeiro, certifique-se de que seu ambiente Flutter esteja configurado para suportar desenvolvimento web. Você pode habilitar o suporte web executando os seguintes comandos no seu terminal:

flutter channel stable
flutter upgrade
flutter config --enable-web

Criar ou Abrir um Projeto Flutter

Você pode criar um novo projeto Flutter ou abrir um existente. Para criar um novo projeto, execute:

flutter create my_flutter_web_app
cd my_flutter_web_app

Executar o Aplicativo Web Flutter em uma Porta Específica

Para executar seu aplicativo web Flutter em uma porta específica, use o comando flutter run com a flag --web-port seguida pelo número da porta que você deseja usar. Por exemplo, para executar seu aplicativo na porta 8080, você executaria:

flutter run -d chrome --web-port=8080

Neste comando:

  • -d chrome especifica que você deseja executar o aplicativo no navegador Chrome. Você pode substituir chrome pelo seu navegador preferido, se necessário.
  • --web-port=8080 define a porta como 8080. Você pode substituir 8080 por qualquer outro número de porta disponível.

Acessar o Aplicativo Web Flutter

Uma vez que o aplicativo esteja em execução, abra seu navegador web e navegue para http://localhost:8080 (ou o número da porta que você especificou). Você deverá ver seu aplicativo web Flutter rodando na porta especificada.

Parando o Aplicativo Web Flutter

Para parar o aplicativo em execução, volte ao seu terminal e pressione Ctrl + C.

Dicas Adicionais

Especificando um Host

Se você precisa executar seu aplicativo web Flutter em um host específico (por exemplo, para permitir acesso de outros dispositivos na mesma rede), você pode usar a flag --web-hostname. Por exemplo:

flutter run -d chrome --web-port=8080 --web-hostname=0.0.0.0

Isso tornará seu aplicativo acessível de outros dispositivos usando o endereço IP da sua máquina e a porta especificada.

Depuração

Se você encontrar problemas ao executar seu aplicativo web Flutter, verifique a saída do terminal para mensagens de erro. O Flutter fornece logs detalhados que podem ajudá-lo a diagnosticar e corrigir problemas.

Hot Reload e Restart

Os recursos de hot reload e hot restart do Flutter estão disponíveis para aplicativos web também. Use r no terminal para hot reload e R para hot restart enquanto o aplicativo está em execução.

Executar seu aplicativo web Flutter em uma porta específica pode ser crucial para vários cenários de desenvolvimento e teste. Seguindo os passos descritos neste guia, você pode facilmente configurar seu ambiente Flutter para atender às suas necessidades.

Configurando VSCode para Executar o Aplicativo Web Flutter em uma Porta Específica

Se você está usando o Visual Studio Code (VSCode) para desenvolvimento Flutter, você pode configurá-lo para executar seu aplicativo web Flutter em uma porta específica modificando o arquivo .vscode/launch.json. Este arquivo permite que você configure personalizações para executar e depurar seu aplicativo. Veja como você pode configurá-lo:

Abra Seu Projeto Flutter no VSCode

Abra seu projeto Flutter no VSCode. Se você não tiver uma pasta .vscode no diretório do seu projeto, você precisará criá-la.

Crie ou Modifique o launch.json

Dentro da pasta .vscode, crie um arquivo chamado launch.json se ele ainda não existir. Adicione a seguinte configuração a este arquivo:

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Flutter Web",
      "type": "dart",
      "request": "launch",
      "program": "lib/main.dart",
      "args": ["-d", "chrome", "--web-port=8080"]
    }
  ]
}

Nesta configuração:

  • "name": Este é o nome da configuração de lançamento. Você pode nomeá-la como quiser, como “Flutter Web”.
  • "type": Define isto como “dart” para aplicativos Flutter.
  • "request": Deve ser “launch”.
  • "program": Especifica o ponto de entrada do seu aplicativo Flutter. Por padrão, é lib/main.dart.
  • "args": Este array inclui os argumentos que você deseja passar para o comando flutter run. Aqui, "-d", "chrome" especifica o dispositivo (navegador Chrome), e --web-port=8080 define a porta como 8080.

Executando a Configuração

Depois de salvar o arquivo launch.json, você pode executar seu aplicativo web Flutter usando esta configuração:

  1. Abra a visualização Executar e Depurar clicando no ícone de reprodução na barra lateral ou pressionando Ctrl + Shift + D.
  2. No menu suspenso superior, selecione a configuração “Flutter Web” (ou qualquer nome que você tenha dado).
  3. Clique no botão verde de reprodução para iniciar a sessão de depuração.

O VSCode executará seu aplicativo web Flutter na porta especificada (8080 neste caso), e você pode acessá-lo navegando para http://localhost:8080 no seu navegador web.

Dicas Adicionais

  • Múltiplas Configurações: Você pode adicionar múltiplas configurações ao arquivo launch.json se precisar executar seu aplicativo em diferentes ambientes ou com diferentes configurações. Basta adicionar mais objetos ao array “configurations”.

  • Especificando Host: Se você precisa executar seu aplicativo em um host específico, pode adicionar a flag --web-hostname ao array "args":

    "args": [
  "-d",
  "chrome",
  "--web-port=8080",
  "--web-hostname=0.0.0.0"
]

  • Recursos de Depuração: O VSCode fornece excelentes recursos de depuração, incluindo pontos de interrupção, inspeção de variáveis e muito mais. Faça uso desses recursos para aprimorar seu fluxo de trabalho de desenvolvimento.

Conclusão

Ao configurar o arquivo launch.json no seu diretório .vscode, você pode facilmente configurar o VSCode para executar seu aplicativo web Flutter em uma porta específica. Esta configuração é particularmente útil para otimizar seu processo de desenvolvimento e garantir consistência em diferentes ambientes de desenvolvimento.

✎ Morpa