Instale o ambiente de desenvolvimento do Flutter

A estrutura para desenvolvimento de aplicativos móveis. Também para desktop e web.

Conteúdo da página

Agora preciso atualizar o aplicativo na Google Play Store para usar o novo SDK do Android, então estou polindo e publicando este tutorial antigo que escrevi há alguns anos.

Captura de tela da página do aplicativo Logical Fallacy Detector na Google Play Store

Um recorte da página do aplicativo na Play Store.

Este tutorial foi originalmente escrito em agosto de 2022, atualizado e publicado em abril de 2024. Por isso, pode conter algumas informações desatualizadas.

Como Fazer

Passos para instalar o Flutter em um computador Linux

Instalar ferramentas de desenvolvimento

https://docs.flutter.dev/get-started/install/linux/android

Verificar ferramentas:

which bash file mkdir rm which

Instalar pacotes:

sudo apt-get update -y && sudo apt-get upgrade -y;
sudo apt-get install -y curl git unzip xz-utils zip libglu1-mesa

Instalar pacotes para desenvolvimento de aplicativos Android:

sudo apt-get install \
    libc6:i386 libncurses5:i386 \
    libstdc++6:i386 lib32z1 \
    libbz2-1.0:i386

Instalar pacotes para desenvolvimento de aplicativos Linux:

sudo apt-get install \
      clang cmake git \
      ninja-build pkg-config \
      libgtk-3-dev liblzma-dev \
      libstdc++-12-dev

Instalar VSCode

https://code.visualstudio.com/docs/setup/linux

Há um link disponível para baixar o pacote Debian do VSCode para Linux: https://go.microsoft.com/fwlink/?LinkID=760868

Em seguida, instale-o assim:

sudo apt install ./<file>.deb

# Se você estiver em uma distribuição Linux mais antiga, precisará executar isso em vez disso:
# sudo dpkg -i <file>.deb
# sudo apt-get install -f # Instalar dependências

Outras distribuições Linux também estão disponíveis na página “setup/linux”.

Instale as extensões do Flutter para o VSCode: https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter

Abra o VS Code Quick Open (Ctrl+P), cole o comando abaixo e pressione Enter.

ext install Dart-Code.flutter

Instalar Chrome

Para desenvolvimento web - Instale o Chrome:

https://www.google.com/chrome/dr/download/

Instalar Android Studio

https://developer.android.com/studio/install#linux

Bibliotecas necessárias para Ubuntu de 64 bits:

sudo apt-get install libc6:i386 libncurses5:i386 libstdc++6:i386 lib32z1 libbz2-1.0:i386

Em sistemas operacionais baseados no Ubuntu 24.04:

sudo apt-get install libc6:i386 libncurses6:i386 libstdc++6:i386 lib32z1 libbz2-1.0:i386

Baixe a versão mais recente do Studio em: https://developer.android.com/studio

Vá para “{installation home}/bin” e digite:

./studio.sh

Edite ~/.bash_profile:

export PATH=$PATH:~/Apps/android-studio/bin

Habilitar o modo acelerado KVM

https://developer.android.com/studio/run/emulator-acceleration?utm_source=android-studio#vm-linux

sudo apt-get install cpu-checker
egrep -c '(vmx|svm)' /proc/cpuinfo

Uma saída de 1 ou maior significa que a virtualização é suportada. Uma saída de 0 significa que seu CPU não suporta virtualização de hardware.

Saída esperada:

INFO: /dev/kvm exists
KVM acceleration can be used

Instalar KVM no Linux Use o comando abaixo para instalar o KVM:

Cosmic (18.10) ou posterior:

sudo apt-get install qemu-kvm libvirt-daemon-system libvirt-clients bridge-utils

Instalar SDK do Flutter

Instalar SDK: https://docs.flutter.dev/get-started/install/linux

https://docs.flutter.dev/get-started/install/linux/android

Pode instalar o SDK manualmente ou via VSCode.

Notas manuais:

download https://storage.googleapis.com/flutter_infra_release/releases/stable/linux/flutter_linux_3.3.2-stable.tar.xz

cd prj

tar xf ~/Downloads/flutter_linux_3.3.2-stable.tar.xz

export PATH=$PATH:~/prj/flutter/bin

which flutter

flutter precache

flutter config --no-analytics

flutter config

Notas do VSCode:

no comando do VS Code (Ctrl+p)

ext install Dart-Code.flutter

No Command Palette (Ctrl+Shift+P), digite flutter.

Selecione Flutter: New Project.

O VS Code solicitará que você localize o SDK do Flutter no seu computador.

Se você tiver o SDK do Flutter instalado, clique em Locate SDK.

Se você não tiver o SDK do Flutter instalado, clique em Download SDK.

Esta opção leva você à página de instalação do Flutter se você não tiver instalado o Git conforme dirigido nos pré-requisitos de ferramentas de desenvolvimento.

Quando solicitado Which Flutter template?, ignore-o. Pressione Esc. Você pode criar um projeto de teste após verificar sua configuração de desenvolvimento.

Após instalar em ~/Apps:

echo 'export PATH="~/Apps/flutter/bin:$PATH"' >> ~/.bash_profile

source ~/.bash_profile

Para desabilitar o relatório de telemetria, execute este comando no terminal:

dart --disable-analytics

Instalar Android Studio

Vá para “{installation home}/bin” e digite:

./studio.sh

Edite ~/.bash_profile:

export PATH=$PATH:/home/yourname/Apps/android-studio/bin

https://docs.flutter.dev/get-started/editor

  • Inicie o VS Code.

  • Invocar View > Command Palette….

  • Digite “install” e selecione Extensions: Install Extensions.

  • Digite “flutter” no campo de pesquisa de extensões, selecione Flutter na lista e clique em Install. Isso também instala o plugin Dart necessário.

  • Invocar View > Command Palette (Ctrl+Shift+P)

  • Digite “doctor” e selecione Flutter: Run Flutter Doctor. (ou execute flutter doctor na janela do terminal)

  • Revise a saída no painel OUTPUT para qualquer problema. Certifique-se de selecionar Flutter na lista suspensa nas diferentes Opções de Saída.

Verificação

flutter doctor

[!] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    ✗ cmdline-tools component is missing
      Run `path/to/sdkmanager --install "cmdline-tools;latest"`
      See https://developer.android.com/studio/command-line for more details.
    ✗ Android license status unknown.
      Run `flutter doctor --android-licenses` to accept the SDK licenses.
      See https://flutter.dev/docs/get-started/install/linux#android-setup for more details.
[✗] Chrome - develop for the web (Cannot find Chrome executable at google-chrome)
    ! Cannot find Chrome. Try setting CHROME_EXECUTABLE to a Chrome executable.
[✓] Linux toolchain - develop for Linux desktop

Para instalar cmdline-tools:

  • Abra o Android Studio,
  • depois SDK (em more),
  • marque Android SDK cmdline-tools latest,
  • depois clique em Apply

Aceitar licenças:

flutter doctor --android-licenses

Se estiver usando Chromium:

which chrome

export CHROME_EXECUTABLE=/usr/lib/chromium/chrome

Verificar Versão do Flutter e Atualizá-lo

Verificação de versão do Flutter:

flutter --version

Para atualizar a versão do Flutter, execute:

flutter upgrade

Criar novo projeto Flutter

  • Invocar View > Command Palette (Ctrl+Shift+P).
  • Digite “flutter” e selecione Flutter: New Project.
  • Selecione Application.
  • Crie ou selecione o diretório pai para a pasta do novo projeto.
  • Digite um nome de projeto, como my_app, e pressione Enter.
  • Aguarde a criação do projeto ser concluída e o arquivo main.dart aparecer.

Depuração no Flutter

ctrl+p

>flutter: select device

Log

https://docs.flutter.dev/testing/code-debugging#logging

stderr.writeln(‘print me’);

import 'dart:developer' as developer;

void main() {
  developer.log('log me', name: 'my.app.category');

  developer.log('log me 1', name: 'my.other.category');
  developer.log('log me 2', name: 'my.other.category');
}
---
import 'dart:convert';
import 'dart:developer' as developer;

void main() {
  var myCustomObject = MyCustomObject();

  developer.log(
    'log me',
    name: 'my.app.category',
    error: jsonEncode(myCustomObject),
  );
}

Pontos de Interrupção (Breakpoints)

import 'dart:developer';

void someFunction(double offset) { debugger(when: offset > 30.0); // … }

Implantar no dispositivo

Crie o apk para seu aplicativo e tente os comandos abaixo:

Limpar seu projeto:

flutter clean

Obter pacotes:

flutter pub get

Construir seu apk:

flutter build apk --release

Encontre seu apk em sua máquina:

your project name\build\app\outputs\flutter-apk (no modo release)

Copie este APK e instale em seu dispositivo móvel

Suspensão (Sleeping) em Dart

Em Código Assíncrono:

  await Future.delayed(Duration(seconds: 1));

Em Código Síncrono:

  import 'dart:io';
  sleep(Duration(seconds:1));

Pacotes Úteis

https://pub.dev/packages/http

https://pub.dev/packages/flutter_easyloading

https://pub.dev/packages/flutter_spinkit

Extensões VSCode

https://medium.com/codex/my-top-5-flutter-extensions-for-vs-code-f36936518ff8

ícones: https://api.flutter.dev/flutter/material/Icons-class.html

todos os ícones: https://fonts.google.com/icons?selected=Material+Icons

==== Buscando dados da internet ====

https://docs.flutter.dev/cookbook/networking/authenticated-requests

Relacionado a: Construir e liberar aplicativo Android

Aplicativo Web Flutter

Plugin VSCode Live Server

Flutter com o Backend