Instale el entorno de desarrollo de Flutter

El marco para el desarrollo de aplicaciones móviles. También para escritorio y web.

Índice

Ahora necesito actualizar la aplicación en Google Play Store para usar el nuevo SDK de Android, así que puliré y publicaré este antiguo tutorial que escribí hace unos años.

Pantalla de la página de Google PlayStore de la aplicación Detector de Falacias Lógicas

Un fragmento de la página de la aplicación de PlayStore.

Este tutorial fue originalmente escrito en agosto de 2022, actualizado y publicado en abril de 2024. Por eso puede contener algunos elementos obsoletos.

Cómo

Pasos para instalar Flutter en una PC con Linux

Instalar herramientas de desarrollo

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

Verificar herramientas

which bash file mkdir rm which

Instalar paquetes

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

Instalar paquetes para el desarrollo de aplicaciones Android

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

Instalar paquetes para el desarrollo de aplicaciones 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

Hay un enlace disponible para descargar el paquete Debian de VSCode para Linux: https://go.microsoft.com/fwlink/?LinkID=760868

Luego instálalo como:

sudo apt install ./<file>.deb

# Si estás en una distribución Linux más antigua, necesitarás ejecutar lo siguiente en su lugar:
# sudo dpkg -i <file>.deb
# sudo apt-get install -f # Instalar dependencias

Otras distribuciones Linux también están en esa página “setup/linux”.

Instalar extensiones de Flutter para VSCode: https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter

Iniciar VS Code Quick Open (Ctrl+P), pegar el siguiente comando y presionar enter.

ext install Dart-Code.flutter

Instalar Chrome

Para el desarrollo web - Instalar Chrome:

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

Instalar Android Studio

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

Bibliotecas necesarias para Ubuntu en 64

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

en sistemas basados en Ubuntu 24.04:

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

Descargar la última versión de studio desde: https://developer.android.com/studio

cd en “{installation home}/bin” y escribe:

./studio.sh

xed ~/.bash_profile

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

Habilitar modo acelerado de 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

Una salida de 1 o mayor significa que la virtualización está soportada. Una salida de 0 significa que tu CPU no soporta la virtualización hardware.

Salida esperada:

INFO: /dev/kvm existe
La aceleración KVM puede usarse

Instalar KVM en Linux Usa el siguiente comando para instalar KVM:

Cosmic (18.10) o posterior:

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

Instalar SDK de Flutter

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

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

Puedes instalar el sdk manualmente o mediante VSCode

Notas manuales:

descargar 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 de VSCode:

en vs code command (Ctrl+p)

ext install Dart-Code.flutter

En el Panel de Comandos ((Ctrl+shift+p)), escribe flutter.

Selecciona Flutter: Nuevo Proyecto.

VS Code te pregunta para localizar el SDK de Flutter en tu computadora.

Si tienes el SDK de Flutter instalado, haz clic en Localizar SDK.

Si no tienes el SDK de Flutter instalado, haz clic en Descargar SDK.

Esta opción te lleva a la página de instalación de Flutter si no has instalado Git como se indica en los requisitos previos de las herramientas de desarrollo.

Cuando se te pregunte ¿Cuál es la plantilla de Flutter?, ignórala. Presiona Esc. Puedes crear un proyecto de prueba después de verificar tu configuración de desarrollo.

Después de instalar en ~/Apps

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

source ~/.bash_profile

Para deshabilitar el informe de telemetría, ejecuta este comando en la terminal:

dart --disable-analytics

Instalar Android Studio

cd en “{installation home}/bin” y escribe:

./studio.sh

xed ~/.bash_profile

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

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

  • Iniciar VS Code.

  • Invocar Ver > Paleta de Comandos….

  • Escribir “instalar”, y seleccionar Extensiones: Instalar Extensiones.

  • Escribir “flutter” en el campo de búsqueda de extensiones, seleccionar Flutter en la lista, y hacer clic en Instalar. Esto también instala el plugin requerido Dart.

  • Invocar Ver > Paleta de Comandos (Ctrl+Shift+P)

  • Escribir “doctor”, y seleccionar Flutter: Ejecutar Flutter Doctor. (o ejecutar flutter doctor en la ventana del terminal)

  • Revisar la salida en el panel de salida para cualquier problema. Asegúrate de seleccionar Flutter desde el menú desplegable en las diferentes opciones de salida.

Revisión

flutter doctor

[!] Cadena de herramientas de Android - desarrollar para dispositivos Android (versión de SDK de Android 34.0.0)
    ✗ El componente cmdline-tools está faltando
      Ejecutar `path/to/sdkmanager --install "cmdline-tools;latest"`
      Ver https://developer.android.com/studio/command-line para más detalles.
    ✗ El estado de la licencia de Android es desconocido.
      Ejecutar `flutter doctor --android-licenses` para aceptar las licencias del SDK.
      Ver https://flutter.dev/docs/get-started/install/linux#android-setup para más detalles.
[✗] Chrome - desarrollar para la web (No se puede encontrar el ejecutable de Chrome en google-chrome)
    ! No se puede encontrar Chrome. Intente establecer CHROME_EXECUTABLE a un ejecutable de Chrome.
[✓] Cadena de herramientas de Linux - desarrollar para escritorio de Linux

Para instalar cmdline-tools:

  • Abrir Android Studio,
  • luego SDK (en más),
  • luego marcar Android SDK cmdline-tools latest,
  • luego hacer clic en Aplicar

Aceptar licencias

flutter doctor --android-licenses

Si estás usando chromium:

which chrome

export CHROME_EXECUTABLE=/usr/lib/chromium/chrome

Verificar la versión de Flutter y actualizarla

Verificación de la versión de Flutter:

flutter --version

Para actualizar la versión de Flutter ejecutar

flutter upgrade

Crear un nuevo proyecto de Flutter

  • Invocar Ver > Paleta de Comandos (Ctrl+Shift+P).
  • Escribir “flutter”, y seleccionar Flutter: Nuevo Proyecto.
  • Seleccionar Aplicación.
  • Crear o seleccionar el directorio padre para la carpeta del nuevo proyecto.
  • Ingresar un nombre de proyecto, como my_app, y presionar Enter.
  • Esperar a que se complete la creación del proyecto y aparezca el archivo main.dart.

Depuración en Flutter

ctrl+p

>flutter: seleccionar dispositivo

Registro

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(myCustom对象),
  );
}

Puntos de interrupción

import 'dart:developer';

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

Implementar en el dispositivo

Crea un APK para tu aplicación y prueba los siguientes comandos

Limpia tu proyecto

flutter clean

Obtener paquetes

flutter pub get

Construir tu APK

flutter build apk --release

Encuentra tu APK en tu máquina

tu nombre del proyecto\build\app\outputs\flutter-apk(on release mode)

copia este APK e instálalo en tu dispositivo móvil

Dormir en Dart

En código asincrónico

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

En código sincrónico

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

Enlaces útiles

Paquetes útiles

https://pub.dev/packages/http

https://pub.dev/packages/flutter_easyloading

https://pub.dev/packages/flutter_spinkit

Extensiones de VSCode

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

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

todos los iconos: https://fonts.google.com/icons?selected=Material+Icons

==== Obteniendo datos de internet ====

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

Relacionado con: Construir y publicar una aplicación Android

Aplicación Flutter para web

Plugin del servidor en vivo de VSCode

Flutter con backend