Empezar: Configurar Editor

Puedes construir apps con Flutter utilizando cualquier editor de texto combinado con nuestras herramientas en línea de comando. De cualquier manera, recomendamos utilizar alguno de nuestros plugin para una mejor experiencia. Con nuestros plugins de edición, podrás auto completar código, sintaxis resaltada, asistencia al editar widgets, apoyo para ejecutar & depurar, y más.

Siga los siguientes pasos para agregar un complemento al editor para Androind Studio, IntelliJ o VS Code. Si quiere utilizar un editor diferente, está bien, simplemente salte al siguiente paso: crear y ejecutar tu primer app.

Configuración Android Studio

Android Studio: Un experiencia completa e integrada del IDE para Flutter.

Instalar Android Studio

Otra opción puede ser utilizar IntelliJ:

Instalar los complementos de Flutter y Dart

Flutter es compatible por dos plugins:

  • El complemento de Flutter le da el poder de desarrollo a Flutter (ejecutar, depurar, hot reload, etc.).
  • El complemento de Dart ofrece análisis de código (validación de código como su tipo, auto completar código, etc.).

Para instalar:

  1. Inicie Android Studio.
  2. Abra preferencias de complementos (Preferences>Plugins en macOS, File>Settings>Plugins en Windows & Linux).
  3. Seleccione Browse repositories…, elige el complemento de Flutter y presione install.
  4. Presione Yes cuando aparezca para instalar el complemento de Dart.
  5. Presione Restart cuando aparezca.

Configuración de Visual Studio Code (VS Code)

VS Code: Un editor ligero con Flutter, asistencia al ejecutar y depurar.

Instalar VS Code

  • VS Code, La versión estable más reciente.

Instalar el complemento de Flutter

  1. Inicie VS Code
  2. Llame View>Command Palette…
  3. Teclee ‘install’, y seleccione la acción ‘Extensions: Install Extension’
  4. Introduzca flutter en el campo de busqueda, seleccione ‘Flutter’ en la lista, y presione Install
  5. Seleccione ‘OK’ para recargar VS Code

Valida tu configuración con Flutter Doctor

  1. Llame a View>Command Palette…
  2. Teclee ‘doctor’, y seleccione la acción ‘Flutter: Run Flutter Doctor’
  3. Revise la salida en el panel ‘OUTPUT’ para cualquier inconveniente.

Siguiente paso

Hagamos una prueba: crea un proyecto, ejecútalo y experimenta ‘hot reload’.

Siguiente paso: Prueba Flutter